摘《CSS设计指南》

块级元素与行内元素

• 块级标签
  <h1>-<h6> ：6 级标签
  <p>：段落
  <ol>：有序列表
  <li>：列表项
  <blockquote>：独立引用
• 行内标签
  <a>：链接（anchor，锚）
  <img>：图片
  <em>：斜体
  <strong>：重要
  <abbr>：简写
  <cite>：引证
  <q>：文本内引用

选择符

• 上下文选择符以空格分隔，而分组选择符则以逗号分隔

  • 上下文：p em {color:green;}
  • 分组：h1, h2, h3 {color:blue; font-weight:bold;}

• 紧邻同胞选择符+ ：必须紧临，否则无效。

• 给元素添加多个类名使用空格
  <p class="specialtext featured">Here the span tag be styled.</p>
  这里的 specialtext 和 featured，放在同一对引号里，用空格分隔

• 通过类选择器一次选取多个元素
  .specialtext.featured {font-size:120%;}
  此处选择符的两个类名之间没有空格。如果加了空格，就变成了“祖先/后代”关系的上下文选择符了。

• ID 也可以用在页内导航链接中。下面就是一个链接，其目标是同一页的另一个位置。
  <a href="#bio">Biography</a>：点击此链接会链接到本页面中id为bio的元素
  <a href="#">Back to Top</a>：点击返回顶部
  如果你暂时不知道某个 href 应该放什么 URL，也可以用#作为占位符，但不能把该属性留空。因为href 属性值为空的链接的行为跟正常链接不一样。
  仅作为超链接点击使用也可以这么写：<a class="" href="javascript:;">所有商品</a>

• 属性选择符

<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
img[title] {border:2px solid blue;}//选取有属性为title的img元素
img[title="red flower"] {border:4px solid green;}

alt 属性中的文本会在图片未能加载时显示，或者由屏幕阅读器朗读出来。title 属性会在用户鼠标移动到图片上时，显示一个相应的文本提示。

UI伪类

• 链接伪类

a:link {color:black;}  
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}  

顺序固定，不然可能出现问题。一个冒号（:）表示伪类，两个冒号（::）表示 CSS3 新增的伪元素。
:hover可用于任何元素

• :focus表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。
  input:focus {border:1px solid blue;}

• :target
  如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。
  <h2 id="more_info">This is the information you are looking for.</h2>
  那么，#more_info:target {background:#eee;}会在用户单击链接转向 ID 为 more_info 的元素
  (<a href="#more_info">More Information</a>)时，为该元素添加浅灰色背景。

结构化伪类:根据标签结构应用样式

• :first-child 和:last-child
ol.results li:first-child {color:blue;} 应用给以下标记：

<ol class="results">
  <li>My Fast Pony</li>  
  <li>Steady Trotter</li>
  <li>Slow Ol' Nag</li>`  
  </ol> 

文本“My Fast Pony”就会变成蓝色。如果选择符改成这样：
ol.results li:last-child {color:red;} 那变成红色的文本就是“Slow Ol’ Nag”了。

• :nth-child
e:nth-child(n)
  e 表示元素名，n 表示一个数值（也可以使用 odd 或 even）。例如，li:nth-child(3) 会选择一组列表项中的每个第三项。:nth-child 伪类最常用于提高表格的可读性，对表格的所有行交替应用不同颜色。

伪元素

搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。

• p::first-letter {font-size:300%;}
  段落首字符放大的效果。

• p::first-line {font-variant:small-caps;}
  可以把第一行以小型大写字母显示

• 在特定元素前面或后面添加特殊内容。以下标记
  <p class="age">25</p>
  和如下样式

p.age::before {content:"Age: ";} 
p.age::after {content:" years.";} 

注意，每个 content 属性值中都包含了空格，以便输出结果中有适当的空距。
能得到以下结果：
Age: 25 years.

CSS 提供了三种机制：继承、层叠和特指。

• CSS 中可以继承的属性：颜色、字体、字号。不能继承的属性：比如边框、外边距、内边距。
• 层叠规则：设定的样式胜过继承的样式，此时不用考虑特指度。比如下面的标记

<div id="cascade_demo">
 <p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p> 
</div>

和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2 （高特指度）
会导致单词“weak”变成蓝色，因为它从父元素 p 那里继承了这个颜色值。
但是，只要我们再给 em 添加一条规则
em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但 em 继承的颜色值，会被为它明
确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也
没有用。

• 特指度（I-C-E）：id-class-element

垂直方向上的外边距会叠加

p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; 
 margin-bottom:30px;} 

由于第一段的下外边距与第二段的上外边距相邻，你自然会认为其他段落之间的外边距
是 80 像素（50+30），但是实际的间距是 50 像素。像这样上下外边距
相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。水平边距和正常一样。

box模型结论

• 盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父
  元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量
  等于水平边框、内边距和外边距的和。
• 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展
  得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占
  据的水平宽度。

tips

• 块级元素独立成行，因为其宽度为100%，无法容纳其他元素，行内元素左右排列，因为它会尽量‘包裹’其所含的元素.
  如果不设置块级元素的 width 属性，那么这个属性的默认值是 auto，结果会让元素的宽度扩展到与父元素同宽。
• 前景色包含内容和边框（color:red），背景色包含背景颜色和背景图片
• body {font-family:"trebuchet ms", tahoma, sans-serif;} 如果字体名像 Trebuchet MS 一样多于一个单词（有空格），应该加上引号。
• h1 被设定为 2em，h2 是 1.5em，p 是 1em。默认情况下，1em 等于 16 像素，这也是 font-size 的基准大小。
• 类的目的是为了标识一组具有相同特征的元素
• 元素的背景层可以用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（使用 background-image 属性），背景图片叠加在背景颜色之上。

内容摘自CSS设计指南，书籍电子版在这里：CSS设计指南