CSS 简介

CSS简介

CSS（Cascading Style Sheets）是一种用于样式表的语言，可以用来描述HTML和XML等标记语言的外观和格式。CSS文件通常以 .css 文件扩展名命名，声明CSS样式后，浏览器将自动应用该样式。

CSS代码包含两个主要部分：选择器和声明块。选择器指定要应用样式的元素，声明块则指定该元素的样式属性和值。下面是一个基本的CSS样式定义：

h1 {
  color: red;
  font-size: 32px;
  text-align: center;
}

选择器指定了要应用样式规则的元素，本例中是h1。然后，声明块包含一个或多个属性-值对，指定将要应用的样式。

选择器允许开发人员选定要应用样式的HTML元素。例如，将以下样式应用于所有h1元素：

h1 {
  color: red;
}

选择器可以更细化，例如只对ID为“main”的元素应用样式，使用“#”作为前缀：

#main {
  background-color: blue;
}

还可以使用类选择器，以“.”作为前缀，应用于具有指定类的所有元素：

.my-class {
  font-weight: bold;
}

声明块包含一个或多个属性-值对，指定将应用的样式。每个属性都有一个值，它们共同决定如何显示元素。例如：

h1 {
  color: red;
  font-size: 32px;
  text-align: center;
}

包含三个属性-值对，指定应用红色文字，32像素字体大小，居中对齐。

继承是指一个元素会继承其父元素的某些样式属性。某些属性是不可继承的，例如背景颜色（background-color）。例如，假设我们定义一个样式表，将所有段落文字定义为黑色：

p {
  color: black;
}

如果我们将一个ID为“footer”的元素定义为段落的父元素，并为其制定一个红色背景：

#footer {
  background-color: red;
}

则应用后将会看到带有红色背景的段落。继承使得在多个元素之间更容易维护和共享样式。

“级联”指的是当两个或更多样式规则适用于同一元素时，决策将采用哪个规则。级联规则基于三个因素：顺序，优先级和特异性。

顺序指的是样式规则表现在源代码中的位置，并且后面的规则通常具有更高的优先级。优先级基于特定的选择器类型，例如ID选择器具有比普通选择器更高的优先级。特异性则基于特定规则的选择器数量和组成。

例如，考虑以下样式表：

p {
  color: black;
}
#footer p {
  color: red;
}

假设我们有以下HTML：

<div id="footer">
  <p>Hello, world!</p>
</div>

此时“Hello, world！”将会显示红色字体，因为 ID 选择器的特定性和样式表的顺序决定了其优先级。

CSS是一种强大的语言，可用于使HTML和XML网页更具表现力和功能性。它允许开发人员指定其网站的外观和格式，从而实现个性化。熟练掌握选择器、声明块、继承和级联等概念，并可帮助开发人员在编写样式时优化CSS。