第十章 div与span
div介绍
div是用于给页面划分逻辑的元素，比如一个介绍宠物的页面，就可以把页面分为猫区和狗区，通过div元素的分区也可以为猫区和狗区添加不同的css样式。
<div id="cats">
<p>猫区<p>
</div>
<div id="dogs">
<p>狗区</p>
</div>
在页面中要使用<div>，但不要滥用。如果这样做有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加<div>，就只会让页面复杂，而没有任何实际好处。
子孙选择器
如果我们想告诉css，我们只想选择某些元素的子孙元素，这有点像指定你的遗产只能由你的一个女儿或儿子的孩子们继承。子孙选择器的写法如下所示：
div h2{ //div是父元素，h2是子元素，父元素和子元素之间有一个空格
color: black;
}//这个规则指出要选择作为一个<div>子孙的所有<h2> 现在这个规则还有一个问题，如果有人在该css文件中创建了另一个<div>，那另一个<div>元素的中的<h2>元素也会得到黑色的<h2>文本，尽管他可能并不想这样。不过，我们可以为div元素指定一个id，使用id更特定的指定我们想要的子孙元素：
#elixirs h2{ //现在父元素是id为elixirs的元素
color: black;
}//这个规则指出要选择id为elixirs的<div>的所有子孙<h2>元素。 选择器#elixirs h2表示选择的<h2>元素可以是elixirs的所有子孙，所以这个<h2>可以是<div>的直接孩子，也可以是嵌套在一个<blockquote>或另一个嵌套的<div>元素中（这就成为一个孙子），以此类推。所以子孙选择器会选择一个元素中嵌套的所有<h2>，而不论它嵌套的有多深。
想要选择直接的孩子要怎么办？ 可以使用
#elixirs>h2,这样一来，只有当<h2>是一个id为“elixirs”的元素的直接孩子时，才会选择这个<h2>。
如果需要更复杂的选择呢？比如要选择一个<h2>，要求它是一个<blockquote>的孩子，而且<blockquote>必须在elixirs中，可以做到吗？ 方法还是一样的，只需要使用更多的子孙选择器，如下所示：
#elixirs blockquote h2{
color:blue;
} 这会选择<blockquote>下一级的<h2>元素，而且这个<blockquote>是一个id为"elixirs"的元素的子元素。
span介绍
<div>允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联元素的逻辑分组。
<span class:dogs>狗</span>:<span class:name>大黄</span> <span class:cats>猫</span>:<span class:name>阿喵</span>
a元素和它的多重人格
在样式方面，链接的表现稍有些不同。链接是元素世界里面的变色龙，取决于具体环境，它们会瞬间改变样式。比如在还未点击的时候是一个颜色，点击之后是另外一个颜色，有些时候将鼠标悬停在链接上就又是一个颜色。
那么该如何根据元素的状态指定样式？一个链接可以有多种状态：可能未访问，已访问或者处于悬停状态（还有另外的几种状态）。那么，如何利用所有的状态呢？这里就要用到伪类这个概念：
a:link{ //这里有一个元素a，后面是一个冒号，然后是我们想选择的状态。要确保这些选择器中没有空格
color: green;
} //这个选择器应用于处于未访问状态的链接
a:visited{
color: red;
} //这个选择器应用于已访问的链接
a:hover{
color: yellow;
} //悬停在一个链接上时会应用这个选择器 还有另外的两种状态：focus和active,浏览器将焦点放在你的链接上时就是焦点（focus）状态。这是什么意思？有些浏览器允许按下Tab键来轮流访问页面上的所有链接，浏览器访问到某个链接时，这个链接就拥有“焦点”。设置一个焦点伪类值对于提高可访问性很有帮助，因为需要使用键盘（而不是鼠标）来访问链接的人会知道他们合适选择到正确的链接。用户第一次见单击一个链接时，就处于活动（active）状态。
链接处于多种状态时呢？例如，我的链接可能已经访问过，而且鼠标悬停在它上面，另外用户可能正在单击它，这些情况可能同时发生。当然可以。你要按规则的顺序来确定应用哪个样式。
所以一般认为适当的顺序是：link，visited，hover，focus，最后是active。如果使用这个顺序，就能得到你期望的结果。
了解层叠
通过层叠，我们将了解浏览器是如何选择规则的：
1.
收集所有的样式表。第一步，需要所有的样式表，包括：Web页面作者写的样式表，读者增加的样式表（有些读者会自己增加），还有浏览器默认的样式。
2.
找到所有匹配的声明。比如指定的是<h2>元素，那么浏览器就会检查所有样式表，将所有样式表中的<h2>元素找出来。
3.
现在对所有匹配的规则排序。 既然得到了所有匹配的规则，现在按作者、读者和浏览器对这些规则排序，换句话说，如果是页面的作者写的规则，它们就比读者写的规则更重要。相应的，读者的样式则比浏览器的默认样式更重要。
4.
现在按特定性对所有声明排序。 凭直觉你可能认为，如果一个规则能更准确的选择一个元素，那么这个规则就更加特定，例如，子孙选择器“blockquote h1“就比”h1“选择器更特定。
5.
最后，对于冲突的规则，按照它们在各自样式表中出现的顺序进行排序。 现在只需要对冲突的规则排序，各个样式表中后出现的规则（更考辛最下面）更重要。所以，如果在样式表中增加一个新规则，它会覆盖在它之前的所有规则。
一些属性的简写形式
你可能已经注意到，css属性太多了，例如设置内外边距的时候要同时设置四个方向的边距。我们可以使用一些简写形式：
padding: 0px 20px 30px 10px; //顺序为上右下左，也就是顺时针方向设置内边距 margin: 0px 20px 30px 10px; //顺序同样为上右下左，顺时针 padding: 20px; //同时设置四个方向的内边距 margin: 0px 20px; //如果上下边距是一样的，左右边距也是一样的，可以这样设置，0px 为设置上下边距，20px为设置左右边距 border: solid thin #007e7e; border: #007e7e solid thin; border: solid thin; border: #007e7e solid; border: solid; //这些都是合法的设置边框的语句，可以同时设置边框的颜色、样式和粗细 background: white url(images/cocktail.gif) repeat-x; //类似边框，可以同时设置背景的颜色，背景图片和背景图片样式等
字体的简写：
font: font-style font-variant font-weight font-size/line-heigh font-family //前三项为可选的，但是一定要指定字体的大小ling-height属性是可选的。如果你想指定一个行高，
只需要在font-size属性后面加一个"/"，然后指定你想要的行高。最后，需要增加字体系列。
只需要指定一个字体（必要），不过强烈建议你指定一些候选字体，并且font-family名之间要使用逗号分隔
本章出现的一些元素和属性
width: 200px; //width属性允许你指定元素内容区的宽度。在这里，我们将内容宽度指定为200像素 text-align: center; //使用块元素的text-align来对齐其中包含的文本。在这里我们打算让文本居中
line-hight: 1; //可以对line-height属性直接使用一个数，而不是相对的度量（比如en或%），如果使用
数字1，就表示元素中每一个元素的行高是自己字体大小的1倍，而不是从父类继承下来的字体大小的一倍