详解CSS3.0(Cascading Style Sheet) 层叠级联样式表

CSS3.0 是一种层叠样式表语言，用来描述 HTML 和 XML（包括各自的语言规范）这类文档的表现。它为HTML文档提供了控制页面样式的方式，使得文档作者和用户能够将样式信息与文档内容分离，提高了文档的可维护性和可重用性。

选择器

选择器指定了一个或多个元素应用样式规则。CSS3.0中的选择器可以选择元素的标签名、类、ID、属性、伪类、伪元素等。以下是一些示例：

/* 选择所有的 <p> 标签 */
p {
  color: red;
}

/* 选择 class 为 'intro' 的元素 */
.intro {
  font-size: 20px;
}

/* 选择 ID 为 'demo' 的元素 */
#demo {
  background-color: yellow;
}

/* 选择带有 title 属性为 '提示' 的元素 */
*[title="提示"] {
  border: 1px solid black;
}

/* 选择第一个 <p> 标签 */
p:first-child {
  font-weight: bold;
}

/* 选择每个 <p> 标签的第一个字母 */
p::first-letter {
  font-size: 1.2em;
}

样式规则

样式规则表示了一个或多个选择器应用的样式，由属性和属性值组成。以下是一些示例：

/* 设置元素的文本颜色 */
color: red;

/* 设置元素的背景颜色 */
background-color: yellow;

/* 设置元素的字体大小 */
font-size: 16px;

/* 设置元素的上、右、下、左边距 */
margin: 10px 20px 30px 40px;

/* 隐藏元素 */
display: none;

/* 设置元素为绝对定位 */
position: absolute;

/* 设置元素的宽度和高度 */
width: 100px;
height: 200px;

层叠

当有多个选择器应用到同一个元素上时，它们的样式会叠加在一起。层叠的顺序由以下规则决定：

1. 样式声明的重要性。可以通过 !important 标记规定某个声明的重要性。
2. 根据样式表中的顺序，后面的样式优先于前面的样式。
3. 根据选择器的特殊性。特殊性的计算规则为：每个 ID 选择器 +100，每个类、属性、伪类选择器 +10，每个元素、伪元素选择器 +1。计算特殊性时，只考虑选择器的种类，不考虑选择器的数量。
4. 根据来源。如果一个样式来自外部样式表，则比来自内部样式表的样式优先级高。如果一个样式来自 style 属性，则比其它两种样式优先级高。

继承

有些样式可以继承，子元素会继承其父元素的样式。例如，字体样式、颜色、行高等都可以继承。以下是一些示例：

/* 继承父元素的字体颜色 */
color: inherit;

/* 继承父元素的字体大小 */
font-size: inherit;

/* 设置需要继承的样式 */
font: inherit;

/* 设置元素的行高为 1.5 倍 */
line-height: 1.5;

示例说明

示例一：透明度

以下 CSS3.0 样式规则设置了所有 <div> 元素的背景颜色为红色，透明度为 0.5：

div {
  background-color: rgba(255, 0, 0, 0.5);
}

其中，rgba() 函数可以设置颜色和透明度，第四个参数表示透明度，值范围为 0-1。

示例二：渐变背景色

以下 CSS3.0 样式规则设置了所有 <button> 元素的背景颜色为渐变色：

button {
  background: linear-gradient(to right, #ff0000, #0000ff);
}

其中，linear-gradient() 函数可以设置线性渐变背景色，第一个参数规定了渐变的方向，第二个参数以后的参数是颜色值。在上面的例子中，to right 指定了方向为从左到右，#ff0000 和 #0000ff 分别表示起始和结束颜色。