CSS 如何工作
一个普通的 HTML 页面到达时，浏览器的默认样式已经应用：蓝色带下划线的链接、黑色无衬线文本、按大小递减的标题。CSS 就是如何接管这个原始结构并决定它的外观。但在改变任何颜色或移动任何框之前，你需要了解你的样式首先如何到达页面，以及当两个规则对同一个元素产生分歧时会发生什么。
将 CSS 附加到页面
有三种方法可以将 CSS 添加到页面，区别主要在于你在哪里编写样式。
第一种是**内联样式**，直接写在元素的 style 属性上：
<p style="color: teal;">单个青色段落。</p>这只样式化一个段落，没有其他。第二种方法是页面 <head> 中的内部 <style> 块，可以一次样式化多个元素。第三种，也是你应该使用的方法，是一个链接到页面的单独 CSS 文件。你在该文件中编写一次样式，每个链接到它的页面都会应用它们。把它想象成一个衣柜：与其逐个描述每个人的穿着，不如一次性写下着装要求，每个人都遵循它。
这是完整的外部方法：一个链接样式表的 HTML 文件和样式表本身。
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="intro">欢迎来到网站。</p>
</body>/* styles.css */
.intro {
color: teal;
font-size: 1.25rem;
}
style 在元素上、在 <style> 块中，或在你用 <link> 链接的单独文件中。使用单独文件。你编写一次样式，每个链接到它的页面看起来都一样。 规则的构成
一段 CSS 被写成一个**规则**，每个规则都有相同的形式。这是一个样式化卡片的规则：
.card {
color: navy;
padding: 16px;
}前面的 .card 是选择器：它选择规则应用到哪些元素，在这种情况下是任何具有 card 类的元素。花括号内的一切都是声明块。内部的每一行，如 color: navy;，都是一个声明：一个属性（color）和你希望它具有的值（navy），由冒号分隔并以分号结尾。把整个规则当作一个句子阅读："对于每个卡片，使颜色海军蓝并且内边距 16 像素。"
.card 这样的选择器选择元素，每个声明如 color: navy; 是一个属性和值，中间有冒号，结尾有分号。一旦你能命名这些部分，你读到的每个规则都看起来一样。 级联
有时两个规则试图样式化同一个元素，CSS 需要一种方法来决定哪个赢。那个决定是**级联**，它是 CSS 中 C 的来源。
.card {
color: navy;
}
.card {
color: teal;
}两个规则都针对卡片，都设置颜色。卡片最终是青色，因为当两个规则具有相同强度时，写在后面的规则赢。顺序很重要，它像水一样流过文件，这就是级联这个名字的来源。还有第二个平手破坏规则：更具体的选择器击败更一般的选择器，所以针对你的卡片的规则可以覆盖更广泛的规则，即使更广泛的规则后来。你将在 选择器章节中详细遇到那个具体程度。
继承
在框上设置颜色，框内的文本通常也会变成那个颜色，即使你从未直接样式化那个文本。那个传递是称为**继承**。
.site-header {
color: white;
font-family: Georgia, serif;
}标题内的每一段文本，一个标题，一个链接，一个标签行，捡起那个白色和那个字体而不是它自己的规则，因为 color 和 font-family 是继承属性。不是一切都传递，虽然。像 padding 这样的间距属性不继承：你在标题上放的内边距保留在标题上，不出现在它内部的元素上。作为一个粗略指南，文本相关样式流向孩子，像间距和边框这样的框相关样式保持不动。
color 或 font-family 里面的文本免费捡起。像 padding 这样的间距不传递，它保留在你放它的地方。粗略规则：文本样式传向孩子，框样式保持不动。