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;/*按父元素的设置来处理*/
一步步地来做，发现还挺有意思的；
每天都在进步，加油！
网友评论