企业官网建设流程全解析

• 文档
• 教程

本文基于 learnxinyminutes-docs 仓库中的土耳其语 CSS 教程 tr/css.md 及其英文原版 css.md，系统梳理 CSS 的规则结构、各类选择器、属性与取值、三种引入方式、层叠优先级与媒体查询，帮助读者在最短时间内建立一套可上手实战的 CSS 知识框架。读完本文，你将能够读懂任意样式表的结构、精准定位页面元素、理解样式冲突时的裁决规则，并写出适配打印与不同屏幕尺寸的响应式规则。

文档背景：一份"代码即教程"的 CSS 快速入门

learnxinyminutes-docs 仓库的核心理念在 README.md 中描述为 "Whirlwind tours of popular programming languages, presented as valid, commented code"——即用"本身就是合法代码、边写边注释"的方式讲解语言与工具。CSS 教程正是这一风格的典型代表：整篇教程由一段完整可运行的样式代码骨架、配套 HTML 示例与逐行注释构成。

• 英文原版位于仓库根目录 css.md，是本系列 CSS 教程的权威版本；
• 土耳其语译本位于 tr/css.md，与英文原版保持同一结构，并新增了译者信息；
• 仓库中还存在 cs/css.md、de/css.md、es/css.md、fr/css.md、ja/css.md、ru/css.md 等多个语言译本，可作为对照学习材料。

每份教程文件头部都带有 YAML frontmatter，例如 tr/css.md 中声明了contributors（贡献者）与translators（译者）字段。仓库的 lint/frontmatter.py 脚本会对所有 Markdown 文档的 frontmatter 做校验，允许的键为：name、where_x_eq_name、category、filename、contributors、translators（其中 contributors 与 translators 必须是列表，且元素为 1~2 项的字符串列表）。这也解释了为什么每份教程都能被搜索引擎、Agent 与 LLM 稳定地识别主题与归属。

CSS 在 Web 技术栈中的定位非常清晰：HTML 决定页面"有什么内容"，CSS 决定页面"长什么样"。CSS 代码由静态的规则（rule）组成，每条规则包含一个或多个选择器（selector），并为若干视觉属性（property）赋予具体的值（value），随后这些属性被应用到选择器所指向的页面元素上。本教程以 CSS 2 为基线，同时覆盖 CSS 3 引入的新特性。

注意：CSS 产出的是可视化结果，因此学习时必须配合 CSS 游乐场（playground）即时试验，例如 dabblet 这类在线工具；本文侧重语法规则与通用技巧。

规则与语法骨架

CSS 的基本单元是规则块，写法如下：

/* 注释只能写在斜杠-星号之间，CSS 没有"单行注释"语法 */ seçici { özellik: değer; /* 更多属性... */ }

即：选择器 { 属性: 值; }。一条规则内可包含多条属性: 值声明，彼此用分号分隔。注释是 CSS 中唯一的注释形式，不支持//单行注释。

选择器：从类、ID 到属性与结构关系

选择器用于"瞄准"页面上的某个元素。教程以一个示例元素贯穿讲解：

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

基础选择器

/* 用其中一个 CSS 类名定位 */ .class1 { } /* 或同时命中两个类 */ .class1.class2 { } /* 或用元素名（标签名）定位 */ div { } /* 或用它的 ID 定位 */ #anID { }

属性选择器

属性选择器允许根据元素"拥有什么属性"来定位，是 CSS 3 起大幅增强的能力：

/* 只要元素带有该属性即可 */ [attr] { font-size: smaller; } /* 属性值精确等于某个值 */ [attr='value'] { font-size: smaller; } /* 属性值以某段文本开头（CSS 3） */ [attr^='val'] { font-size: smaller; } /* 属性值以某段文本结尾（CSS 3） */ [attr$='ue'] { font-size: smaller; } /* 属性值包含某段文本（CSS 3，英文原版补充） */ [attr*='foo'] { } /* 属性值在"空格分隔的列表"中包含某个词 */ [otherAttr~='foo'] { } [otherAttr~='bar'] { } /* 属性值在"连字符分隔的列表"中包含某个词，分隔符为 "-"（U+002D） */ [otherAttr|='en'] { font-size: smaller; }

其中~=与|=都是精确匹配词条而非子串：~=针对空格分隔（如otherAttr='en-us foo bar'中的foo、bar），|=针对连字符分隔（如en-us中的en）。

组合选择器：让定位更精准

/* 多个选择器无空格拼接，要求元素同时满足全部条件 */ div.some-class[attr$='ue'] { } /* 子元素：某元素的直接子级 */ div.some-parent > .class-name { } /* 后代元素：树中任意层级的子孙。子元素是直接后代，后代可以是任意层级 */ div.some-parent .class-name { } /* 警告：去掉空格后含义完全不同——它表示同一元素同时具有两个类 */ div.some-parent.class-name { }

最后一条是初学者极易踩的坑：div.some-parent .class-name（有空格）与div.some-parent.class-name（无空格）语义截然不同，前者是"后代关系"，后者是"同一元素的多重条件"。

兄弟选择器

/* 紧邻的后续兄弟元素 */ .i-am-just-before + .this-element { } /* 之前出现的任意兄弟元素 */ .i-am-any-element-before ~ .this-element { }

伪类：按状态选择

伪类（pseudo classes）用于在元素处于特定状态时命中它：

/* 鼠标悬停在元素上时 */ selector:hover { } /* 链接已被访问时 */ selector:visited { } /* 链接尚未被访问时 */ selected:link { } /* 元素获得焦点时 */ selected:focus { } /* 链接被点击按下时（英文原版补充） */ selector:active { } /* 上述与链接相关的伪类建议始终按 :link → :visited → :focus → :hover → :active 顺序书写，否则可能不生效（英文原版补充） */ /* 是其父元素的第一个子元素 */ selector:first-child {} /* 是其父元素的最后一个子元素 */ selector:last-child {} /* 是其父元素的第 n 个子元素（CSS 3，英文原版补充） */ selector:nth-child(n) { } /* 选中不具备某状态/属性的元素（CSS 3，英文原版补充）： 例如选中所有没有 id 属性的 div */ div:not([id]) { background-color: red; }

伪元素：给文档的特定片段加样式

伪元素（pseudo elements）与伪类类似，但作用于元素内部的虚拟片段：

/* 匹配选中元素的"虚拟第一个子元素"，常用于插入装饰内容 */ selector::before {} /* 匹配选中元素的"虚拟最后一个子元素" */ selector::after {}

通配选择器与分组

* { } /* 所有元素 */ .parent * { } /* 所有后代元素 */ .parent > * { } /* 所有直接子元素 */ /* 分组：将多个选择器合并，统一应用样式（英文原版补充） */ selector1, selector2 { }

属性与取值详解

在规则块内部，可以组合使用长度单位、颜色、边框、背景与字体等属性。

长度单位：相对与绝对

CSS 的长度单位分为相对单位与绝对单位两大类：

颜色表示法

color: #F6E; /* 短十六进制（HEX）格式 */ color: #FF66EE; /* 长十六进制（HEX）格式 */ color: tomato; /* 命名颜色 */ color: rgb(255, 255, 255); /* RGB 数值 */ color: rgb(10%, 20%, 50%); /* RGB 百分比 */ color: rgba(255, 0, 0, 0.3); /* RGBA，注意 0 <= a <= 1（CSS 3） */ color: transparent; /* 等价于把透明度设为 0 */ color: hsl(0, 100%, 50%); /* HSL 百分比（CSS 3） */ color: hsla(0, 100%, 50%, 0.3); /* HSL 加透明度 */

边框与圆角

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

背景与字体

/* 用图片作为元素背景，url() 内的引号可省略 */ background-image: url(/img-path/img.jpg); /* 字体族；名称含空格时必须加引号 */ font-family: Arial; font-family: "Courier New"; /* 若第一个字体不可用，浏览器依次尝试后续字体 */ font-family: "Courier New", Trebuchet, Arial, sans-serif;

CSS 3 进阶能力（英文原版补充）

英文原版 css.md 在基础属性之后还给出了四组 CSS 3 特性，可用于现代化布局：

/* 自定义属性（CSS 变量） */ :root { --main-bg-color: whitesmoke; } body { background-color: var(--main-bg-color); } /* 计算表达式 */ body { width: calc(100vw - 100px); } /* 规则嵌套（CSS 3）：等价于 .main .bgred { } / .main .bggreen { } / .main.bgblue { } */ .main { .bgred { background: red; } & .bggreen { background: green; } &.bgblue { background: blue; } } /* 弹性布局（Flexbox）：响应式布局的基础 */ .container { display: flex; flex-direction: row; /* 主轴方向 */ flex-wrap: wrap; /* 是否换行 */ justify-content: center; /* 主轴方向的对齐方式 */ align-items: center; /* 交叉轴方向的对齐方式 */ }

三种引入方式

将样式表保存为.css扩展名后，可通过三种方式应用到页面：

<!-- 方式一（推荐）：在页面 <head> 中通过 link 引入外部样式表 --> <link rel='stylesheet' type='text/css' href='path/to/style.css'> <!-- 方式二：在标记中内嵌 <style> 块 --> <style> a { color: purple; } </style> <!-- 方式三：直接在元素上设置 style 属性 --> <div style="border: 1px solid red;"> </div>

外部<link>是推荐方式，因为它将内容与表现分离、便于缓存与复用；内嵌<style>适合单页小范围样式；元素级style属性内联样式虽然直接，但会提高优先级、增加维护成本，应谨慎使用。

层叠与优先级（Cascade）

一个元素可能同时被多个选择器命中，同一属性也可能被多次赋值。此时哪条规则生效？答案是：选择器更具体的规则优先于不具体的规则；同特异性下，样式表中靠后的规则覆盖靠前的规则。这一裁决过程被称为"层叠"（cascading），"Cascading Style Sheets（层叠样式表）"的名字正源于此。

英文原版还补充了一个细节：如果两个不同的外部样式表都包含针对同一元素的规则，且特异性相同，则链接顺序决定胜负——最后链接的样式表生效。

以下面的 CSS 与标记为例（土耳其语教程原文示例）：

/* A */ p.class1[attr='değer'] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { özellik: değer !important; }

<p style='/*F*/ özellik:değer;' class='class1 class2' attr='değer'>

样式优先级从高到低为：

1. E：因!important关键字获得最高优先级，官方建议尽量避免使用；
2. F：内联样式（元素style属性）次之；
3. A：特异性最高，包含 3 个限定条件——元素名p、类class1、属性attr='değer'；
4. C：与 B 特异性相同，但出现在 B 之后，因此胜出；
5. B：次之；
6. D：最后。

关键认知：优先级是针对"每一个属性"分别裁决的，而不是针对整个规则块。此外，如果同特异性的两条规则来自不同链接样式表，则链接顺序决定最终样式。

媒体查询与响应式设计

CSS 媒体查询（Media Queries）是 CSS 3 提供的特性，用于指定某些规则在何时生效——例如打印时、或在特定尺寸/像素密度的屏幕上。媒体查询不会增加选择器的特异性。

/* 所有设备通用的规则 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印时让 h1 少用墨水 */ @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；
• 许多智能手机和平板默认会按桌面视口渲染页面，除非提供viewportmeta 标签：

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

兼容性检查与进一步学习

CSS 2 的绝大多数特性（以及 CSS 3 的多数特性）在所有浏览器和设备上可用，但在使用新特性之前，建议先查询其兼容性情况。业界常用的参考工具包括：CanIUse（详细的兼容性数据库）、Dabblet（CSS 游乐场）、Mozilla 开发者网络（MDN）的 CSS 文档（教程与参考）以及 Codrops 的 CSS 参考手册；Z-Index 与层叠上下文（stacking context）也是深入理解视觉层级时值得研读的主题。

若想继续在本仓库中加深 CSS 生态的知识，可以对照阅读：

• html.md——CSS 的搭档语言，负责页面内容结构；
• sass.md 与 less.md——CSS 预处理器的快速入门；
• 其他语言的 CSS 译本，如 es/css.md、ru/css.md，可用于对照同一套概念在不同语言下的表述。

小结

回顾本指南，你可以从 tr/css.md 与 css.md 这两份文档中带走一条完整的 CSS 学习主线：先理解"规则 = 选择器 + 属性 + 值"的骨架；再掌握类、ID、属性、组合、伪类与伪元素等层层递进的选择器体系；随后熟悉相对/绝对单位、颜色、边框、背景与字体等常用属性取值；然后理解三种引入方式与"层叠 + 特异性 + 顺序"的优先级裁决规则；最后用媒体查询与 viewport 配置让样式适配打印与移动端。这正是一份"五分钟扫读、实战时随时查阅"的 CSS 速查手册所应具备的全部要素。

• 文档
• 教程