HTML元素 和 CSS (9.23 第十天)
HTML元素分类：块级元素和内联元素
块级元素：标签元素会以新行开始或结束<h1><p><table>等
内联元素：显示数据不会以新行开始<a><img><td> 堆积在一起
<div>块级元素，用于组合其他元素，方便我们统一设置属性或者样式
布局：设计网页时，考虑到页面的美观。会设置页面的局部或者整体的一个布局
<table><div>
HTML的事件
需要触发某些动作的发生，需要事件的支持
CSS（层叠式样式表），决定页面怎么显示元素
引入方式：1、引入文件
行内样式：当前的标签元素中直接使用 style:""的属性
内嵌式：在<head>中写样式
外链式：<link >引入外部css文件；导入外部样式
<link rel="stylesheet" type="text/css" href="css/mystle.css">
引入外部样式：使用@import在<head></head>之间应用
<style type="text/css">@import url（css/mystyle.css/）</style>
后两种需要XX.css文件
优先级：行内模式>内嵌方式>外链式
CSS语法：
选择器{属性1：value1；属性2：value2；}（value是值）
选择器：
第一种情况：标签名影响其他同类型的标签
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
color:red;
text-align:center;
/*background-color: red;*/
}
</style>
</head>
<body>
<div>I'm hacker！！</div>
</body>
</html>
第二种情况：id选择器
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#hacker{
color: green;
text-align: center;
}
#china{
color: red;
}
</style>
</head>
<body>
<div id="hacker">I'm hacker！！</div>
<div id="china">我是中国人！！</div>
</body>
/html>
第三种方式：class ，可以在不同的元素中去使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.test/*p.test*/{ /*改为p.test，只在p标签中应用*/
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="test">这是一级标题</h1>
<p class="test">这是段落</p>
</body>
</html>
常用样式：
后背景：background-color background-image
字体：color（颜色） size（大小） text-align（字体位置） text-indet（字体）
盒子模型：Margin 外边框） Border（边框）
Padding（内边框） Conten（显示数据的地方，文本/图片等）
CSS分组和嵌套：
分组：
<style>
<meta charset="utf-8">
<style type="text/css">
h1,h4,p{
color: green;
}
</style>
嵌套：
.marked{} class="marked"的标签
.marker p{} 为所有class=“marked”元素内的p元素正定一个样式
p.marked{} 只要是p标签，并class=“marked”才会被更改样式
CSS显示：
div{visibility: hidden;} 这种隐藏方式依然存在其原有的特征，只不过不显示而已
div{display: none;} 这种隐藏方式直接隐藏标签，其特征也没有了。
CSS定位：
position:static(不受top bottom left right 这种属性影响)/relative（相对定位元素的定位是相对其正常位置）/
fixed（位置固定）/absolute（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，
那么它的位置相对于<html>）/sticiky
CSS对齐：
text-align：center 文字居中
margin：auto 元素居中 图片居中
HTML元素 和 CSS (9.23 第十天)的更多相关文章
- 使用chrome查看页面元素的css样式
使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- javascript操作元素的css样式
我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...
- js原生获取元素的css属性
习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...
- selenium之元素定位-css
CSS定位方式和XPATH定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比XPATH定位速度快,且比XPATH稳定的特性.下面详细介绍CSS定位方式的使用方法 被测网页的HT ...
- 3 、操作元素 (属性 CSS 和 文档处理)
3 操作元素-属性 CSS 和 文档处理 3.1 属性操作 $("p").text() $("p").html() $(":check ...
- Day4 HTML新增元素与CSS布局
Day4 HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...
- 最容易理解的CSS的position教程——十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
随机推荐
- 十六、JSONObject与JSONArray使用-不刷新页面做回写显示
需要导入:json-lib-2.2.2-.jar包 1.json:就是一个键对应一个值,超级简单的一对一关系.对于json嵌套,只要记住符号“:”前是键,符号后是值大括号成对找. String arr ...
- LeetCode刷题--基础知识篇--KMP算法
KMP算法 关于字符串匹配的算法,最知名的莫过于KMP算法了,尽管我们日常搬砖几乎不可能去亲手实现一个KMP算法,但作为一种算法学习的锻炼也是很好的,所以记录一下. KMP算法是根据三位作者(D.E. ...
- modelsim10.4环境变量的设置
在用户变量中设置,注意路径还要包括license.txt 点击高级属性设置 点击环境变量 在用户变量一件名为:MGLS_LICENSE_FILE的变量 点击确定
- IOS TableView 用法
1.在视图上创建TableView( 拖控件),为ViewController创建UITableView属性(链接至TableView)和NSArray属性(存储数据) ViewController. ...
- POJ 2391 Ombrophobic Bovines 网络流 建模
[题目大意]给定一个无向图,点i处有Ai头牛,点i处的牛棚能容纳Bi头牛,求一个最短时间T使得在T时间内所有的牛都能进到某一牛棚里去.(1 <= N <= 200, 1 <= M & ...
- java.lang.ClassNotFoundException: com.microsoft.sqlserver.jdbc.SQLServerDriver java.sql.SQLException
今天下午一直想用netbeans连接数据库,结果就是来来回回碰到这两个问题. 我还在想,连接数据库并不是一个什么困难的事情啊,我都按照教程上一步一步做的,代码什么的都感觉很好,怎么就找不到类呢,怎么就 ...
- 题目：给定一数组 例如：a = [1,2,3,5,2,1] 现用户提供一个数字 请返回用户所提供的数字的所有下标
def test(ary): ds = {} for i in range(len(ary)): if ds.get(ary[i]): ds[ary[i]].append(i) else: ds[ar ...
- oracle的存储过程和函数有什么区别？
Oracle中的函数与存储过程的区别: A:函数必须有返回值,而过程没有. B:函数可以单独执行.而过程必须通过execute执行. C:函数可以嵌入到SQL语句中执行.而过程不行. 其实我 ...
- vue的MVVM
Vue的相关知识有 字符串模板 MVVM 虚拟dom和domdiff,查看下一篇笔记 字符串模板 function render(template, data) { const reg = /\{\{ ...
- Day8 - F - Tree POJ - 1741
Give a tree with n vertices,each edge has a length(positive integer less than 1001).Define dist(u,v) ...