Head First HTML与CSS

第十章 div与span

CSS——掌控页面的表现

原效果图如下：

效果图1

为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;/*图像只在水平方向平铺*/

}
效果如下：

效果图2

这里，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;

}

效果如下：

效果图3

修正行高

在饮料区中我们希望文本采用正常的行高，如果我们直接指定<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;

}
效果如下：

效果图4

可以看出，<p>元素和<h2><h3>元素的行高都符合我们的要求。

---

欠账3。

坚持啊坚持！！！