标签的分类
1.块级元素
典型代表: div h1-h6 p ul li
特点: 独占一行
可以设置宽高
2.行内元素
典型代表：span a strong
特点: 在一行显示
不能设置宽高
3.行内块元素
典型代表: input img
标签之间的转换
1.块元素转行内
display:inline
css的四种引入方式
1.行内式
2.嵌入式
3. 链接式
将一个.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
css选择器
1.基本选择器
二.组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }
E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }
注意嵌套规则：
-
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
-
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
-
li内可以包含div
-
块级元素与块级元素并列、内联元素与内联元素并列。
三.属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略)。
E[att=val] 匹配所有att属性等于“val”的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[attr^=val] 匹配属性值以指定值开头的每个元素
E[attr$=val] 匹配属性值以指定值结尾的每个元素
E[attr*=val] 匹配属性值中包含指定值的每个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[alex]{
color: red; #E[att]
}
div[alex="sb"]{
color: red; #E[att=val]
}
div[alex~="xx"]{
color: red; #E[att~=val]
}
div[alex^="sb"]{
color: red; #E[attr^=val]
}
div[alex*="sb"]{
color: red; E[attr*=val]
}
</style>
</head>
<body>
<div alex="sb">123</div>
<p alex="sb">123</p>
<div alex="sb xx">123</div>
</body>
</html>
伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
<style type="text/css"> .box{ 100px;; } .top,.bottom{ 100px; height: 100px; background-color: chartreuse; } .top:hover{ background-color: red; 鼠标移动到top区域，颜色变红色 } .box:hover .top{ background-color: red; 鼠标移动到box区域，top区域变红色 } </style> </head> <body> <div class="box"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
:before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 ----------举例------------------ p:before p:before{content:"hello";color:red} p:after p:after{ content:"hello"；color:red}
选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
css属性操作
1.css text
a. 颜色属性
<div style="color:blueviolet">ppppp</div> <div style="color:#ffee33">ppppp</div> <div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>
b. 字体属性
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ #粗细 <h1 style="font-style: oblique">老男孩</h1> #斜体
c. 背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;
----简写----
background: #ffffff url('1.png') no-repeat right top;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .back{ border:1px solid red; 800px; height: 800px; background-image: url("meinv.png"); background-repeat: no-repeat; #不平铺满 background-repeat: repeat-x; #横向平铺满 } .back{ border:1px solid red; 800px; height:800px; background-image: url("meinv.png"); background-repeat: no-repeat; background-position: 0 0; } </style> </head> <body> <div class="back"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; 18px; height: 20px; background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13"); background-position: 0 -100px; } </style> </head> <body> <span></span> <span></span> <span></span> <span></span> </body> </html>
d.文本属性
font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-indent: 150px; 首行缩进 letter-spacing: 10px; 字符于字符之间的距离 word-spacing: 20px; 单词与单词之间的距离 text-transform: capitalize; 单词首字母大写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> div{ height:100px; background-color: aquamarine; text-align: center; #水平居中 line-height:100px; #文本设置为和div一样的高度，显示居中 } </style> </head> <body> <div>文本属性</div> </body> </html>
e.边框属性
border-style: solid; border-color: chartreuse; border- 20px; -----------简写--------------- border: 30px rebeccapurple solid;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> .foo{ 200px; height:200px; border:1px solid red; } </style> </head> <body> <div class="foo"></div> </body> </html>
f.列表属性
list-style-type 设置列表项标志的类型。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
--------------------------------
#使用图像来替换列表项的标记:
ul {
list-style-image: url('');
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> ul,ol{ list-style: none; #取消列表前面的小图标 } </style> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <ol> <li>123</li> <li>456</li> <li>789</li> </ol> </body> </html>
e.dispaly属性
none
block
inline
inline-block
#none(隐藏某标签) p{display:none;}
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
#block(内联标签设置为块级标签) span {display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
#inline(块级标签设置为内联标签) li {display:inline;}
#inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
#outer{
border: 3px dashed;
word-spacing: -5px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span,a{ 100px; height:100px; } span{ background-color: yellow; display: inline-block; } a{ background-color: firebrick; display: inline-block; } div{ word-spacing: -5px; #取消边距间隔 } </style> </head> <body> <div> <span>span</span> <a href="#">a</a> </div> </body> </html>
外边距(margine)和内边距(padding)
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。
margine(外边距)
单边外边距属性：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
简写属性:------------------
margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
float属性
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size:0; } .box1{ 200px; height: 200px; background-color: red; float: left; } .box2{ 200px; height: 200px; background-color: blue; float: left; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> </div> <div>footer</div> </body> </html>
position(定位)
a. static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
b. position: relative／absolute
position: relative
1. 参照物是元素之前文档流中的位置
2. 元素不脱离文档流(之前的空间位置依然存在)
position: absolute
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素
那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框
而不论原来它在正常流中生成何种类型的框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .div1{ 300px; height: 200px; background-color: red; } /*.div2{*/ /* 300px;*/ /*height: 300px;*/ /*background-color: rebeccapurple; */ /*position: relative;*/ /*top:100px;*/ /*left:100px;*/ /*}*/ .div2{ 300px; height: 300px; background-color: rebeccapurple; position: absolute; top:100px; left:100px; } .div3{ 300px; height: 200px; background-color: green; } </style> </head> <body> <div class="outer"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .item1{ 200px; height: 200px; background-color: red; } .item2{ 200px; height: 200px; background-color: yellow; position: absolute; top:200px; left:200px; } .item3{ 200px; height: 200px; background-color: green; } .outer{ border: 1px solid red ; position: relative; } </style> </head> <body> <div class="item1"></div> <div class="outer"> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>
c. position:fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ 100%; height: 1200px; background-color: darkgrey; } .return_top{ 80px; height: 80px; background-color: burlywood; color: white; text-align: center; line-height: 80px; position: fixed; bottom: 20px; right: 20px; } </style> </head> <body> <div class="content"></div> <div class="return_top">返回顶部</div> </body> </html>