Chapter 10 div与span

div

• div将相关元素归组在一起，类似于其它块元素，这有利于保证结构清晰或方便增加样式。
  在html中增加<div id="idname"></div>
  在css中#idname{……}
• 子孙选择器
  ' #elixirs h2比 div h2 {……} 更特定
  ' #elixirs blockquote h2 {……}
  选中直接子代 #elixirs>h2

span

<span>为内联内容建立逻辑分组

<ul>
      <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
      <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
      <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
      <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
      <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
    </ul>

伪类 Pseudo-class

可以用伪类为各个状态单独地指定样式，伪类最常用于<a>元素 。

a:link {
  color: #007e7e;
}

a:visited {
  color: #333333;
}

a:hover {
  background: #f88396;
  color: #0d5353;
}

其它

• width属性设置一个元素内容区的宽度
• text-align用来设置文本对齐方式，是块元素的一个属性，在内联元素如<img>上则不适用
• 如果读者在一个属性申明里最后加上 !important ,TA就能覆盖你的样式，如 h1 {font-size: 200% !important; } 。
• line-height有点特殊，因为可以对它直接使用一个数字，而非一个相对量（如em和%）。如果使用数字1，则表示行高是自己字体大小的1倍，页面中字体大小不同时，可以设置为数字。

• 简写

  
  
  简写1

简写2