CSS 基础 - CSS

CSS (层叠样式表) 是用来定义 HTML 页面样式的语言。本篇介绍 CSS 的基础知识。

语法

CSS 由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，声明块由大括号包围，包含一个或多个属性和值组成。

例如：

p {
  color: red;
}

这条规则指定样式红色的文字颜色，应用于所有的 <p> 元素。

选择器

CSS 的选择器用于定位要被样式化的 html 元素，下面是一些常见的 CSS 选择器。

元素选择器

元素选择器是选择的 HTML 元素名称。

例如：

h1 {
  color: blue;
}

这条规则指定样式蓝色的文字颜色，应用于所有的 <h1> 元素。

类选择器

类选择器用点符号 "." 开头，后面是要选择的类名。

例如：

.error {
  background-color: red;
}

这条规则指定样式的背景颜色为红色，应用于所有带有 class="error" 的元素。

ID 选择器

ID 选择器用井号 "#" 开头，后面是要选择的 ID。

例如：

#page-header {
  font-size: 24px;
}

这条规则指定样式的字体大小为 24 像素，应用于带有 id="page-header" 的元素。

属性选择器

属性选择器允许根据 HTML 元素的属性值选择元素。

例如：

a[target="_blank"] {
  color: green;
}

这条规则指定样式绿色的文字颜色，应用于所有拥有 target="_blank" 属性的链接元素。

子元素选择器

子元素选择器通过在父元素和子元素之间设置一个大于号 ">" 来选择元素。

例如：

ul > li {
  list-style: circle;
}

这条规则指定样式为圆形列表符，应用于所有的 <li> 元素，但只适用于在 <ul> 元素内的子元素。

声明块属性

声明块属性由属性和值组成。属性说明了要应用的样式属性，值是属性的具体设置。

例如：

h1 {
  color: blue;
  font-size: 24px;
}

这条规则指定蓝色的文字颜色和字体大小为 24 像素，应用于所有的 <h1> 元素。

继承

CSS 样式可以被继承。如果一个元素未定义一个属性，但它的父元素定义了这个属性，那么这个元素将继承其父元素的属性。

例如：

body {
  color: black;
}

p {
  font-size: 16px;
}

这条规则指定黑色的文字颜色应用于所有的文本，而 16px 的字体大小应用于所有 <p> 元素。

总结

CSS 是用来定义 HTML 页面样式的语言，选择器和声明块是构成 CSS 规则的基本单位。元素选择器、类选择器、ID 选择器、属性选择器和子元素选择器是常用的选择器。CSS 样式可以被继承。