Chapter 10 div与span

<div>划分页面为逻辑区或逻辑分组。
逻辑区（logical section）：页面上彼此相关的一组元素。

1. 在属于一个逻辑区的元素前后放上<div></div>
2. 可以使用id属性为逻辑区提供标识

为什么需要逻辑区？

1. 帮助理解页面；
2. 可能真的去需要通过逻辑区构建页面。

tips

1. <div>中可以嵌套<div>
2. 切记滥用<div>

若body与div中都有h2，而我们只想改变div中h2的样式，可以使用以下方法：
div h2{ color }
如果有多个div，可以用该div的标签号表示，如：
#pets h2{ color }
该方法可以多层次嵌套：
#pets blockquote h2{ color }

---

同一对象的不同属性可以写在一行，简化代码，如：
border-width：thin; border-style:solid; border-color:#007e7e;
以上三行可以直接写成：
border:thin solid #007e7e; 顺序不重要。
内外边距也可以写一行，按照上右下左的顺序。
若山下，左右等距，可以只写两个值，先上下，后左右。

---

---

<span>建立内联元素的逻辑分区。

---

对于<a>的修改，
link:未点击过该链接的状态
visited:已访问过该链接
hover:鼠标悬停于链接上的状态
注意！“a:link”中间不能有空格。

a:link{ color:green; } a:visited{ color: red; } a:hover{ color:yellow; }

这种形式的类称为伪类

---

开发者会为一个页面制作多个样式表，用户也可以自己制作样式表，浏览器有自己的默认样式表，9如何确定一个元素使用哪个样式？
这就是层叠问题。

当浏览器要确定<h1>中font-size属性的层叠时，需要如下步骤：

1. 收集所有样式表（开发者，用户，浏览器默认）；
2. 找到所有的<h1>下，所有关于font-size的规则；
3. 对所有匹配的样式表排序
   开发者>用户>浏览器默认；
4. 按照特定性对某个样式表中的规则排序

id	class or pseudoclass	elements
百位	十位	个位

某个规则，如果对应一个id百位加1分，对应一个类或者伪类，十位加1分，有一个元素，则个位加1分。得分越多越重要。；
5.对于冲突规则，在样式表中位置越靠后，越重要。

---

用户可以在他的属性后添加!important覆盖开发者的样式
如：
h1{ color:red; !important }

---

float 属性，使一个块元素单独成为一列。