前言
这一章节讲了以下内容：
- 两个新的 HTML elelments：它们是
<div>和<span>，使用这两个 element 可以使得 HTML 有更加 serious 的 supporting structure. - 一些 shortcuts，用于简化对 font, border 和 margin 等的 properties 的参数的 specifying 更加 eaiser.
- 关于 pseudou-class 的介绍
关于<div>
<div>什么时候发挥作用呢，是为了存在 logical sectons 的时候，并且要为这个 section 设置一些参数的时候使用。它也可以用于分清页面的内容结构，使得页面更加容易理解其大致的框架。
步骤如下：
- Identifying logical sections
- Using
<div>s to mark sections: 这里需要注意的是，<div>包括起来的是一个 block element ，所以有 opening tag， 也有 closing tag:</div> - Lableling the
<div>s ：通过在<div>中添加 id=“” 或者 class=“”，以便以后在 CSS 中设计其 style。 - Adding some style
设置<div>段落为菜单的样式：
在这本书中，为了能够将段落有 order 的样子，于是对其 CSS 添加了一些style，这些 style 具体如下：
- 设置 width:200px;这个 property 有一个特点，那就是它只 specify the width for the content area only. 而不是整个box。
- 设置 text-align:center;这里的 text-align 会对齐所有在
<div>中的 inline element, 不仅仅包括 text，也会包括 img. - descendent selector:在这里，我们只想要改变
<div>的所有<h1>的颜色，但是我们不想改变文章其他部分<h1>的属性，同时，如果设置id,class就太繁琐，这个时候可以使用 descendents，在 CSS 中这样写： div h1{ color:black;} 这里 div是parent name,h1 是child name,中间用空格隔开。 - 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:
- font-style
- font-variant
- font-weight 这三个都是 optional 的
- font-size/line height 这个必须有,line-height 是optional 的，但是要注意格式
- 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 有两个特性：
- state related:Browser 通过用户的状态来将 element 动态地将其纳入不同的 class
- do not need to type in HTML:这是一个 class，但是不需要自己去定义。
关于cascade
当 Browser 打开一个网页的时候，可以存在多个 CSS 文件：包括 author 的，visitor 的 和 browser default 的。这时，因为对一个段落可能被很多 CSS 文件当作 selector,所以需要经过一系列的 sorting ,找到 more specific 的那一个，来用于显示，主要的步骤如下：
- Sort for author, reader and browser
- Sort for specify
- When elements have same specify, sort again based on ordering in styelsheets.
如何确定 specify?
通过三位数确定：000 ：
- 个位：是否包含 selector ，包含一个 +one point
- 十位：是否包含 class 或者 psedo class，包含一个+one point
- 百位：是否包含 id, 包含一个+one point