CSS层叠样式表

1 CSS代码写在哪？
1.1 内联样式表：HTML标签内
<p style="color:blue;">落霞与孤鹜齐飞，秋水共长天一色</p>
1.2 内部样式表：head标签内，title标签后面
<style type="text/css">
p {
font-size: 80px;
}
</style>
1.3 外部样式表：独立的CSS文件中
p {
border-style: solid;
border-width: 1px;
border-color: black;
text-align: center;
}
使用link标签引入到当前文档中
<link rel="stylesheet" type="text/css" href="css/style.css" />
2 CSS基本语法
2.1 CSS语法由三部分构成：选择器、属性和值：selector {property: value}

image.png

3 CSS选择器：根据id值定位HTML元素
3.1 id选择器
<ul>
<li>普通列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
<li id="tuHao">土豪列表项</li>
<li>普通列表项</li>
</ul>
#tuHao {
font-size: 50px;
}

3.2 类选择器：如果想将一组元素设定为相同的样式，可为它们设置相同的class属性值，再通过CSS类选择器指定相同的样式
<ul>
<li>普通列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
<li class="special">特殊列表项</li>
<li class="special">特殊列表项</li>
<li class="special">特殊列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
</ul>
.special {
font-size: 50px;
}

image.png

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。