CSS样式表由什么组成

CSS（层叠样式表）是一种用于描述HTML或XML文档外观的样式表语言。它通过定义样式规则来控制网页的布局、颜色、字体等视觉效果。CSS样式表由多个部分组成，每个部分都有其特定的功能和用途。本文将详细介绍CSS样式表的主要组成部分。

1. 选择器（Selectors）

选择器是CSS样式表的核心部分，用于指定哪些HTML元素将应用特定的样式。选择器可以是元素名称、类名、ID、属性等。常见的选择器类型包括：

• 元素选择器：通过HTML元素名称选择元素，例如 p 选择所有段落元素。
• 类选择器：通过类名选择元素，类名以 . 开头，例如 .classname 选择所有具有 class="classname" 的元素。
• ID选择器：通过ID选择元素，ID以 # 开头，例如 #idname 选择具有 id="idname" 的元素。
• 属性选择器：通过元素的属性选择元素，例如 [type="text"] 选择所有 type 属性为 text 的元素。
• 伪类选择器：用于选择元素的特定状态，例如 :hover 选择鼠标悬停时的元素。

2. 声明块（Declaration Block）

声明块包含一组样式声明，每个声明由属性和值组成，并用大括号 {} 包围。例如：

p {
    color: blue;
    font-size: 14px;
}

在这个例子中，p 是选择器，color: blue; 和 font-size: 14px; 是声明块中的两个声明。

3. 属性（Properties）

属性是CSS样式表中的关键部分，用于定义元素的样式。每个属性都有一个名称和一个值，中间用冒号 : 分隔。常见的CSS属性包括：

• 颜色属性：如 color、background-color 等，用于设置文本和背景颜色。
• 字体属性：如 font-family、font-size、font-weight 等，用于设置字体样式。
• 布局属性：如 margin、padding、display、position 等，用于控制元素的布局和定位。
• 边框属性：如 border、border-radius、box-shadow 等，用于设置元素的边框和阴影效果。

4. 值（Values）

值是属性的具体设置，可以是颜色、长度、百分比、关键字等。例如：

• 颜色值：如 red、#ff0000、rgb(255, 0, 0) 等。
• 长度值：如 10px、2em、50% 等。
• 关键字：如 bold、italic、none 等。

5. 注释（Comments）

注释用于在CSS样式表中添加说明或临时禁用某些样式。CSS注释以 /* 开头，以 */ 结尾。例如：

/* 这是一个注释 */
p {
    color: blue; /* 设置段落文本颜色为蓝色 */
}

6. @规则（At-rules）

@规则是CSS中的特殊指令，用于定义样式表的行为或引入外部资源。常见的@规则包括：

• @import：用于引入外部CSS文件。
• @media：用于定义媒体查询，根据设备特性应用不同的样式。
• @keyframes：用于定义动画的关键帧。
• @font-face：用于定义自定义字体。

例如：

@import url("styles.css");

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

7. 继承与层叠（Inheritance and Cascading）

CSS样式表的一个重要特性是继承和层叠。继承指的是子元素会继承父元素的某些样式属性，例如字体和颜色。层叠指的是当多个样式规则应用于同一个元素时，浏览器会根据优先级和特定规则决定最终应用的样式。

8. 单位（Units）

CSS样式表中的值通常需要指定单位，常见的单位包括：

• 绝对单位：如 px（像素）、pt（点）、in（英寸）等。
• 相对单位：如 em、rem、%（百分比）、vw（视口宽度百分比）等。

9. 盒模型（Box Model）

CSS盒模型是CSS布局的基础，每个元素都被视为一个矩形盒子，包含内容、内边距、边框和外边距。盒模型的相关属性包括 width、height、padding、border 和 margin。

10. 伪元素（Pseudo-elements）

伪元素用于选择元素的特定部分，例如 ::before 和 ::after 可以在元素内容的前后插入内容。伪元素以双冒号 :: 开头。例如：

p::before {
    content: ">>";
    color: red;
}

总结

CSS样式表由选择器、声明块、属性、值、注释、@规则、继承与层叠、单位、盒模型和伪元素等多个部分组成。理解这些组成部分及其相互关系，有助于编写高效、可维护的CSS代码，从而更好地控制网页的外观和布局。