一.认识CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: aqua;
font: 16px;
}
</style>
</head>
<body>
<p>
行也思君, 坐也思君
</p>
</body>
</html>
二.CSS引入方式
1.内部样式表
2.行内样式表
<body>
<p style="color: aquamarine; font-size: 16px;">
行也思君, 坐也思君
</p>
</body>
3.外部样式
三.CSS选择器的种类
以下内容只是CSS2标准中支持的选择器
1.基础选择器(单个选择器构成的)
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
1.1类选择器
通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择
<p class="poem">
行也思君, 坐也思君
</p>
<!--html文件-->
.poem{
color:black;
font-size: 20px;
}
<!--css文件-->
1.2id选择器
<p id="poem">
行也思君, 坐也思君
</p>
#poem{
color:black;
font-size: 20px;
}
1.3通配符选择器
2.复合选择器(把多种选择器综合运用起来)
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
2.1后代选择器
<style>
ol li{
color: blue;
}
</style>
2.2伪类选择器
链接伪类选择器
具体可以参考w3c官方文档