Head First HTML与CSS

第九章 盒模型

CSS——掌控页面的表现

今天，我们要对某一段落文字利用CSS做强调处理。原始段落如下图：

是“Our guarantee”开始的段落。

效果图1

为段落增加边框和背景颜色

.guarantee{

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素增加背景色*/

}

效果图2

增加内边距

CSS中有一个padding属性，可以对内容四周设置相同的内边距。可以指定为百分数或按照像素指定。

.guarantee{

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素设置背景色*/

padding:25px;/*在该类中的元素内容四周（包括上下左右）设置25像素宽度的内边距*/

}

注意：背景颜色会出现在内容区和内边距区。不会越过边框到达外边距处。

效果图3

增加外边距

类似于内边距，可以将外边距指定为一个百分数或者按像素指定。

.guarantee{

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素设置背景色*/

padding:25px;/*在该类中的元素内容四周（包括上下左右）设置25像素宽度的内边距*/

margin:30px;/*在该类中的元素边框四周（包括上下左右）设置30像素宽度的外边距*/

}

效果图4

进一步设置

增加行高，斜体，字体颜色，字体系列等。

.guarantee{

line-height:1.9em;/*设置行高为文字大小的1.9倍*/

font-style:italic;/*设置文字为斜体*/

font-family:Georgia,"Time New Roman",Times,serif;/*设置字体系列，注意含有空格的字体要加引号*/

color:#444444;/*设置字体颜色*/

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素设置背景色*/

padding:25px;/*在该类中的元素内容四周（包括上下左右）设置25像素宽度的内边距*/

margin:30px;/*在该类中的元素边框四周（包括上下左右）设置30像素宽度的外边距*/

}

效果图5

增加一个背景图像

利用CSS中的background-image属性可以为任何元素增加一个背景图像。

.guarantee{

line-height:1.9em;/*设置行高为文字大小的1.9倍*/

font-style:italic;/*设置文字为斜体*/

font-family:Georgia,"Time New Roman",Times,serif;/*设置字体系列，注意含有空格的字体要加引号*/

color:#444444;/*设置字体颜色*/

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素设置背景色*/

padding:25px;/*在该类中的元素内容四周（包括上下左右）设置25像素宽度的内边距*/

margin:30px;/*在该类中的元素边框四周（包括上下左右）设置30像素宽度的外边距*/

background-image:url(images/background.gif);/*增加背景图像*/

}

效果图6

注意：这里的背景图像是透明的（原图像文件只有一个白色星星），因此会显示出下面的背景颜色；图像只出现在内容区和内边距下面，不会在边框和外边距中出现；图像会默认重复很多次；url中可以写相对路径或绝对路径；url路径两边不需要加引号，这点与Web字体规则的src属性中的url不同。

修正背景图像

由于背景图像默认重复，我们需要进行修正。

background-repeat属性可以做到这一点，另外还可以通过background-position属性进行图像定位。

.guarantee{

line-height:1.9em;/*设置行高为文字大小的1.9倍*/

font-style:italic;/*设置文字为斜体*/

font-family:Georgia,"Time New Roman",Times,serif;/*设置字体系列，注意含有空格的字体要加引号*/

color:#444444;/*设置字体颜色*/

border-color:black;  /*指定边框颜色为黑色*/

border-width:1px;/*指定边框宽度为1像素*/

border-style:solid;/*指定边框为实线*/

background-color:#a7cece;/*为该类中的元素设置背景色*/

padding:25px;/*在该类中的元素内容四周（包括上下左右）设置25像素宽度的内边距*/

margin:30px;/*在该类中的元素边框四周（包括上下左右）设置30像素宽度的外边距*/

background-image:url(images/background.gif);/*增加背景图像*/

background-repeat:np-repeat;/*设置背景图像不重复*/

background-position:top left;/*设置背景图像在左上方*/

}

效果图7

background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top、left、right、bottom和center。以后会进一步讨论。

默认地，图像会“平铺”，也就是反复重复来填满整个背景空间。background-repeat属性可以控制这种平铺行为。

background-repeat:no-repeat;/*图像显示一次，不重复*/

background-repeat:repeat-x;/*图像只在水平方向上重复*/

background-repeat:repeat-y;/*图像只在垂直方向上重复*/

background-repeat:inherit;/*按父元素的设置来处理*/

---

一步步地来做，发现还挺有意思的；

每天都在进步，加油！