前端必会之二 css：层叠样式表
CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS的引入方式：
- 内联样式：通过标签的style属性为其指定CSS样式。
- 内部样式表：在HTML文档的<head>标签中加入<style>标签，在其中编写CSS代码。
- 外部样式表：创建一个CSS文件，并通过HTML文档的<link>标签引入。
CSS的选择器：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：在HTML标签的class属性中设置一个名称，然后在CSS中以"."加上这个名称作为选择器。
- ID选择器：在HTML标签中设置一个id属性，然后在CSS中以"#"加上这个id作为选择器。
- 伪类选择器：用于向某些选择器添加特殊的效果，如:hover和:active。
CSS的特性：
- 层叠性：多个样式可以作用于同一个元素，样式会层叠。
- 继承性：一些CSS属性可以被子元素继承。
- 实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
.red {
color: red;
}
#green {
color: green;
}
p:hover {
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="red">This is a red paragraph.</p>
<p id="green">This is a green paragraph.</p>
</body>
</html>在这个例子中，首先定义了所有p标签的颜色为蓝色。然后定义了一个类red，将其应用于具有该类的元素，使其颜色变为红色。接着定义了一个id为green的元素，使其颜色变为绿色。最后，定义了一个伪类:hover，当鼠标悬停在段落上时，字体大小会变为20px。
评论已关闭