A Whirlwind Tour of CSS

1. CSS 简介
2. CSS 基本语法
- 2.1. CSS 出现位置
3. CSS 选择器
4. CSS 常用属性
5. CSS Box model
6. CSS 长度单位

1. CSS 简介

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

CSS 的中文可称为：层叠样式表，或者级联样式表。

Home page: http://www.w3.org/Style/CSS/
CSS Specifications: http://www.w3.org/Style/CSS/specs
CSS Level 2 Revision 1 (CSS 2.1) Specification: http://www.w3.org/TR/CSS21/
CSS 简明教程：http://www.w3school.com.cn/css/index.asp

2. CSS 基本语法

CSS 由选择器和声明（用花括号包围）组成，其基本语法如图 1 所示。

Figure 1: CSS basic syntax

多个声明之间用分号分开，选择器也可以指定多个，用逗号分开即可。如：

h1, h2 {
   color: red;
}

CSS 中的注释用 /* 和 */ 包围。
CSS 大小写不敏感。

2.1. CSS 出现位置

CSS 样式可以出现在单个 HTML 元素中，出现在 HTML 文件的<head>标记中，出现在外部的 CSS 文件中。

出现在单个 HTML 元素中，如：

<p style="color: red"> this is red </p>

出现在 HTML 文件的<head>标记中，如：

<head>
<style type="text/css">
 .font40 { font-size: 40px; }
</style>
</head>

出现在外部的 CSS 文件中，如：

<head>
<link rel="stylesheet" type="text/css" href="external.css" />
</head>

3. CSS 选择器

选择器决定了其后面的规则应用于哪些内容上。

3.1. CSS 元素选择器实例

可直接对 html 中的元素进行选择。

<style type="text/css">
  html {color:black;}
  h1 {color:blue;}
  h2 {color:silver;}
</style>

3.2. CSS ID 选择器实例（井号）

html 中的 id 用来唯一标记一个元素，一个页面中只能出现一次。常用来标记页面中唯一的内容，如 main navigation，footer 等。

<p id="intro"> This is a paragraph of introduction. </p>

ID 选择器以‘#’号开头，如：

<style type="text/css">
  #intro {font-weight:bold;}  /* 相当于 *#intro {font-weight:bold;}  */
</style>

3.3. CSS 类选择器实例（点号）

html 中的类用来标记一类元素，常出现多次。

<p class="important"> This paragraph is very important. </p>
<p class="important"> This paragraph is also very important. </p>

类选择器以‘.’号开头，如：

<style type="text/css">
  .important {color:red;}  /* 相当于 *.important {color:red;}  */
</style>

3.4. CSS 2.1 选择器

Table 1: CSS 2.1 selector syntax
Pattern	Meaning	Described in section
`*`	Matches any element.	Universal selector
`E`	Matches any E element (i.e., an element of type E).	Type selectors
`E F`	Matches any F element that is a descendant of an E element.	Descendant selectors
`E > F`	Matches any F element that is a child of an element E.	Child selectors
`E:first-child`	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
`E:link, E:visited`	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
`E:active, E:hover, E:focus`	Matches E during certain user actions.	The dynamic pseudo-classes
`E:lang(c)`	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
`E + F`	Matches any F element immediately preceded by a sibling element E.	Adjacent selectors
`E[foo]`	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
`E[foo="warning"]`	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
`E[foo~="warning"]`	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".	Attribute selectors
`E[lang \vert="en"]`	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
`DIV.warning`	Language specific. (In HTML, the same as `DIV[class~="warning"]`.)	Class selectors
`E#myid`	Matches any E element with ID equal to "myid".	ID selectors

参考：http://www.w3.org/TR/CSS21/selector.html#pattern-matching

4. CSS 常用属性

参考：
http://www.w3school.com.cn/cssref/index.asp
http://www.w3school.com.cn/css/
http://www.w3.org/TR/CSS21/propidx.html

4.1. CSS 背景属性

CSS 背景属性如表 2 所示。

Table 2: CSS 背景属性
属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

4.2. CSS 文本属性

CSS 文本属性如表 3 所示。

Table 3: CSS 文本属性
属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

4.3. CSS 字体属性

CSS 字体属性如表 4 所示。

Table 4: CSS 字体属性
属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

4.4. CSS 列表属性

CSS 列表属性如表 5 所示。

Table 5: CSS 列表属性
属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

4.5. CSS 表格属性

CSS 表格属性如表 6 所示。

Table 6: CSS 表格属性
属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

4.6. CSS 大纲属性

CSS 大纲属性如表 7 所示。

Table 7: CSS 大纲属性
属性	描述
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

4.7. CSS 定位属性

CSS 定位属性如表 8 所示。

Table 8: CSS 定位属性
属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
display	定义建立布局时元素生成的显示框类型。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

利用相对定位的实例：

<html>
<head>
<style type="text/css">
h4.pos_left {
position: relative;
left: -10px;
}
h4.pos_right {
position: relative;
left: 10px;
}
</style>
</head>

<body>
<h4>正常位置的标题</h4>
<h4 class="pos_left">这个标题相对正常位置靠左10px</h4>
<h4 class="pos_right">这个标题相对正常位置靠右10px</h4>
</body>
</html>

4.7.1. display 属性

display 属性用于定义建立布局时元素生成的显示框类型。 display 属性的可能值及其含义如表 9 所示。

Table 9: display 属性的可能值及其含义
display 可能值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。
flex	Displays an element as a block-level flex container. New in CSS3
inline-flex	Displays an element as an inline-level flex container. New in CSS3
grid	Displays an element as a block-level grid container. New in CSS3
inline-grid	Displays an element as a inline-level grid container. New in CSS3

一般地，HTML 元素可以分为两大类： Block-level元素和 Inline元素。默认地，Block-level 元素从一个新行开始，且会充满整个容器（即充满它的父元素），比如 div,table,p,form 等等都是 Block-level 元素。Inline 元素，不会从换行符开始，而且它仅占据足够显示它自己的大小（不会充满整个容器），比如 img,button,a,span 等等都是 Inline 元素。

Block-level 元素的 display 属性默认为 block，Inline 元素的 display 属性默认为 inline。

比如，table 元素默认为 Block-level 元素，从而表格前后都会换行，若代码中有连续两个表格则会上下显示；但如果设置表格的 display 为 inline，这时，表格前后不会换行了，两个表格会并排显示。如下面代码中的两个表格会并排显示：

<table style="display: inline">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

<table style="display: inline">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

参考：http://www.w3schools.com/css/css_display_visibility.asp

4.7.2. CSS3 新布局：Flexbox

要使用 Flexbox 布局，你首先要声明一个 Flex 容器(Flex Container)。声明 Flex 容器的办法是显式地设置其 display 属性为 display: flex 或者 display: inline-flex 。这样就可以对 Flex 容器内的子元素（称为 flex item）进行布局了。

参考：
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

4.7.3. CSS3 新布局：Grid

要使用 Grid 布局，你首先要声明一个 Grid 容器(Grid Container)。声明 Grid 容器的办法是显式地设置其 display 属性为 display: grid 或者 display: inline-grid 。这样就可以对 Grid 容器内的子元素进行布局了。

参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

5. CSS Box model

CSS 框模型(Box Model)规定了元素框处理元素内容、内边距(padding)、边框(border)和外边距(margin)的方式，如图 2 所示。

Figure 2: Box model in CSS, “TM” stands for top margin, etc.

内边距、边框和外边距都是可选的，默认值是零。但浏览器的默认样式(default style sheet)常常会设置这些值。
参考：http://www.w3.org/TR/CSS21/box.html

5.1. CSS 内边距（padding）属性

CSS 内边距（padding）属性如表 10 所示。

Table 10: CSS 内边距（padding）属性
属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

5.2. CSS 边框（border）属性

CSS 边框（border）属性如表 11 所示。

Table 11: CSS 边框（border）属性
属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

5.3. CSS 外边距（margin）属性

CSS 外边距（margin）属性如表 12 所示。

Table 12: CSS 外边距（margin）属性
属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

6. CSS 长度单位

CSS 绝对长度单位如表 13 所示，相对长度单位如表 14 所示。

Table 13: CSS 绝对长度单位
绝对长度单位	描述
in	英寸(1 in= 2.54cm)
cm	厘米
mm	毫米
pt	磅(1 pt = 1/72 in = 0.3527mm)
pc	pica. 12 点活字(1 pc = 12 pt)

Table 14: CSS 相对长度单位
相对长度单位	描述
em	1em 等于当前的字体尺寸。em 可以自动适应用户所使用的字体。
ex	1ex 是一个字体的 x-height(x-height通常是字体尺寸的一半)
px	pixel. 像素(计算机屏幕上的一个点)