CSS——层叠样式表

CSS，全称为层叠样式表(Cascading Style Sheets)，是一种用于网页美化的样式表语言。CSS可以将结构和样式分离，通过为HTML文档添加样式，实现对网页的美化与布局控制。

基础语法

CSS语法采用"键值对"的形式，其中"键"称为属性(property)，"值"称为属性值(value)，两者用冒号(:)隔开，多个属性用分号(;）隔开。

selector {
  property: value;
  property: value;
  ...
}

其中，selector为选择器，用于在HTML中选择特定的标签元素。比如选择所有段落p元素，可以使用选择器p。

下面是一个简单的CSS实例，该样式表定义了p元素字体颜色为红色，背景颜色为黄色。当用该样式表修饰p元素时，文本颜色将变为红色，背景颜色将变为黄色。

p {
  color: red;
  background-color: yellow;
}

选择器

CSS选择器用于选中文档中的特定元素。下面介绍几种常见的选择器。

类选择器

类选择器以点号(.)开头，用于选择拥有相同类名的所有元素。比如，定义样式表.red：

.red {
  color: red;
}

然后在HTML文档中的任意元素上标注red类，就能使该元素字体颜色变为红色：

<p class="red">这是一段红色文本</p>

ID选择器

ID选择器以井号(#)开头，用于选择唯一的元素。比如，定义样式表#header：

#header {
  background-color: gray;
}

然后在HTML文档中的header元素上标注id属性来匹配：

<header id="header">这是header</header>

元素选择器

元素选择器用于选中指定元素，比如选中所有段落元素：

p {
  color: blue;
}

属性选择器

属性选择器用于选中具有指定属性的元素，比如所有带有title属性的元素：

[title] {
  font-weight: bold;
}

伪类选择器

伪类选择器用于匹配不在文档树中的元素，比如匹配链接的鼠标悬停状态：

a:hover {
  color: red;
}

盒子模型

盒子模型是CSS布局的基本概念。每个HTML元素都可以看作是一个矩形的盒子，该盒子由四个边界组成：上边界，下边界，左边界和右边界。四条边界上分别有内容区、内边距、边框、外边距四个区域。

• 内容区：元素实际包含文本和其他子元素的区域。
• 内边距(padding)：元素内边界和内容之间的区域。
• 边框(border)：元素的边框，距离内边距和外边距有一定距离。
• 外边距(margin)：元素的外部边框，和相邻元素之间的距离。

下方是一个HTML元素的盒子模型示意图：

布局

CSS可以用来布局HTML页面。其中，通过盒子模型的四个区域来定义页面布局。

float属性

float属性用于实现元素的左浮动或右浮动。左浮动的元素会尽可能地靠左排列，右浮动的元素会尽可能地靠右排列。示例代码：

.float-left {
  float: left;
}
.float-right {
  float: right;
}

position属性

position属性用于定义元素的定位方式。常用的值包括：

• static：默认值，元素按照页面流排列。
• relative：元素的位置基于自身位置进行定位，可以通过top、bottom、left、right属性进行调整。
• absolute：元素的位置基于离它最近的一个定位上下文进行定位，如果没有定位上下文，则基于文档的初始包含块进行定位。
• fixed：元素的位置相对于视口固定。

.position-relative {
  position: relative;
  top: 10px;
  left: 10px;
}

display属性

display属性用于定义元素的显示方式，常用的值包括：

• block：元素在页面上占据一行且充满整个父容器的宽度。
• inline：元素在行内显示，以内容为基准排列。
• inline-block：元素以块级元素的方式排列，且允许在内部嵌入其他行内元素。
• none：元素不在页面上显示。

.div-block {
  display: block;
}
.span-inline {
  display: inline;
}

总结

CSS虽然只是一种样式表语言，但它对于网页的美化与布局控制至关重要。掌握基本的CSS语法和常用的选择器以及盒子模型和布局属性，能够让开发者更好地实现网页美化并掌控网页布局。