CSS样式表中文手册：CSS v2.0完全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42576467/article/details/144122401

简介：CSS（层叠样式表）是网页设计的基础，CSS v2.0作为关键版本，提供了更灵活的页面布局和设计控制。《样式表中文手册CSS v2.0》全面介绍了CSS2.0的核心概念、语法、选择器、属性值、层叠与继承规则、媒体查询、布局技术和浏览器兼容性。本书分为多个部分，旨在帮助读者掌握CSS2.0的关键特性，并通过实践应用提升网页设计能力。尽管CSS已经发展到更先进的版本，但CSS2.0的扎实基础对深入理解CSS技术至关重要。

1. CSS基本原理介绍

1.1 CSS的定义和作用

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。CSS描述了在屏幕、纸张、语音或其他媒体上元素的呈现方式，它能够定义内容的布局、设计和互动性。

1.2 CSS的基本语法

CSS的基本语法由三部分组成：选择器（Selector）、属性（Property）和值（Value）。例如， h1 { color: blue; } 这段代码表示选择所有的 <h1> 标签，并将其字体颜色设置为蓝色。选择器指定了CSS规则应用于哪些HTML元素，属性指定了我们想要改变的样式特性，值则指定了这个属性的新样式。

1.3 CSS文件的链接和引入

CSS可以通过多种方式链接到HTML文档中，最常见的是内部样式表和外部样式表。内部样式表是直接在HTML文档的 <head> 部分的 <style> 标签内定义的，而外部样式表则通过 <link> 标签引入一个单独的CSS文件。例如：

<!-- 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="styles.css">

使用外部样式表可以提高网页加载速度并减少HTML文档的复杂度，而且便于对网站样式进行集中管理。

2. 各类型选择器详述

2.1 基础选择器

2.1.1 元素选择器

元素选择器，也称为类型选择器，是CSS中最基础的选择器之一。它根据HTML元素的标签名来选择元素，对于同类型的标签应用统一的样式规则。例如，如果我们想要给所有的段落 <p> 标签设置字体颜色和大小，可以这样写：

p {
  color: #333;
  font-size: 14px;
}

在这个例子中，所有的 <p> 元素都会被选取，并应用上述的样式规则。元素选择器的作用范围是全局的，它直接影响到所有对应标签的元素。在实际应用中，元素选择器常用于给网页元素设置默认样式，如列表、表格、表单元素等。

2.1.2 类选择器

类选择器是CSS中使用最为频繁的一种选择器类型。它使用点 . 符号后跟类名来选取具有相同类属性值的元素。类名可以由开发者自定义，以达到灵活控制样式的需要。如下代码展示了如何使用类选择器：

.red-text {
  color: red;
}

然后在HTML中，可以将这个类应用到任何需要该样式的元素上：

<p class="red-text">这是一段红色文字。</p>

类选择器的灵活性在于一个元素可以属于多个类，同时一个类可以被多个元素共享。这种方式为样式表的编写带来了极大的灵活性和复用性。

2.1.3 ID选择器

ID选择器使用 # 符号后跟唯一的ID名来选取特定的元素。在HTML文档中，一个ID属性应当是唯一的。使用ID选择器时，需要确保ID的唯一性，否则会导致选择器失效。下面是一个ID选择器的示例：

#unique-section {
  background-color: #f8f8f8;
}

相应的HTML代码片段如下：

<div id="unique-section">
  <p>这是具有特定ID的区域。</p>
</div>

虽然ID选择器提供了非常具体的选择方式，但是在实际开发中，通常推荐使用类选择器，因为ID选择器的使用限制较多，而且过度依赖于ID可能会增加样式与结构的耦合度。

2.2 层级和关系选择器

2.2.1 后代选择器

后代选择器允许你选择一个元素的后代元素。后代元素可以是子元素、孙元素或更深层次的后代。它使用空格分隔父元素和后代元素的选择器。以下示例展示了如何应用后代选择器：

div p {
  background-color: yellow;
}

在这个CSS规则下，所有 <div> 元素内部的 <p> 元素将应用该样式规则，无论 <p> 元素距离 <div> 有多远。后代选择器非常有助于进行更细粒度的样式定制，尤其是在结构复杂的HTML文档中。

2.2.2 子代选择器

与后代选择器不同的是，子代选择器仅选择直接子元素，而不包括更深层次的后代元素。它使用 > 符号连接父选择器和子选择器。以下是一个子代选择器的例子：

div > p {
  color: blue;
}

此规则仅会选择所有 <div> 元素直接的 <p> 子元素，并将它们的文本颜色改为蓝色。它不会影响到 <div> 内部的 <p> 元素的孙代元素。

2.2.3 相邻兄弟选择器

相邻兄弟选择器选取紧接在另一个元素后的兄弟元素。它使用 + 符号作为选择器，仅匹配两个元素相邻的情况。以下是一个相邻兄弟选择器的示例：

h1 + p {
  margin-top: 0;
}

这个规则会选中所有紧跟在 <h1> 标签后的 <p> 标签，并将它们的上边距设为0。相邻兄弟选择器非常适用于处理文档中的特定布局问题，比如消除标题后的多余空间。

2.2.4 通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器类似，但它可以选择所有后续的兄弟元素，而不仅仅是直接相邻的一个。它使用 ~ 符号来表示。以下是一个通用兄弟选择器的示例：

p ~ span {
  color: green;
}

这个规则会选择所有 <p> 元素后的 <span> 元素，无论它们之间有多少其他元素，都将文本颜色改为绿色。这种选择器适用于当你需要为特定元素之后的所有同类元素应用样式时。

2.3 伪类和伪元素选择器

2.3.1 结构性伪类

结构性伪类选择器可以让你基于父元素的结构对元素进行选择。这些选择器没有具体的名称，而是通过特定的语法来标识。例如， :first-child 、 :last-child 、 :nth-child() 等。它们常被用来选择父元素的特定子元素。以下是一个 :first-child 伪类选择器的例子：

ul li:first-child {
  color: red;
}

这段代码会选择所有 <ul> 元素中的第一个 <li> 元素，并将文字颜色改为红色。结构性伪类选择器非常强大，尤其是在动态内容较多的页面中，能够灵活地控制元素的样式，提高代码的可维护性。

2.3.2 用户行为伪类

用户行为伪类与用户的交互行为有关，比如鼠标悬停、点击、键盘输入等。 :hover 、 :active 、 :focus 、 :visited 和 :link 是常见的用户行为伪类。这里我们以 :hover 为例：

a:hover {
  background-color: yellow;
}

这段代码会在用户鼠标悬停在链接 <a> 元素上时，给链接添加一个黄色的背景色。用户行为伪类在创建交互式网站界面时非常有用，它们增强了用户与网站的交互体验。

2.3.3 伪元素选择器

伪元素选择器用于选择元素的特定部分，如首字母、首行或内容之前或之后的内容。常见的伪元素选择器包括 ::before 、 ::after 、 ::first-letter 和 ::first-line 。以下是一个 ::before 伪元素选择器的例子：

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

这段代码会在每个 <p> 元素内容之前插入“>>”，并将文本颜色设为蓝色。通过使用伪元素选择器，我们可以在不修改HTML结构的情况下，为元素的内容添加额外的视觉效果或文本。

以上就是CSS中不同类型选择器的详细介绍和应用示例。掌握这些选择器是进行有效CSS开发的基础，而它们的组合使用将能够创造出更加丰富和复杂的页面效果。

3. CSS2.0属性与值覆盖

3.1 属性继承机制

CSS属性的继承是指某些CSS属性从父元素自动传递到其子元素，而无需为子元素显式定义。继承机制有助于减少代码冗余，使得样式更加统一。

3.1.1 继承属性与非继承属性

并不是所有的CSS属性都会被继承。例如， width 、 height 、 margin 、 padding 等边框和尺寸相关的属性不会被继承，它们只适用于元素本身。而像 color 、 font-family 、 font-size 等与文本相关的属性则是默认继承的。可以通过 inherit 关键字强制非继承属性进行继承。

代码示例：

body {
  color: black;
}

h1 {
  color: inherit; /* 此处强制继承父元素的颜色 */
}

在这个例子中，所有 <h1> 标签将会继承 body 中定义的颜色属性。

3.1.2 继承的特殊情况

某些属性在特定元素上有特殊的继承行为。比如，表格的边框属性在某些浏览器中不会被继承，而 list-style 属性则会被继承。了解这些特殊情况有助于更有效地控制页面样式。

3.2 层叠规则

CSS中的“层叠”指的是当多个选择器指向同一元素时，通过特定的算法决定最终应用哪个属性值的过程。

3.2.1 层叠权重计算

层叠权重是基于选择器的优先级计算的。权重分为四类，从高到低依次为：

内联样式（1000分）
ID选择器（100分）
类选择器、伪类、属性选择器（10分）
元素选择器、伪元素（1分）

权重相同的规则按出现顺序应用。如果一个属性使用了 !important ，那么它会覆盖其他所有权重相同的规则。

示例权重计算：

#nav .nav-item.active { color: blue; } /* 1 ID选择器，1类选择器 = 110分 */
body #nav a { color: red; } /* 1 ID选择器，1元素选择器 = 101分 */

在这个例子中， #nav .nav-item.active 选择器的权重高于 body #nav a 选择器。

3.2.2 !important规则

!important 用于提高规则的优先级，它必须放在属性值的最后。虽然 !important 可以解决样式冲突，但滥用会导致样式维护困难。

使用示例：

p {
  color: red !important;
}

在这个例子中，所有 <p> 标签的颜色都会被设置为红色，即使有其他更高权重的规则。

3.3 值覆盖实例分析

在实际开发中，继承与层叠相互作用，产生复杂的样式覆盖场景。

3.3.1 继承与层叠的结合使用

通过合理利用继承和层叠，可以简化CSS代码，同时保持样式一致性。

代码示例：

body {
  font-family: Arial, sans-serif;
}

button {
  font-family: inherit; /* 继承父元素的font-family */
}

在这个例子中，所有按钮将使用 body 元素中定义的字体。

3.3.2 解决属性冲突的方法

当继承与层叠产生冲突时，应考虑使用更为明确的样式声明来解决。

代码示例：

h1 {
  color: red !important;
}

#content h1 {
  color: blue;
}

在这个例子中，特定ID下的 <h1> 标签将显示为蓝色，因为 #content h1 选择器的权重高于 h1 { color: red !important; } 。

在理解了CSS2.0属性与值的覆盖规则之后，开发者可以更加自信地控制页面样式，减少样式冲突，并且提高CSS代码的可维护性。接下来的章节将讨论层叠与继承规则的进一步解析，并提供实际开发中的应用策略。

4. 层叠与继承规则解析

4.1 层叠的优先级

权重计算法则

在CSS中，当多个选择器指定同一个元素的同一个样式属性时，浏览器会根据一种称为“层叠优先级”的规则来决定最终应用哪个样式值。权重计算法则是一个基于选择器类型的计数系统，每个选择器都有一些特定的权重值。权重计算从四个级别来考虑：

内联样式 （如 <div style="color: red;"> ）总是具有最高的优先级，权重计为1000分。
ID选择器 （如 #myId ）每个权重计为100分。
类选择器、伪类和属性选择器 （如 .myClass 、 :hover 、 [type="text"] ）每个权重计为10分。
元素选择器和伪元素 （如 div 、 ::before ）每个权重计为1分。

如果一个选择器的权重是1001分，而另一个选择器的权重是100分，那么权重高的选择器将胜出。当两个选择器的权重相同时，则应用后面的CSS规则。

当权重相同时， CSS的继承规则 会发挥作用。通常，继承的值比通过任何选择器明确指定的值具有较低的优先级。如果存在继承的值和非继承的值相冲突，那么非继承值（显式声明的样式）将覆盖继承值。

优先级的特殊情况

在某些情况下，权重的计算可能会更加复杂。例如：

组合选择器 ：由多个选择器组成的复合选择器的权重是它们各自权重的总和。例如， .myClass div 中 .myClass 有10分， div 有1分，总权重是11分。
计算的权重 ：计算权重时只考虑每种类型选择器的最大数量，不考虑其他因素。比如， #myId div span 和 #anotherId div span 的权重是一样的，因为它们都包含一个ID选择器和两个元素选择器。
通用选择器 （ * ）、 组合符 （如 + 、 > 、 ~ ）和 否定伪类 （ :not() ）不对权重有任何贡献。
CSS变量和自定义属性 ：在CSS中，变量和自定义属性不会影响层叠的权重。

理解这些权重规则，可以帮助我们更好地控制样式的应用，确保布局的一致性和预期的表现。

4.2 继承的深入探讨

CSS继承的原理

CSS继承是一个将属性值从父元素传递给其子元素的机制。并非所有CSS属性都继承，大部分与盒模型相关的属性如边框（border）、内边距（padding）、外边距（margin）和宽度（width）等都不会被继承。而诸如颜色（color）、字体系列（font-family）、大小（font-size）和列表样式（list-style）等属性通常会继承。

继承的原理对Web开发人员来说非常重要，因为它可以用来编写更为高效和易于维护的样式表。例如，通过给 body 元素设置一个基本的 font-family 和 color ，整个页面的文本默认都会有相同的样式，除非特别指定其他样式。

如何控制继承

在某些情况下，我们需要覆盖继承的样式，或者阻止某些属性的继承。我们可以使用以下方法来控制继承：

inherit 关键字 ：在CSS规则中，我们可以显式地为一个属性指定 inherit 值，让其继承父元素的对应属性值。 css .child-element { color: inherit; }
initial 关键字 ：使用 initial 关键字可以将CSS属性设置为它的默认值。 css .child-element { font-size: initial; }
unset 关键字 ： unset 关键字将属性恢复到它的自然状态，如果是继承属性，它将表现为 inherit ；如果是非继承属性，它将表现为 initial 。 css .child-element { color: unset; }
revert 关键字 ：在大多数情况下， revert 关键字会将属性恢复到浏览器的默认样式，或者用户定义的样式，这取决于CSS属性的来源。 revert 的使用并不普遍，但它提供了一个额外的控制层。

正确使用继承控制可以帮助我们避免不必要的重复样式定义，同时保持样式表的清晰和可维护性。

4.3 实际开发中的应用

解决样式冲突的策略

在实际的Web开发过程中，样式冲突是一个常见的问题，尤其是在大型项目中。为了解决这些冲突，我们可以采取以下策略：

使用CSS预处理器 ：如Sass或Less等，它们提供更高级的特性，如嵌套规则、混合（mixins）和变量，可以帮助开发者更好地组织样式表，并减少重复代码。
组件化设计 ：将页面分解为多个可重用的组件，并为每个组件编写独立的样式表。这样可以确保样式的局部性，减少样式的全局冲突。
使用 !important 的合理安排 ：虽然 !important 通常被认为是不好的做法，但在某些复杂的情况下，使用它可以打破继承的局限。关键是使用得当，比如在特定组件内部解决样式冲突。
遵循特定的样式指南 ：采用一套一致的命名约定和样式指南，可以帮助开发者在编写代码时保持一致性，从而避免潜在的冲突。

优化CSS代码的实践技巧

为了写出可维护和高效的CSS代码，以下是几种实践技巧：

使用简写属性 ：当多个相关属性需要设置时，使用简写属性（如 margin , padding , font 等）能够减少代码量，并保持属性值的一致性。
避免不必要的CSS ：定期清理和审查CSS代码，移除未使用的样式规则，可以提高加载性能。
使用CSS选择器优化 ：使用更具体的选择器，或者减少使用过于广泛的选择器，可以提高样式的应用效率。
使用CSS预处理器的优势 ：利用Sass或Less的特性可以减少代码重复，提高样式表的可读性和可维护性。
压缩和合并CSS文件 ：在生产环境中，压缩和合并CSS文件可以减少HTTP请求的数量，并减小文件大小，从而提高页面加载速度。

理解并应用这些策略和技巧，可以帮助开发者在日常工作中编写出更加健壮和高效的CSS代码。

5. 媒体查询应用介绍

媒体查询是CSS3中一个非常强大的特性，它让网页设计者能够根据不同的媒体类型或设备特性来应用不同的样式规则。在本章中，我们将深入探讨媒体查询的基础知识，响应式设计的基本原理以及媒体查询的高级应用技巧。

5.1 媒体查询基础

5.1.1 媒体查询的语法

媒体查询允许我们定义CSS规则，这些规则只有在某些特定条件满足时才会应用。这些条件包括屏幕大小、分辨率、视口宽度以及其他媒体特性。媒体查询的语法十分简洁，通常情况下，基本形式如下：

@media (media-feature-name: value) {
    /* CSS rules go here */
}

例如，要为屏幕宽度小于600像素的设备设置背景色，可以写成：

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

5.1.2 常用媒体类型和特性

媒体查询支持多种媒体类型，如 screen （主要用于屏幕设备）、 print （主要用于打印预览）、 speech （用于屏幕阅读器等），以及布尔型的 all （适用于所有设备）。

在媒体特性方面，我们可以使用诸如 width 、 height 、 orientation （横屏还是竖屏）、 resolution （分辨率）等参数来定义媒体查询条件。以下是一些常用媒体特性的示例：

@media (min-width: 768px) and (max-width: 1023px) {
    /* 应用于中等屏幕尺寸的样式 */
}

@media screen and (orientation: portrait) {
    /* 针对竖屏模式的样式 */
}

5.2 响应式设计原理

5.2.1 设备无关像素的理解

在讨论响应式设计时，一个核心的概念是“设备无关像素”。这种像素允许网页在不同设备上以相同的视觉尺寸呈现。例如，一个设备的物理像素密度越高，CSS中的1像素可能代表更多的设备像素。

5.2.2 响应式布局的基本概念

响应式布局是一种网页设计方法，旨在通过适配不同的屏幕尺寸和设备能力来提供最佳的用户体验。它通常包括了流式布局、灵活的图片、媒体查询等技术的使用。

一个常见的响应式设计方法是“移动优先”策略，即先为移动设备设计布局，然后通过媒体查询来增强更大的屏幕尺寸的样式表现。

5.3 媒体查询的高级应用

5.3.1 媒体查询在布局中的应用

在实际项目中，媒体查询可以用来为不同的设备创建专门的布局。例如，可以为小屏幕设备隐藏侧边栏，而在大屏幕设备中显示：

@media (min-width: 769px) {
    #sidebar {
        display: block;
    }
}

@media (max-width: 768px) {
    #sidebar {
        display: none;
    }
}

5.3.2 媒体特性在实际项目中的运用案例

在项目开发中，媒体特性可以用来定义不同的视觉和布局规则，确保页面在各种条件下都能有良好的展现。举个例子，根据设备的分辨率不同，可以调整图片的大小以适应屏幕：

@media (min-resolution: 1.5dppx) {
    img {
        width: 50%;
        height: auto;
    }
}

此外，媒体查询还可以与CSS Grid或Flexbox布局技术结合，打造更加灵活和复杂的响应式网页布局。

在下一章中，我们将深入学习CSS2.0布局技术，以及如何解决实际开发中遇到的兼容性问题。

本文还有配套的精品资源，点击获取