CSS
2016-09-15 本文已影响14人
Nicole__Zhang
CSS 层叠样式表，用来控制HTML标签样式，美化网页。
编写格式： 键值对形式。
color: red; 冒号左边属性名，冒号右边属性值
三种书写形式：
1.行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
2.页内样式：在本网页的style标签中写
<style>
body {
color: red;
}
</style>
3.外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS选择器：
1.标签选择器 （根据标签名找到标签）
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: blue;
}
</style>```
``` stylus
<body>
<div>11111111</div>
<p>2222222222</p>
</body>
2.类选择器 .类名
<style>
/*类选择器*/
.one{
color: cyan;
font-size: 50px;
}
</style>
<body>
<div class="one">3333333</div>
<p class="one">44444444</p>
</body>
3.id选择器 #id名
<style>
/*id选择器*/
#first{
color: chartreuse;
font-size: 100px;
}
</style>
<body>
<div id="first">11111111</div>
</body>
4.并列选择器 （相当于逻辑或 标签选择器，类选择器，id选择器中间用,隔开）
58cc0f15-5657-43c1-a3a4-80f45912e51e.png
5.复合选择器 （相当于逻辑与）
0f47268e-ebf8-4ee3-bba3-73eabd8b0d70.png
6.后代选择器
</style>
/*后代选择器*/
#test2 div{
color: darkviolet;
}
</style>
<body>
<div id="test2">
<p>
<div class="test1">dajdsadsa</div>
</p>
</div>
</body>
7.直接后代选择器
65e5833c-cd81-4ed0-8669-55577dfdec63.png
8.相邻兄弟选择器
fa53bdc6-8a50-456b-bbc3-e2201a7550d7.png
9.属性选择器
1d007b6f-0ad8-4180-b889-63f5ebd8c0ec.png
2681f7ef-7655-4411-ad23-219d238d7bb1.png
9b6f8498-7030-4693-ab86-4eaae4a2a198.png
10.伪类
CSS选择器优先级：
CSS选择器遵循：
1.在相同级别选择器：1.叠加原则 2.就近原则
2.id选择器 > 类选择器 > 标签选择器
3.范围越小优先级别越高
4.important 级别最高
5.行内样式仅次于important
权值：（权值越高优先级别越高）
通配符（*） 0
标签 1
类 10
属性 10
伪类 10
伪元素 1
id 100
组合 101
important 1000
important > 内联 > id > 类 > 标签|伪类|属性选择 > 伪元素 > 通配符 > 继承
