CSS样式选择器
一、如何设置CSS
1.标签上直接设置style属性（如直接在div里写相对应的样式）
1 <body> 2 <div style="height: 48px;">第一层</div> 3 <div style="height: 48px;">第二层</div> 4 <div style="height: 48px;">第三层</div> 5 </body>
2.在head里面写成类，变成选择器（如id选择器、class选择器、标签选择器，属性选择器）
（1）id选择器（把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名）
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1{ 6 7 height: 48px; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="i1">第一层</div> 13 </body>
（2）class选择器（最常用，把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用）
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .c1{ 6 7 height: 48px; 8 } 9 </style> 10 </head> 11 <body> 12 <div class="c1">第一层</div> 13 <div class="c1">第二层</div> 14 <div class="c1">第三层</div> 15 </body>
（3）标签选择器（标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容）
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 div{ 6 7 height: 48px; 8 } 9 </style> 10 </head> 11 <body> 12 <div >第一层</div> 13 <div >第二层</div> 14 <div >第三层</div> 15 </body>
（4）属性选择器
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 input[name="James"]{width: 20px;height: 20px;} 6 </style> 7 </head> 8 <body> 9 <input type="text" name="James"> 10 <input type="text"> 11 <input type="password"> 12 </body>
注：根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
3.文件方式引用样式
（1）定义样式并保存到commons.css文件
1 .c1{
2
3 color: white;
4 }
5 .c2{
6
7 }
（2）引用commons.css文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="commons.css"> 7 </head> 8 <body> 9 <div class="c2 c1" style="color:palegreen" >第一层</div> 10 </body> 11 </html>
二、选择器的关联和组合及优先顺序
1.关联选择器（层级选择器）
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 span div{ 6 7 height: 48px; 8 } 9 </style> 10 </head> 11 <body> 12 <div >第一层</div> 13 <span> 14 <div >span里的div</div> 15 </span> 16 <div >第三层</div> 17 </body>
注：只让span里面的div标签应用样式，可多层嵌
2.组合选择器
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1,#i2,#i3{ 6 7 height: 48px; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="i1">第一层</div> 13 <div id="i2">第一层</div> 14 <div id="i3">第一层</div> 15 </body>
注：组合选择器，加,号，相同样式多命名
3.css样式优先级
如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .c1{ 6 7 color: white; 8 } 9 .c2{ 10 11 } 12 </style> 13 </head> 14 <body> 15 <div class="c2 c1" style="color:palegreen" >第一层</div> 16 </body>
三、CSS样式
（一）borde（边框）
1.基本边框
1 <body> 2 <div style="border: 1px dotted red;"> 3 第一层边框 4 </div> 5 <!--border：边框宽度 solid：边框样式实线（dotted虚线）颜色：red--> 6 </body>
2.边框其他样式
1 <body> 2 <div style="height: 48px; 3 width: 80%; 4 border: 1px solid brown; 5 font-size: 16px; 6 text-align: center; 7 line-height: 48px; 8 ">第二层边框</div> 9 10 <!--height: 48px 边框高度--> 11 <!--width: 80% 宽度页面的80%--> 12 <!--border: 1px solid brown 边框宽度、样式、颜色--> 13 <!--font-size: 16px; 字体大小--> 14 <!--text-align: center; 水平居中--> 15 <!--line-height: 48px; 垂直居中--> 16 </body>
（二）float（让图标飘在左边或右边）
1 <body> 2 <div style="width: 20%;float: left;">左边</div> 3 <div style="width: 80%;float: right;">右边</div> 4 </body>
注：float例子
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .pg-header{ 6 height: 38px; 7 8 line-height: 38px; 9 } 10 </style> 11 </head> 12 <body style="margin: 0 auto;"> 13 <div class="pg-header"> 14 <div style="float: left;">*收藏本站</div> 15 <div style="float: right;"> 16 <a>登录</a> 17 <a>注册</a> 18 </div> 19 </div> 20 <div style="width: 300px;border: 1px solid red;"> 21 <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div> 22 <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div> 23 <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div> 24 <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div> 25 <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div> 26 <div style="clear: both"></div> 27 </div> 28 </body>
注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
(三)display（块级标签和行内标签相互转换）
1.display:inline 转换为行内标签；
2.display：block转换为块级标签；
3.display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
|
1
2
3
4
|
<
body
>
<
div
style="display: inline">块级</
div
>
<
span
style="display: block">行内</
span
>
</
body
>
|
4. display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
注：
|
1
2
3
4
|
<
body
>
<
span
style="display: inline-block;height: 50px;width: 70px">行内</
span
>
<
div
style="display: inline">块级</
div
>
</
body
>
|
（五）边距（margin，padding）
1.外边距margin
|
1
2
3
4
5
6
|
<
body
>
<
div
style="border: 2px solid red;height: 70px;">
<
div
style="height: 50px;
margin-top: 25px;"></
div
>
</
div
>
</
body
>
|
注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
2.内边距padding
|
1
2
3
4
5
6
|
<
body
>
<
div
style="border: 2px solid red;height: 70px;">
<
div
style="height: 50px;
padding-top: 25px;"></
div
>
</
div
>
</
body
>
|
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
（六）position
1.fixed固定到浏览器某个位置（相当于float）
（1）返回顶部按钮
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
body
style="margin: 0 auto">
<
div
onclick="GoTop();" style="width: 50px;height: 50px;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</
div
>
<
div
style="height: 5000px;margin: 0;">ddddddddddddd
</
div
>
<
script
>
function GoTop() {
document.body.scrollTop=0;
}
</
script
>
</
body
>
|
（2）固定菜单栏
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<
head
>
<
meta
charset="UTF-8">
<
title
>Title</
title
>
<
style
>
.pg-header{
height: 48px;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
height: 5000px;
margin-top: 50px;
}
</
style
>
</
head
>
<
body
style="margin: 0">
<
div
class="pg-header">头部</
div
>
<
div
class="pg-body">内容</
div
>
</
body
>
|
2.relative+absolute（相对与relative固定路径）
（1）基本写法
|
1
2
3
4
5
|
<
body
>
<
div
style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<
div
style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;"></
div
>
</
div
>
</
body
>
|
（2）应用——多层模态
用了position样式实现三层页面；当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
body
<div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
height: 500px;width: 500px"></
div
>
<
div
style="z-index:9;position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.5"></
div
>
<
div
style="height: 5000px;</
div
>
</
body
>
|
当页面出现多层时，用z-index：10数值来确定浮动层的上下关系；opacity：0.5设置页面透明度（1表示完全遮住）；fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px最顶层的div进行居中处理；
（七）overflow
（1）应用背景（图片过大，把边栏撑破了）
|
1
2
3
4
5
|
<body>
<div style
=
"height: 200px;width:140px;overflow: hidden "
>
<img src
=
"i.png"
/
>
<
/
div>
<
/
body>
|
外层定义div高度和宽度后，最后显示的效果还是以图片的大小为准的，图片把外层div给撑开了，这时候可以用到下面俩个属性
（2）overflow：auto 图片出现滚动条
|
1
2
3
4
5
|
<body>
<div style
=
"height: 200px;width:140px;overflow: auto"
>
<img src
=
"i.png"
/
>
<
/
div>
<
/
body>
|
（3）overflow：hidden 图片只显示div设置的大小，其他部分隐藏
|
1
2
3
4
5
|
<body>
<div style
=
"height: 200px;width:140px;overflow: hidden"
>
<img src
=
"i.png"
/
>
<
/
div>
<
/
body>
|
（八）hover
可以看一下抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
title
>Title</
title
>
<
style
>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
line-height: 48px;
color: white;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display:inline-block;
padding: 0 10px 0 10px;
}
.pg-header .menu:hover{
}
</
style
>
</
head
>
<
body
>
<
div
class="pg-header">
<
div
class="w">
<
a
>LOGO</
a
>
<
a
class="menu">全部</
a
>
<
a
class="menu">42区</
a
>
<
a
class="menu">段子</
a
>
<
a
class="menu">1024</
a
>
<
a
class="menu">爆文</
a
>
</
div
>
</
div
>
<
div
class="pg-body">
</
div
>
</
body
>
</
html
>
|
其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式
（九）background
之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片
1.background-image
|
1
2
3
4
|
<
body
>
<
div
style="background-image: url('i.png');height: 700px;width: 700px">
</
div
>
</
body
>
|
默认div框架有多大，图片重复放置占的位置就有多大
2.background-repeat
|
1
2
3
4
|
<
body
>
<
div
style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
</
div
>
</
body
>
|
background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）
3.background-position-x、background-position-y（显示图片中特定的位置图标）
|
1
2
3
4
|
<
body
>
<
div
style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position-x:20px;background-position-y: 40px"></
div
>
</
body
>
|
background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动；两者可以简写成：
|
1
2
3
4
|
<
body
>
<
div
style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position:20px 40px"></
div
>
</
body
>
|
针对background整体还有更加简单的写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
element.style {
background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
background-position-x: -105px;
background-position-y: -212px;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
|
background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; 同时设定了颜色，图片，位置，是否repeat
4348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
