CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等）文档样式的样式表语言。CSS描述了如何将结构化文档（如HTML文档或XML应用）呈现为网页、桌面应用程序或其他类型的用户界面。
CSS使用选择器来“选择”HTML元素，并指定这些元素应具有的样式。选择器可以是元素名、类名、ID、属性等。CSS样式规则由选择器和一组属性值组成。属性值可以是预定义的关键字（如auto、none、block等），也可以是数字（如像素值、百分比等），还可以是颜色值（如RRGGBB、rgb等）。
1. 选择器：选择器用于选择要样式化的HTML元素。例如，`h1` 选择器会选择所有的``元素，`.myclass` 选择器会选择所有具有`class=myclass`的元素。
2. 属性：属性是CSS样式的组成部分，用于指定元素的样式。例如，`color` 属性用于设置文本颜色，`fontsize` 属性用于设置字体大小。
3. 值：值是属性的具体取值，可以是关键字、数字、颜色值等。例如，`color: red;` 中的`red`是一个颜色值。
4. 声明：声明是由属性和值组成的，用于描述一个元素的样式。例如，`color: red; fontsize: 16px;` 是一个声明，它设置了文本颜色为红色，字体大小为16像素。
5. 规则集：规则集由选择器和声明组成，用于描述一组元素的样式。例如，`.myclass { color: red; fontsize: 16px; }` 是一个规则集，它选择了所有具有`class=myclass`的元素，并设置了它们的文本颜色为红色，字体大小为16像素。
6. 层叠：CSS的层叠规则决定了当多个规则应用于同一个元素时，哪个规则会生效。层叠规则包括优先级、特定性、源顺序等。
7. 继承：CSS的继承规则允许子元素继承父元素的样式。例如，如果父元素设置了`color: red;`，那么它的所有子元素也会继承这个颜色值。
8. 盒模型：CSS的盒模型描述了元素在页面上的布局方式。每个元素都包含内容、内边距、边框和外边距。
9. 媒体查询：媒体查询允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式规则。
10. 伪类和伪元素：伪类和伪元素用于选择特定的元素状态或内容。例如，`:hover` 伪类选择鼠标悬停时的元素，`::firstletter` 伪元素选择元素的第一个字母。
CSS是一种强大的工具，可以用来创建美观、可访问和响应式的网页。通过掌握CSS的基本概念和技巧，可以创建出令人印象深刻的网页设计。
深入浅出CSS：前端开发者的必备技能
一、CSS简介
CSS，即层叠样式表（Cascading Style Sheets），是用于描述HTML或XML文档样式的样式表语言。它允许开发者将文档的结构与其表现（如字体、颜色、布局等）分离，从而实现更加灵活和高效的前端开发。
二、CSS的基本语法
CSS的基本语法由选择器、属性和值组成。以下是一个简单的CSS示例：
/ 选择器 /
p {
/ 属性 /
color: red; / 值 /
font-size: 16px;
在这个例子中，选择器“p”表示所有段落元素，属性“color”和“font-size”分别用于设置文本颜色和字体大小，值“red”和“16px”分别表示红色和16像素。
三、CSS选择器
类选择器：使用`.`开头，如`.class-name`。
id选择器：使用``开头，如`id-name`。
后代选择器：使用空格分隔，如`.parent > .child`。
子选择器：使用`>`，如`.parent > .child`。
相邻兄弟选择器：使用` `，如`.prev .next`。
通用选择器：使用``，如``。
四、CSS属性
颜色：`color`、`background-color`等。
字体：`font-family`、`font-size`、`font-weight`等。
布局：`margin`、`padding`、`width`、`height`、`float`等。
定位：`position`、`top`、`left`、`right`、`bottom`等。
盒子模型：`border`、`border-width`、`border-style`、`border-color`等。
文本：`text-align`、`line-height`、`text-decoration`等。
其他：`cursor`、`opacity`、`z-index`等。
五、CSS伪类和伪元素
伪类：
`:hover`：鼠标悬停时触发。
`:active`：鼠标点击时触发。
`:focus`：元素获得焦点时触发。
`:visited`：元素被访问过时触发。
`:link`：元素未被访问时触发。
伪元素：
`::before`：在元素内容之前插入内容。
`::after`：在元素内容之后插入内容。
六、CSS预处理器
// Sass
color: red;
font-size: 16px;
// Less
color: red;
font-size: 16px;
// Stylus
color: red;
font-size: 16px;
使用CSS预处理器可以方便地实现变量
