基础CSS表

CSS（层叠样式表）是一种用于描述网页样式的语言。HTML用于定义网页的结构，而CSS用于控制网页的外观，例如字体、颜色、布局等。

本文将介绍基础的CSS知识，包括选择器、属性、值等。

选择器

选择器是用于选择HTML元素并应用样式的一种方式。以下是常见的选择器：

• 标签选择器：通过HTML标签选择元素，如p选择所有<p>元素。
• 类选择器：通过class属性选择元素，如.box选择所有class属性为box的元素。
• ID选择器：通过id属性选择元素，如#header选择id属性为header的元素。
• 属性选择器：选择有指定属性的元素，如[href]选择所有有href属性的元素。
• 伪类选择器：选择元素的特殊状态，如:hover选择鼠标指针指向元素时的状态。

属性

CSS属性是用于控制HTML元素样式的属性。以下是常见的CSS属性：

• color：控制文本颜色，如color: red;将文本颜色设置为红色。
• font-size：控制字体大小，如font-size: 16px;将字体大小设置为16像素。
• background-color：控制背景颜色，如background-color: yellow;将背景颜色设置为黄色。
• border：控制边框样式，如border: 1px solid black;将边框设置为1像素宽的黑色实线。
• text-align：控制文本对齐方式，如text-align: center;将文本水平居中对齐。
• margin：控制元素外边距，如margin: 10px;将四周外边距都设置为10像素。
• padding：控制元素内边距，如padding: 5px;将四周内边距都设置为5像素。

值

CSS属性的值是用于控制样式的数值或字符串。以下是常见的CSS值：

• 颜色值：用于控制颜色的值，如red、#FF0000、rgb(255,0,0)。
• 长度值：用于控制长度的值，如12px、50%、5em。
• 字符串：用于控制文本的字符串，如"Helvetica Neue"、inherit（继承父元素的值）。

示例代码

以下是一个CSS表的示例代码，其中使用了多种选择器、属性和值：

p {
  color: blue;
  font-size: 16px;
}

.box {
  background-color: yellow;
  border: 1px solid black;
  text-align: center;
}

#header {
  font-size: 24px;
}

a[href] {
  color: red;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-family: "Helvetica Neue", sans-serif;
  margin: 10px;
  padding: 5px;
}

以上代码中，通过标签选择器选择所有<p>元素并设置文本颜色为蓝色、字体大小为16像素。通过类选择器选择所有class属性为box的元素并设置背景颜色为黄色、边框为1像素宽的黑色实线、水平居中对齐。通过ID选择器选择id属性为header的元素并设置字体大小为24像素。通过属性选择器选择有href属性的<a>元素并设置文本颜色为红色。通过伪类选择器选择鼠标指针指向<a>元素时的状态并设置文本下划线。通过群组选择器选择所有<h1>、<h2>和<h3>元素并设置字体为“Helvetica Neue”、外边距为10像素、内边距为5像素。