Head First HTML与CSS
第十章 div与span
CSS——掌控页面的表现
原效果图如下：
为elixirs增加基本样式
下面为elixirs增加一些基本样式，如内边距和文本对齐，并加上背景图像。CSS如下：
#elixirs{
border-width:thin;
border-style:solid;
border-color:#007e7e;
width:200px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
margin-left:20px;
text-align:center;/*使用块元素的align来对齐其中包含的文本，这里为居中*/
background-image:url(images/cocktail.gif);
background-repeat:repeat-x;/*图像只在水平方向平铺*/
}
效果如下：
这里，text-align会对块元素中的所有内联元素对齐（注意，只能在块元素中设置，在内联元素上设置无效），这里<div>元素内部的<h2><h3><p>等块元素继承了<div>的text-align属性，从而将内容居中，并非<div>本身将标题和段落中的文本对齐。
子孙选择器
接着为elixirs增加文本行高和标题颜色。可以对<div>设置样式，这样会被其中的元素继承。但是如果我们只想给<div>中的某些元素（如<h2><h3>）设置特定样式，并不想改变<div>中的其他元素，也不想改变<div>之外的<h2><h3>元素，我们该怎么做？
我们可以建立新的类，但更简单的方法是使用子孙选择器。只选择<div>中的某些子孙元素（如<h2><h3>）。写法如下，父元素和子孙元素之间有一个空格，规则其余部分写法和以往一样：
div h2{
color:black;
}
现在还有一个问题，如果有人在该html文件中又创建了另外一个<div>，并且在其中有<h2>元素，它就会变成黑色文本。我们可以通过已经给这个<div>元素指定好的id来避免这种情况：
#elixirs h2{
color:black;
}
现在父元素是id为elixirs的元素，这个规则指出要选择id为"elixirs"的<div>元素中的所有子孙<h2>元素。
补充：
1.选择器"#elixirs h2"表示选择id为elixirs的元素的所有<h2>子孙，无论是直接“孩子”还是间接的“孙子”。
2.可以只选择直接的“孩子”，写法为"#elixirs>h2"。
3.也可以多层指定子孙选择器，例如"#elixirs blockquote h2"意思是选择id为elixirs的元素的子孙中的<blockquote>的子孙中的<h2>元素。（有点绕。。。）
改变饮料标题的颜色
既然搞清楚了子孙选择器，我们可以用它来改变饮料标题的颜色。
#elixirs h2{
color:black;
}
#elixirs h3{
color:#d12c47;
}
效果如下：
修正行高
在饮料区中我们希望文本采用正常的行高，如果我们直接指定<div>的line-height属性，虽然正常文本会继承，但是标题也会继承（1em代表是elixirs元素字体大小的一倍，“small”，约为12像素），就会导致标题的行高过小。
而我们希望，elixirs<div>中的各个元素的行高不要基于elixirs<div>的字体大小，而是要基于各个元素本身的字体大小。我们希望<h2>标题的行高为其字体大小的1倍(即“small”的120%)，<p>的行高为其字体大小的一倍（即"small"）。
line-height属性有一点
特殊，因为你可以对它直接使用一个数字，而不是一个相对度量（em或%）。如果使用数1，就表示elixirs<div>中的各个元素行高是其自己字体大小的1倍，而不是elixirs<div>字体大小的1倍。
#elixirs{
line-height:1;
}
效果如下：
可以看出，<p>元素和<h2><h3>元素的行高都符合我们的要求。
欠账3。
坚持啊坚持！！！
