CSS，即层叠样式表，是一种与HTML结合使用的语言，可定制HTML元素的显示方式。CSS可以定义样式并改变表单的布局和设计。
CSS文件如何与HTML文件关联？
<link>用于链接HTML文档和外部资源，如CSS文件。
- href 来指定指向外部资源的URL
- rel 用于指定链接的文档与当前文档的关系
- type 用于定义被链接内容的类型
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
分离HTML和CSS文件
通常的做法是，将HTML文件中的内容代码与CSS文件中的样式代码分开。这有助于使代码更容易维护，因为每个文件的语法是分开的，对内容或样式的任何修改都可以在各自的文件中进行。
但是CSS代码也可以直接写在HTML中：方法一是将代码放在<style>标签里。
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
方法二是使用内联样式：CSS样式可以通过使用元素开头标签中的样式属性直接添加到HTML元素中。每个样式声明都以分号结尾。以这种方式添加的样式被称为内联样式。
<h2 style="text-align: center;">text</h2>
<p style="color: blue; font-size: 18px;">text</p>
CSS选择器
- CSS class可以重复使用并应用于许多元素。class选择器是用英文句号表示的，后面是class的名称。
- CSS Id选择器应该是唯一的，并且只用于设计一个元素。Id选择器是用“#”来表示的，后面是Id名称。
- CSS 类型选择器，用来匹配给定类型或标签名称的所有元素的
- CSS选择器的多选：使用逗号分隔，将多个选择器匹配到同一个CSS规则中。在这个例子中，h1和h2的文本都被设置为红色。
- 链式选择器: CSS选择器可以被链起来，以便规则集只应用于符合所有条件的元素。例如，要选择同时具有section-heading类的<h3>元素，可以使用选择器h3.section-heading。
/* 1. 选择所有class='column'的元素 */
.column {
}
/* 2. 选择id="first-item"的元素 */
#first-item {
}
/* 3. 选择所有<p> */
p {
}
/* 4. 同时选择h1和h2 */
h1, h2 {
color: red;
}
/* 选择同时class='section-heading'的<h3>元素 */
h3.section-heading {
color: blue;
}
具有多个值的HTML属性
一些HTML属性可以有多个属性值。多个属性值在每个属性之间用一个空格隔开。
<div class="value1 value2 value3"></div>
选择器专用性
看这段代码，只有color: blue将被实现，h1的颜色会变成蓝色。因为h1#header比h1更具体，因为h1#header包含一个id选择器，而h1只是一个类型选择器。
h1#header {
color: blue;
} /* implemented */
h1 {
color: red;
} /* Not implemented */
特异性是一个排名系统，当有多个相互冲突的属性值指向同一个元素时，就会使用这个系统。当决定应用哪条规则时，具有最高特异性的选择器胜出。最具体的选择器类型是ID选择器，其次是class类选择器，然后是type类型选择器。
CSS后代选择器
CSS后代选择器组合器用于匹配从另一个匹配的选择器下移的元素。它们在每个选择器和下级选择器之间用一个空格来表示。所有匹配的元素都会被选中，无论在HTML中的嵌套级别如何。
div p { }
section ol li { }
参考资料：CodeCademy
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
