前言

這一章節講了以下內容：

1. 兩個新的 HTML elelments：它們是 <div>和 <span>，使用這兩個 element 可以使得 HTML 有更加 serious 的 supporting structure.
2. 一些 shortcuts，用於簡化對 font, border 和 margin 等的 properties 的引數的 specifying 更加 eaiser.
3. 關於 pseudou-class 的介紹

關於<div>

<div>什麼時候發揮作用呢，是為了存在 logical sectons 的時候，並且要為這個 section 設定一些引數的時候使用。它也可以用於分清頁面的內容結構，使得頁面更加容易理解其大致的框架。
步驟如下：

1. Identifying logical sections
2. Using <div>s to mark sections: 這裡需要注意的是，<div>包括起來的是一個 block element ，所以有 opening tag， 也有 closing tag:</div>
3. Lableling the <div>s ：通過在<div>中新增 id=“” 或者 class=“”，以便以後在 CSS 中設計其 style。
4. Adding some style

設定<div>段落為選單的樣式：

在這本書中，為了能夠將段落有 order 的樣子，於是對其 CSS 添加了一些style，這些 style 具體如下：

1. 設定 width:200px;這個 property 有一個特點，那就是它只 specify the width for the content area only. 而不是整個box。
2. 設定 text-align:center;這裡的 text-align 會對齊所有在<div>中的 inline element, 不僅僅包括 text，也會包括 img.
3. descendent selector:在這裡，我們只想要改變<div>的所有<h1>
   的顏色，但是我們不想改變文章其他部分<h1>的屬性，同時，如果設定id,class就太繁瑣，這個時候可以使用 descendents，在 CSS 中這樣寫： div h1{ color:black;} 這裡 div是parent name,h1 是child name,中間用空格隔開。
4. line-height 引數的設定：可以通過 1em,%的方式設定，但是這樣設定的話，是基於 中的文字文字的，這時候，標題的字比較大，padding 就會不足，可以用數字“1”代替，它的意思是 to change the line-height of each element in it.

一些shortcuts

padding 和 margin的簡化

原來是這樣的：

padding-top:0px;
padding-right:20px;
padding-bottom:10px;
padding-left:0px;

或者這樣：

`margin-top:0px;
margin-right:20px;
margin-bottom:10px;
margin-left:0px;

現在只需要這樣：
margin:top right bottom left;
如果兩個對邊相等，
可以這樣：
margin:top,right;
如果四個相等，
可以
margin:20px;

關於 border,background 的 property 的設定：

boder 有很多引數，比如：

• border-width
• border-style
• border-color
  現在只需要這樣：
  border: solid thin #007e7e;
  而且你可以 specify them in any order you like

background 有很多引數，比如：

• background-color:
• background-image;
• background-repeat:

現在可以這樣寫：
background white url(images/cocktail.gif) repeat-x;

對於 font 的設定

font 的 property 的設定有順序：
font:

1. font-style 
2. font-variant
3. font-weight 這三個都是 optional 的
4. font-size/line height 這個必須有,line-height 是optional 的，但是要注意格式
5. font-family 用逗號隔開每個字型的名稱

關於<span>

<span>用於inline element,把它們弄成一個 package ，<div>是用於 block element 的。

關於<a> element 的 psedo-class

<a>element 有五個psedo-class:

• a:link
• a:visited
• a:hover
• a:focus
• a:active

可以在 CSS 中對其設定相應的引數，比如當 hover 時，字型變成黃色：
a:hover
{ color:yellow;
}
這裡的psedo-class 有兩個特性：

1. state related:Browser 通過使用者的狀態來將 element 動態地將其納入不同的 class
2. do not need to type in HTML:這是一個 class，但是不需要自己去定義。

關於cascade

當 Browser 開啟一個網頁的時候，可以存在多個 CSS 檔案：包括 author 的，visitor 的 和 browser default 的。這時，因為對一個段落可能被很多 CSS 檔案當作 selector,所以需要經過一系列的 sorting ,找到 more specific 的那一個，來用於顯示，主要的步驟如下：

1. Sort for author, reader and browser
2. Sort for specify
3. When elements have same specify, sort again based on ordering in styelsheets.

如何確定 specify?

通過三位數確定：000 ：

1. 個位：是否包含 selector ，包含一個 +one point
2. 十位：是否包含 class 或者 psedo class，包含一個+one point
3. 百位：是否包含 id, 包含一個+one point