CSS
一. css的四种引入方式
1.行内式
2.嵌入式
3. 链接式
将一个.css文件引入到HTML文件中
|
4.导入式
二. css选择器
1.基本选择器
二.组合选择器
|
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如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伪类是用来给选择器添加一些特殊效果。
|
1 <style type="text/css">
2 a:link{
3 color: red;
4 }
5 a:visited {
6 color: blue;
7 }
8 a:hover {
9 color: green;
10 }
11 a:active {
12 color: yellow;
13 }
14 </style>
15 </head>
16 <body>
17 <a href="01-hello-world.html">hello-world</a>
18 </body>
19 </html>
20
21 例子
列子
1 <style type="text/css">
2 .box{
3 width: 100px;;
4 }
5
6 .top,.bottom{
7 width: 100px;
8 height: 100px;
9 background-color: chartreuse;
10
11 }
12
13 .top:hover{
14 background-color: red; 鼠标移动到top区域，颜色变红色
15 }
16
17 .box:hover .top{
18 background-color: red; 鼠标移动到box区域，top区域变红色
19 }
20
21 </style>
22 </head>
23 <body>
24 <div class="box">
25 <div class="top">top</div>
26 <div class="bottom">bottom</div>
27 </div>
28 </body>
29 </html>
:hover 背景黄色 鼠标上去红色 例子
选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
1 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
2
3 2、有!important声明的规则高于一切。
4
5 3、如果!important声明冲突，则比较优先权。
6
7 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
8
9 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
优先级顺序
三 css属性操作
1.css text
a. 颜色属性
|
b. 字体属性
|
c. 背景属性
|
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .back{
8 border:1px solid red;
9 width: 800px;
10 height: 800px;
11 background-image: url("meinv.png");
12 background-repeat: no-repeat; #不平铺满
13 background-repeat: repeat-x; #横向平铺满
14 }
15
16 .back{
17 border:1px solid red;
18 width: 800px;
19 height:800px;
20 background-image: url("meinv.png");
21 background-repeat: no-repeat;
22 background-position: 0 0;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="back">
28
29 </div>
30 </body>
31 </html>
背景属性 示例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8
9 span{
10 display: inline-block;
11 width: 18px;
12 height: 20px;
13 background-image: url("http:///images/icon_18_118.png?v=2.13");
14 background-position: 0 -100px;
15 }
16 </style>
17 </head>
18 <body>
19
20
21 <span></span>
22 <span></span>
23 <span></span>
24 <span></span>
25
26 </body>
27 </html>
抽屉 小图标显示
d.文本属性
|
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 div{
8 height:100px;
9 background-color: aquamarine;
10 text-align: center; #水平居中
11 line-height:100px; #文本设置为和div一样的高度，显示居中
12 }
13 </style>
14
15 </head>
16 <body>
17 <div>文本属性</div>
18 </body>
19 </html>
text-align line-height
e.边框属性
|
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 .foo{
8 width:200px;
9 height:200px;
10 border:1px solid red;
11 }
12 </style>
13
14 </head>
15 <body>
16 <div class="foo"></div>
17 </body>
18 </html>
示例
f.列表属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>文本</title>
6 <style>
7 ul,ol{
8 list-style: none; #取消列表前面的小图标
9 }
10 </style>
11 </head>
12 <body>
13
14 <ul>
15 <li>123</li>
16 <li>456</li>
17 <li>789</li>
18 </ul>
19
20 <ol>
21 <li>123</li>
22 <li>456</li>
23 <li>789</li>
24 </ol>
25 </body>
26 </html>
View Code
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;
}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 span,a{
8 width:100px;
9 height:100px;
10 }
11 span{
12 background-color: yellow;
13 display: inline-block;
14 }
15 a{
16 background-color: firebrick;
17 display: inline-block;
18 }
19 div{
20 word-spacing: -5px; #取消边距间隔
21 }
22 </style>
23 </head>
24 <body>
25 <div>
26 <span>span</span>
27 <a href="#">a</a>
28 </div>
29 </body>
30 </html>
word-spacing 取消边距间隔
四.外边距(margine)和内边距(padding)
|
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等
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container:after{
8 content: ".";
9 display: block;
10 clear: both;
11 visibility: hidden;
12 line-height: 0;
13 height: 0;
14 font-size:0;
15 }
16 .box1{
17 width: 200px;
18 height: 200px;
19 background-color: red;
20 float: left;
21 }
22 .box2{
23 width: 200px;
24 height: 200px;
25 background-color: blue;
26 float: left;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="container">
32 <div class="box1">box1</div>
33 <div class="box2">box2</div>
34 </div>
35
36 <div>footer</div>
37 </body>
38 </html> 清除浮动
六.position(定位)
a. static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
b. position: relative／absolute
position: relative
1. 参照物是元素之前文档流中的位置
2. 元素不脱离文档流(之前的空间位置依然存在)
position: absolute
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素
那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框
而不论原来它在正常流中生成何种类型的框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 *{
9 margin: 0px;
10 }
11
12
13 .div1{
14 width: 300px;
15 height: 200px;
16 background-color: red;
17 }
18 /*.div2{*/
19 /*width: 300px;*/
20 /*height: 300px;*/
21 /*background-color: rebeccapurple; */
22 /*position: relative;*/
23 /*top:100px;*/
24 /*left:100px;*/
25 /*}*/
26
27 .div2{
28 width: 300px;
29 height: 300px;
30 background-color: rebeccapurple;
31 position: absolute;
32 top:100px;
33 left:100px;
34 }
35
36 .div3{
37 width: 300px;
38 height: 200px;
39 background-color: green;
40
41 }
42
43
44 </style>
45 </head>
46 <body>
47
48 <div class="outer">
49 <div class="div1"></div>
50 <div class="div2"></div>
51 <div class="div3"></div>
52 <div class="div4"></div>
53 </div>
54
55
56
57
58 </body>
59 </html> relative absolute例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7
8 *{
9 margin: 0px;
10 }
11
12
13 .item1{
14 width: 200px;
15 height: 200px;
16 background-color: red;
17 }
18
19
20 .item2{
21 width: 200px;
22 height: 200px;
23 background-color: yellow;
24 position: absolute;
25 top:200px;
26 left:200px;
27 }
28
29 .item3{
30 width: 200px;
31 height: 200px;
32 background-color: green;
33
34 }
35 .outer{
36 border: 1px solid red ;
37 position: relative;
38 }
39
40 </style>
41 </head>
42 <body>
43
44
45 <div class="item1"></div>
46
47 <div class="outer">
48 <div class="item2"></div>
49 <div class="item3"></div>
50 </div>
51
52
53
54
55 </body>
56 </html> 常用设置
c. position:fixed
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .content{
8 width: 100%;
9 height: 1200px;
10 background-color: darkgrey;
11 }
12 .return_top{
13 width: 80px;
14 height: 80px;
15 background-color: burlywood;
16 color: white;
17 text-align: center;
18 line-height: 80px;
19 position: fixed;
20 bottom: 20px;
21 right: 20px;
22 }
23 </style>
24 </head>
25 <body>
26
27 <div class="content"></div>
28 <div class="return_top">返回顶部</div>
29
30 </body>
31 </html> fixed 右下角定位
