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选择器中间用,隔开)
5.复合选择器 (相当于逻辑与)
6.后代选择器
</style>
/*后代选择器*/
#test2 div{
color: darkviolet;
}
</style>
<body>
<div id="test2">
<p>
<div class="test1">dajdsadsa</div>
</p>
</div>
</body>
7.直接后代选择器
8.相邻兄弟选择器
9.属性选择器
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 > 类 > 标签|伪类|属性选择 > 伪元素 > 通配符 > 继承