什么是 CSS？
CSS（Cascading Style Sheets），中文名为层叠样式表，是一种用来描述文档样式和布局的标记语言。它可以为 HTML 文档添加颜色、字体、边框和其他视觉效果，使页面得以更好地呈现。
CSS 启示
正如我们在 HTML 中使用标记来定义文档结构一样，CSS 使用选择器和属性来选择和定义页面的元素样式。选择器用于选择要应用样式的元素，而属性用于定义这些元素的样式。
以下是 CSS 启示的基本语法：
selector {
property1: value1;
property2: value2;
}
其中，selector 是选择器，用于选择要应用样式的元素；property 是属性，用于定义要修改的样式属性的名称；value 是属性的值，用于指定要应用的样式值。
CSS 选择器
CSS 支持多种选择器，这使得我们可以选择不同的元素来应用样式。以下是一些常见的 CSS 选择器：
- 元素选择器：通过元素名称选择元素，例如
p选择所有<p>元素； - 类选择器：通过类名选择元素，例如
.red选择所有类名为red的元素； - ID 选择器：通过 ID 名称选择元素，例如
#header选择 ID 名称为header的元素； - 属性选择器：通过元素的属性选择元素，例如
[type="text"]选择所有属性type值为"text"的元素； - 伪类选择器：通过元素的某种状态选择元素，例如
:hover选择当前鼠标悬停的元素。
CSS 属性
CSS 属性用于指定应用于元素的样式。以下是一些常用的 CSS 属性：
color：用于设置文本的颜色；font-family：用于设置文本的字体系列；font-size：用于设置文本的字体大小；background-color：用于设置元素的背景颜色；border：用于设置元素的边框样式、宽度和颜色。
CSS 注释
CSS 注释用于向代码中添加可读的说明性文字，而不会影响代码的执行。以下是 CSS 注释的语法：
/* 这是一个注释 */
CSS 盒子模型
在 CSS 中，每个元素都被视为一个矩形框，称为盒子。盒子模型定义了元素的尺寸和定位。每个盒子由以下几个组成部分：
- 内容框（content box）: 包含了元素的内容，大小由
width和height属性决定。 - 内边距（padding）: 内边距是在内容框和边框之间的空间。
- 边框（border）: 边框是内容框和外边距之间的装饰性线条。
- 外边距（margin）: 外边距是元素与相邻元素之间的空间。
通过调整这些属性的值，我们可以控制元素的布局和外观。
CSS 盒子模型示例
以下是一个使用 CSS 盒子模型的示例代码：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
这个示例定义了一个类名为 .box 的元素，它的宽度为 200px，高度为 100px，内边距为 20px，边框为 1px 的黑色实线，外边距为 10px。通过这些属性的组合，我们可以创建各种不同的盒子布局。
总结
CSS 是一种用于定义文档样式和布局的标记语言，通过选择器和属性，我们可以选择和定义页面元素的样式。CSS 支持多种选择器和属性，以及盒子模型来控制元素的布局和外观。掌握这些基本的 CSS 语法和概念，可以让我们更好地掌控页面的样式。
