企业官网建设流程全解析

• 文档
• 教程

本篇指南以仓库中的波斯语译本 fa/css.md为主体骨架，并对照其英文原版 css.md进行扩充，系统讲解 CSS 的核心语法：从基本选择器、属性选择器、关系组合器、伪类，到单位、颜色、字体与背景，再到三种引入方式、层叠优先级（Cascade）与 CSS3 进阶特性（媒体查询、变量、Flexbox）。阅读本文后，你将能够独立读懂并编写一套结构完整、优先级可控、可适配多设备的 CSS 样式表。

文档与项目背景

Learn X in Y minutes 项目的核心理念是"把代码写成文档"（Code documentation written as code）：每一门语言或技术都整理成一份带有详细注释、可直接运行的代码教程。仓库中的fa/目录存放波斯语（Farsi）翻译，fa/css.md 即是由英文原版 css.md 翻译而来的波斯语 CSS 教程，其 frontmatter 中同时记录了contributors（原作者）与translators（译者）信息。根据 CONTRIBUTING.md 的规范，非英文文档需要额外声明translators字段，而仓库的 lint/frontmatter.py 脚本会校验这些 YAML 元数据的键名与类型是否合法——这正是该项目保证每篇文档格式一致性的工程手段。

本文档的立足版本是CSS 2.0：它虽然不是最新版本，但拥有最广泛、最稳定的浏览器支持；同时文中也标注了大量CSS 3扩展特性（如^=、$=、~=属性选择器、视口单位、rgba/hsl颜色、媒体查询等）。由于 CSS 的最终效果是可视化的，文档建议读者在在线 CSS 练习场中亲手实验每个示例，本文则聚焦语法本身与通用要点。

CSS 核心思想：内容与表现分离

在 Web 发展早期，页面几乎没有任何视觉元素，内容只是纯文本；随着浏览器能力的演进，完全可视化的页面逐渐普及。CSS（Cascading Style Sheets，层叠样式表）正是为此诞生的标准语言，它存在的根本目的是保持内容（HTML）与表现（外观、感觉）之间的分离。

• HTML 负责定义页面的内容结构；
• CSS 负责定义页面的外观呈现。

CSS 代码由静态的"规则"（rule）组成：每条规则通过一个或多个选择器（selector）锁定页面元素，并为一系列视觉属性（property）赋予具体值（value），最终这些属性被应用到选择器所指的页面元素上。

基本语法与注释

CSS 的指令结构非常简洁，一条规则的基本形态为：

selector { property: value; /* more properties...*/ }

注释是 CSS 中唯一被允许的注释形式，CSS没有类似 C 语言的单行注释//，所有注释都必须写在/* ... */之间，且可以跨越多行：

/* comments appear inside slash-asterisk, just like this line! there are no "one-line comments"; this is the only comment style */

选择器：精确锁定页面元素

假设页面中存在如下元素，后续选择器示例均以它为目标：

<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />

基础选择器：通配、类、ID 与元素

使用*（通配符）可以为页面上所有元素定义样式：

* { color:red; }

按类名（class）选择：

.some-class { }

同时命中两个类名（元素必须同时拥有这两个类）：

.some-class.class2 { }

按 ID 选择：

#someId { }

按元素名（标签名）选择：

div { }

属性选择器及其 CSS3 变体

按元素是否拥有某属性选择：

[attr] { font-size:smaller; }

按属性值精确匹配选择：

[attr='value'] { font-size:smaller; }

按属性值以某字符串开头选择（CSS3）：

[attr^='val'] { font-size:smaller; }

按属性值以某字符串结尾选择（CSS3）：

[attr$='ue'] { font-size:smaller; }

按属性值包含某子串选择（CSS3）：

[attr*='foo'] { }

按属性值处于空格分隔的列表中选择（CSS3），例如otherAttr='en-us foo bar'中的foo或bar：

[otherAttr~='foo'] { } [otherAttr~='bar'] { }

按属性值处于连字符分隔的列表中选择（CSS3），例如otherAttr|='en'可命中en、en-us这类取值：

[otherAttr|='en'] { font-size:smaller; }

组合选择器：多种条件叠加

可以将不同选择器组合成更精确的目标。关键提醒：组合时不要添加任何空格，否则语义会完全改变（空格代表"后代"，见下文关系组合器）：

div.some-class[attr$='ue'] { }

关系组合器：基于 DOM 结构选择

子组合器>：选择某个元素的直接子元素。下面规则选中所有类名为.class-name、且其父元素满足div.some-parent的元素：

div.some-parent > .class-name {}

后代组合器（空格）：选择某个元素内部任意深度的后代元素。子元素是仅隔一层的直接后代，后代可以是树中任意层级：

div.some-parent .class-name {}

注意此处的空格至关重要，它与上文"无空格的组合选择器"含义完全不同：

div.some-parent.class-name {}

相邻兄弟组合器+：选择紧跟在某元素之后、且具有同一父元素的兄弟元素。下面规则选中所有类名为.this-element、且紧邻位于.i-am-before之后的元素：

.i-am-before + .this-element { }

通用兄弟组合器~：选择某元素之后的所有兄弟元素，它们不必紧邻，但必须共享同一个父元素：

.i-am-any-before ~ .this-element {}

伪类与伪元素：按状态与虚拟节点选择

伪类（pseudo-class）允许你仅在元素处于特定状态时选中它：

鼠标悬停在元素上方时：

selector:hover {}

链接已被访问过时：

selector:visited {}

链接尚未被访问时：

selector:link {}

输入元素获得焦点时：

selector:focus {}

链接被点击的瞬间（激活态）：

selector:active {}

实践要点：与链接相关的伪类（:link、:visited、:hover、:active）应当按上述顺序书写（即 LVHA 顺序），否则样式可能无法按预期生效。

进一步扩展的伪类与伪元素（英文原版补充）：

/* 父元素的第一个子元素 */ selector:first-child {} /* 父元素的最后一个子元素 */ selector:last-child {} /* 父元素的第 n 个子元素（CSS3） */ selector:nth-child(n) { } /* 伪元素：匹配选中元素的虚拟首个子节点 */ selector::before {} /* 伪元素：匹配选中元素的虚拟末个子节点 */ selector::after {} /* 通配符的更多用法 */ * { } /* 所有元素 */ .parent * { } /* 所有后代 */ .parent > * { }/* 所有直接子元素 */ /* 分组：一次为多个选择器定义相同样式 */ selector1, selector2 { } /* 否定伪类（CSS3）：选中不具备某状态的元素，如没有 id 属性的 div */ div:not([id]) { background-color: red; }

取值：单位与颜色

长度单位：相对与绝对

长度单位可分为相对单位与绝对单位两类。

相对单位（随父元素、根元素或视口变化）：

width: 50%; /* 父元素宽度的百分比 */ font-size: 2em; /* 元素原始 font-size 的倍数，即当前字体大小的两倍 */ font-size: 2rem; /* 根元素（html）font-size 的倍数 */ font-size: 2vw; /* 视口宽度的 1% 的倍数（CSS3） */ font-size: 2vh; /* 视口高度的 1% 的倍数（CSS3） */ font-size: 2vmin; /* vh 与 vw 中较小者的倍数（CSS3） */ font-size: 2vmax; /* vh 与 vw 中较大者的倍数（CSS3） */

绝对单位（固定尺寸）：

width: 200px; /* 像素 */ font-size: 20pt; /* 磅（points） */ width: 5cm; /* 厘米 */ min-width: 50mm; /* 毫米 */ max-width: 5in; /* 英寸；注意 max-(width|height) 的配合用法 */

颜色表示法

CSS 提供了多种等效的颜色写法：

background-color: #F6E; /* 短十六进制，等价于 #FF66EE */ background-color: #F262E2; /* 长十六进制 */ background-color: tomato; /* 颜色名称 */ background-color: rgb(255, 255, 255); /* rgb 数值 */ background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */ background-color: rgba(255, 0, 0, 0.3); /* rgba，末尾为透明度，0 <= a <= 1（CSS3） */ background-color: transparent; /* 完全透明，等价于 alpha 为 0 */ background-color: hsl(0, 100%, 50%); /* hsl 色相-饱和度-明度（CSS3） */ background-color: hsla(0, 100%, 50%, 0.3); /* hsla，可在末尾指定透明度（CSS3） */

背景图与字体

使用图片作为元素背景，url()中的引号可省略：

background-image: url(/path-to-image/image.jpg);

字体族设置与回退链：浏览器优先使用第一个字体，若找不到则依次尝试后续字体：

font-family: Arial; font-family: "Courier New"; /* 字体名含空格时必须加引号 */ font-family: "Courier New", Trebuchet, Arial, sans-serif;

边框（英文原版补充）

border-width: 5px; border-style: solid; border-color: red; /* 设置方式与 background-color 类似 */ border: 5px solid red; /* 以上三者的简写 */ border-radius: 20px; /* 圆角，CSS3 属性 */

使用方式：三种引入 CSS 的方法

将全部 CSS 指令保存为后缀为.css的样式表文件，然后在 HTML 的head部分引入：

<link rel='stylesheet' type='text/css' href='path/to/style.css' />

这是推荐的做法。也可以使用style标签在head内以内嵌方式书写 CSS，但应尽量避免：

<style> a { color: purple; } </style>

还可以把 CSS 指令作为元素的style属性直接书写，这是最不推荐的方式（内联样式会带来最高的层叠优先级，难以覆盖）：

<div style="border: 1px solid red;"> </div>

层叠与优先级（Precedence / Cascade）

一个元素可能被多个选择器同时命中，同一属性也可能被多次设置；此时必然有一条规则胜出。更具体（更精确）的选择器优先于较不具体的规则，且样式表中后出现的规则覆盖先出现的规则（若两个不同样式表包含针对同一元素且特异性相同的规则，则链接顺序靠后的样式表生效）。这一过程被称为"层叠"（cascading），这也是"层叠样式表"（Cascading Style Sheets）名称的由来。

一个完整的优先级判定实例

给定如下 CSS：

/* A */ p.class1[attr='value'] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { property: value !important; }

以及如下标记：

<p style='/*F*/ property:value;' class='class1 class2' attr='value'> </p>

优先级从高到低依次为：

1. E 最高，因为它使用了关键字!important。文档建议尽量避免使用它，除非确有必要；
2. F 次之，因为它是内联样式（inline style）；
3. A 再次之，因为它比其它任何规则都更"具体"——它包含 3 个限定符：元素名p、类名class1、属性attr='value'；
4. C 随后，它虽然与 B 的特异性相同，但在样式表中位于 B 之后，故优先于 B；
5. B 其次；
6. D 最后，它是特异性最低的元素选择器。

重要提醒：以上优先级是针对每一条属性而言的，而不是针对整个规则块。也就是说，一条规则中某个属性胜出，不代表该规则中的其它属性也必然胜出。

CSS3 进阶特性（英文原版补充）

媒体查询（Media Queries）

媒体查询是 CSS3 特性，用于指定某些规则在特定条件下生效——例如打印时，或屏幕达到特定尺寸/像素密度时。媒体查询不会增加选择器的特异性。

/* 对所有设备生效的基础规则 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印时改为省墨配色 */ @media print { h1 { color: black; background-color: white; } } /* 屏幕宽度至少 480px 时放大字体 */ @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } }

媒体查询可用的特性包括：width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、resolution、scan、grid，其中大部分可用min-或max-前缀修饰。resolution特性在老设备上不受支持，可改用device-pixel-ratio。

此外，许多智能手机和平板在未提供viewport元标签时，会尝试按桌面端渲染页面：

<head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head>

自定义属性（变量）与 calc() 计算

CSS3 支持用--前缀声明自定义属性（变量），并通过var()引用：

:root { --main-bg-color: whitesmoke; } body { background-color: var(--main-bg-color) }

也支持使用calc()进行长度计算：

body { width: calc(100vw - 100px) }

规则嵌套与 Flexbox 弹性布局

CSS3 支持在样式规则内部继续嵌套子规则（配合&引用当前选择器）：

.main { .bgred { /* 等价于 .main .bgred { } */ background: red; } & .bggreen { /* 等价于 .main .bggreen { } */ background: green; } &.bgblue { /* 无空格，等价于 .main.bgblue { } */ background: blue; } }

Flexbox 可便捷地实现响应式布局：

.container { display: flex; flex-direction: row; /* 弹性项目的排列方向 */ flex-wrap: wrap; /* 弹性项目是否换行 */ justify-content: center; /* 水平方向的对齐方式 */ align-items: center; /* 垂直方向的对齐方式 */ }

兼容性检查

CSS 2 的大部分特性（以及越来越多 CSS 3 特性）在所有浏览器和设备上都是可用的。但在引入新特性之前，始终应当核对目标浏览器的兼容性，这是必备的良好实践：

• CanIUse：提供详细的特性兼容性查询；
• QuirksMode CSS：经典的兼容性与实现差异参考资料；
• Mozilla Developer Network（MDN）的 CSS 文档：提供完整的教程与参考。

仓库内延伸阅读

• 英文原版 CSS 文档：本文档的权威原始版本，包含更完整的注释与 CSS3 示例；
• 波斯语 HTML 教程 fa/html.md：与 CSS 配套的内容标记语言，HTML 定义结构、CSS 定义外观；
• CONTRIBUTING.md：了解本文档 frontmatter（contributors、translators等字段）的书写规范；
• lint/frontmatter.py：仓库用于校验文档 YAML 元数据的工程化脚本，可借此理解项目如何保证多语言文档格式的一致性。

• 文档
• 教程