CSS 入门

Juno

欢迎来到 CSS 手册！我是 Juno，这是我最喜欢教的一部分网页知识。HTML 给页面搭出结构，而 CSS 是让它真正“活”起来的地方：颜色、间距、字体，整个页面的外观都由它决定。

我们会从 CSS 最基础的第一行代码讲起，一点一点慢慢往上搭。只要你能写一点 HTML，就已经准备好学这里的一切了。

没有什么问题是太基础的，按照你自己的节奏来，我们一起慢慢弄懂它！

Juno

欢迎来到 CSS 手册。我是 Ace，我喜欢把内容讲得实用一些。你已经能搭出页面结构了，所以这里我们的重点是把结构变成一个真正能上线的布局。

每一章都是先讲概念，再讲怎么用它：读一读，试一试，动手搭。布局正是 CSS 从“装饰”变成“工程”的地方，而这正是有意思的部分。

Juno

欢迎来到 CSS 手册。我是 Sol，写页面样式写了这么多年，几乎把能犯的错都犯过一遍了。这份文档是写给那些想弄清楚 CSS 到底是怎么解析你写的代码的人看的，而不只是想知道哪个属性会影响哪个像素。

这里会把层叠机制讲清楚，讲布局中的各种边界情况，还有大多数教程都会跳过的性能和无障碍细节。CSS 看起来很宽容，但那些“能跑起来的样式”和“在各种屏幕上都稳得住的样式”之间的差距，正是真正的功夫所在。仔细读，也要质疑这里的一切，包括我说的话。

这本手册适合任何会写一点 HTML 、想让页面呈现出自己心中样子的人。CSS，全称 Cascading Style Sheets（层叠样式表），是描述页面外观的语言：颜色、字体、间距，以及屏幕上一切元素的排布方式。HTML 说明页面上有什么内容；CSS 说明这些内容应该呈现成什么样子。这里先说一下你会一直碰到的两个术语：属性（property）指你可以设置样式的某个方面，比如 color 或 font-size；选择器（selector）则是 CSS 用来指定你要给哪些元素设置样式的方式。这里的每个概念都会完整展开讲解，包含深入的说明、示例，也方便你随时查阅需要的答案。

你不需要任何设计背景就能开始学习。只要你能在页面上放一个标题和一段文字，就已经具备了开始学习的基础，其他一切都会在用到的时候introduced 介绍给你。CSS 几乎是每个网页开发者学的第二门语言，紧接在 HTML 之后学习，因为一个没有样式的页面就只是一堆没经过装饰的文字而已。

这本手册会由浅入深、循序渐进地讲解。你会学到如何把样式附加到页面上、如何定位到想要的元素，学到盒模型如何控制间距和大小，如何处理颜色和字体，然后学习如何用 flexbox 和 grid 布局页面，让它能适应任何屏幕。每个知识点单独看都很小，但它们会一点点叠加成你真正能拿去上线的界面。

这里的讲解方式是解释每一段 CSS 到底做了什么、为什么这么做，而不只是告诉你该敲哪些代码。任何人都可以从示例里复制一个属性，然后看着屏幕上的东西发生变化。但从“能做到这一点”到“能构建出适配性强、可读性好、改起来成本低的布局”之间的距离,靠的是理解浏览器在样式重叠时到底是怎么决定最终效果的。这种理解才是能在任何一个项目之后依然管用的东西。

JunoCSS 很适合动手试着玩 关于 CSS，有一件很棒的事：你一改东西，马上就能看到结果。调一下颜色，挪一下间距，页面立刻在你眼前更新。这种快速的反馈让它成为通过动手实验来学习网页知识的最佳方式之一，所以读的时候一定要动手试试看。

JunoCSS 很适合动手试着玩 CSS 给你的是一个很紧密的反馈循环：改一个值，看它渲染出来，再调整。要善用这一点。建立布局直觉最快的方式，就是打开浏览器的开发者工具，实时改属性，看看什么东西在变。这本手册里的一切都是设计给你去动手试的,不只是拿来读的。

JunoCSS 很适合动手试着玩 这种反馈循环正是 CSS 最好的学习方式，所以把浏览器的开发者工具当成实验室来用：查看盒模型，切换某条声明的开关，实时观察层叠机制是怎么选出胜出规则的。读关于优先级（specificity）的文字是一回事；在样式面板里亲眼看到一条规则被另一条规则压下去，才是真正让你记住它的方式。

认识你的向导

这本手册由三位向导带你走完全程，具体选哪一位由你决定。内容对每个人都是一样的；向导决定的是讲述的语气，在那些会随之调整的页面上，也决定了每个部分讲得有多深。

你可以随时通过任意页面顶部的选择器切换向导，也可以打开右下角的 偏好设置 来更改你的向导、语言或字体大小。

准备好之后，手册就正式开始了。下一章 What is CSS 会讲解 CSS 到底是什么、它和 HTML 是怎么配合的，以及规则、选择器和属性这一小套词汇——整个后续内容都建立在这些概念之上。

更喜欢边做边学？Scrimba 的免费 HTML 和 CSS 课程通过五个项目和 75 多个互动挑战，讲解同样的内容。→