本文共 2840 字，大约阅读时间需要 9 分钟。
由发表在
在Web早期样式和内容是不区分的，比如可以通过<bold>标签来显示加粗字体。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。
（Cascading Style Sheets，CSS），又称串样式列表、层次结构式样式表文件，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。
CSS 的历史
最初主流浏览器为了显示更丰富的web文档，不断地将新的标签和属性添加到HTML标签中。这最终使得文档内容与文档样式偶合在一起，难以创建内容清晰的文档。为了解决这个问题，万维网联盟在 HTML 4.0 之外提出层叠样式表（CSS），使用CSS完成样式与内容的分离。
样式与内容分离是计算机软件开发中的一条重要原则。不仅可以更清晰地分别表达样式或者内容，更重要的是这一分离使得二者不再耦合，样式变得可复用、组件化。
引入 CSS
我们知道HTML文件中根节点是<html>标签，它包含<head>和<body>。我们在<head>中可以引入外部的样式文件，文件中的样式将被应用到当前HTML。例如在上一章中的hello.html中引入我们写好的hello.css：
引入前后的变化如下图：
其他引入方式
除了在<head>中引入外部CSS文件，还有两种方式可以引入样式：
-
设置标签的
style属性，例如：Strawberry
-
在
<html>的任何地方，添加<style>标签，语法同外部CSS文件。例如：
在实际项目中，一般在<head>引入外部样式文件。相比于上述两种方式，样式文件的分离：
- 利于协同工作。样式往往由设计师负责，而内容往往由前端工程师负责。这样的分离有利于他们的分工。
- 样式可复用。引入样式时，可以对不同的样式文件进行组合，便于网站风格的建立和管理。
一个 CSS 文件
这是一个简单的 CSS 文件，先不必在意其细节，大致观察一下CSS的语法。
div p{ padding-left: 20px;}body img, body div{ float: left;}.avatar{ width: 100px; height: 100px;} 可以观察到上述文件分为3部分内容，每一内容都包含一行逗号分隔的字符串、紧接着的一组大括号、以及大括号内的内容。
- 每一部分称为一个规则（rule），CSS是由多组“规则”组成的；
- 大括号前的字符串称为选择器（selector），它用来指定该规则用于怎样的元素；
- 大括号内是“特性”列表，每个特性都用分号结束。
“特性”由“属性”（property）和“值”（value）组成，以冒号分隔：
- 属性（property）：某一种特性的名称；
- 值（value）：该特性的设置值。
类型选择器
类型选择器是最常用的CSS选择器，用于选择指定类型的HTML标签。请看：
body{ margin: 50px;}div p{ padding-left: 20px;}body img, body div{ float: left;} - 设置
body：为50像素； - 设置
body下的p：为20像素； - 设置
body下的img和body下的div：向左。
现在页面便有了边距，并且图片和下面的文字排成了一行：
类选择器
类选择器用于选择指定class的HTML标签，在CSS库中很常见。首先需要给HTML标签设置class：
然后在CSS中用.来选择对应的类：
.avatar{ width: 100px; height: 100px; border-radius: 50px;} 我们设置<img>的长和高使之变成矩形，再把边框圆角设为半边长，此时图片就变成了圆形：
ID选择器
ID选择器用于选择指定id（这是任何HTML标签都可以有的属性，其定义方式见下面的代码）的HTML标签，常用于自定义样式。同样地，先给HTML标签设置id：
i am a little, cute catie...
在CSS中使用ID选择器：
#subtitle{ font-style: italic; color: grey;} 这样便可以改变h2的字体和颜色了：
伪类选择器
顾名思义，伪类选择器用于选择伪类。伪类（如:hover,:focus）是浏览器生成的，不出现在HTML文件中，主要用于标识用户操作造成的元素状态改变。
例如鼠标悬停时，鼠标所在的元素便会拥有:focus伪类。继续给.avatar类添加一个伪类：
.avatar:hover{ filter: blur(20px); -webkit-filter: blur(5px); cursor: pointer;} 在鼠标悬停在图片上时：
- 图片会应用一个滤光器：以5像素的尺度进行模糊；
-webkit-是一种CSS前缀，用来支持webkit核心的浏览器；- 鼠标指针会变成手形。
请使用 Chrome 内核的浏览器！鉴于优秀的兼容性和对HTML5、CSS3的支持，请您在整个课程的学习过程中都使用Chrome浏览器。
说起CSS前缀，一般CSS属性名都是以字母起始的，它们由W3C标准化。浏览器厂商为了支持一些新的尚未标准化的特性，会提供一些额外的CSS属性。这些属性都会添加该厂商定义的前缀。有四种常见的CSS前缀：
-moz-：支持Firefox-webkit-：支持Safari、Chrome-o-：支持Opera-ms-：支持Internet Explorer
其他选择器
事实上CSS共有5种基本选择器和2种伪类选择器。
基本选择器
- 类型选择器（
h1,p等）：用于选择指定类型的HTML标签； - 类选择器（
.classname）：用于选择指定class的HTML标签； - ID选择器（
#idname）：用于选择指定id的HTML标签； - 通配符选择器（
*）：用于选择所有类型的HTML标签； -
属性选择器（
[foo='bar']）：用于选择某属性为指定值的HTML标签；属性选择器 用来选择特定属性值的元素，例如
div[class=avatar]可以选择class属性为avatar的<div>元素，当然HTML元素的属性很多，属性选择器可以匹配任何属性。
属性选择器还支持更复杂的匹配，例如
[name^="sz_"]表示属性name的值具有前缀：sz_。
伪选择器
- 伪类选择器：用于选择特定状态的元素。
- ：如
:before,:first-letter，用于向某些选择器设置特殊效果，以实现复杂的样式。
组合选择符 可描述元素之间的层级关系，例如：
A > B将会选择A下一层的元素B。如果以空格间隔，则会匹配任何一级的子元素。
更多CSS选择器的信息可参考：。
更多文章请访问
转载地址：http://hjjii.baihongyu.com/