基础 CSS 标签

在网页页面中，CSS（Cascading Style Sheets） 标签用于指定如何展示 HTML 元素。CSS 可以控制页面的布局、颜色、字体等方面。本文将介绍一些基础的 CSS 标签供程序员参考。

1. 选择器

在 CSS 中，我们使用选择器来选取我们想要样式化的 HTML 元素。常见的选择器有：

• 标签选择器：选取某个 HTML 标签，并为该标签定义样式。例如 p {...} 表示选取页面中所有的 <p> 标签，并设置样式。
• ID 选择器：选取具有特定 ID 属性的 HTML 元素。例如 #my-id {...} 表示选取 ID 属性为 "my-id" 的元素，并设置样式。
• 类选择器：选取具有特定类的 HTML 元素。例如 .my-class {...} 表示选取所有类属性为 "my-class" 的元素，并设置样式。
• 子元素选择器：选取某个元素的子元素，并设置样式。例如 .parent > .child {...} 表示选取类属性为 "parent" 的元素下第一级子元素中的类属性为 "child" 的元素，并设置样式。

2. 字体样式

在 CSS 中，我们可以使用以下标签来设置字体样式：

• font-family：设置文本的字体系列
• font-size：设置文本的字体大小
• color：设置文本的颜色
• font-weight：设置文本的粗细程度，可选值有 normal、bold、bolder、lighter 或数值（100、200、...、900）

以设置一个段落的字体样式为例：

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: normal;
}

3. 边框和背景

在 CSS 中，我们可以使用以下标签来设置边框和背景：

• border：设置元素的边框大小、样式和颜色。例如 border: 1px solid #333; 表示设置边框为 1px 粗，实线样式，颜色为 #333。
• background-color：设置元素的背景颜色。例如 background-color: #fff; 表示设置背景颜色为白色。
• background-image：设置元素的背景图片。例如 background-image: url('image.png'); 表示设置背景图片为 image.png。

以设置一个带边框和背景色的 div 为例：

div {
  border: 1px solid #333;
  background-color: #eee;
}

4. 布局

在 CSS 中，我们可以使用以下标签来设置元素的布局：

• display：设置元素的显示类型。例如 display: block; 表示元素呈块状显示，而 display: inline; 表示元素呈行内显示。
• margin：设置元素的外边距，用于控制元素与其他元素之间的距离。
• padding：设置元素的内边距，用于控制元素内部内容与元素边界之间的距离。

以设置一个居中显示的 div 为例：

div {
  display: block;
  margin: auto;
  width: 50%;
  padding: 20px;
}

以上就是一些基础的 CSS 标签介绍，还有更多强大的 CSS 标签等待你去探索。