2.2 CSS常用属性
CSS的引入以及构成在上述章节中已经介绍过了，从本节开始进入CSS的应用核心部分，即常用属性的介绍。CSS的常用属性很多，本书中主要介绍CSS背景属性、文本属性、字体属性、列表属性、边距属性等。
2.2.1 CSS背景属性
CSS可以用来修饰整个页面的背景或者某个标签的背景，其属性主要包括：添加图像作为背景、设置背景为某种底色以及指定背景出现的位置等，具体见表2-1。
表2-1 CSS背景属性
下面通过一个实例来熟悉一下关于“添加背景图”属性的使用。
2-12.xhtml
<html>
<head>
<title>添加背景图</title>
<style type="text/css">
p {background-color:grey;}
body {background-image:url(top.JPG);
background-repeat:repeat-y;
background-position:10% 60%;
}
</style>
</head>
<body>
<p>给我加点颜色吧！</p>
</body>
</html>
上述代码为p标签加了段落底色为灰色，为整个页面body添加了背景图片并且指定为y轴方向上重复，起始位置使用百分比后效果如图2-1所示：
图2-1 背景属性使用
2.2.2 CSS文本属性
CSS文本属性主要用于定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、文本对齐方式、下划线、首行缩进等，具体见表2-2。
表2-2 CSS文本属性
下面通过一个实例来熟悉一下关于文本属性的使用。
2-13.xhtml
<html>
<head>
<title>文本属性应用</title>
<style type="text/css">
p.one {text-indent:5px;}
p.two {word-spacing:30px;}
h1 {letter-spacing:10px;}
</style>
</head>
<body>
<p class="one">这是第一段话，需要缩进5像素。</p>
<p class="two">这是第二段话，需要将字符间距设置为30像素。
</p>
<h1>this is header</h1>
</body>
</html>
上述代码使用基于类的元素选择器进行修饰，第一段缩进5px，第二段字符间距为30像素，h1标签内容字母间距10px，效果如图2-2所示。
图2-2 CSS文本属性
2.2.3 CSS字体属性
CSS字体属性主要定义网页中文字的效果，包括字形、字号等，具体参见表2-3。
表2-3 CSS字体属性
下面通过一个实例来熟悉一下关于字体属性的使用。
2-14.xhtml
<html>
<head>
<title>字体属性</title>
<style type="text/css">
body {font-family: sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p> CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字
母）。在 CSS 中，有两种不同类型的字体系列名称：</p>
<p>通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；</p>
<p>特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）；</p>
</body>
</html>
上述代码使用元素名选择器进行CSS修饰，整个页面中的文字统一选择一种字体、字号、倾斜加粗来显示，效果如图2-3所示。
图2-3 CSS文字属性
2.2.4 CSS列表属性
CSS列表属性主要针对列表标签进行修饰，包括标志位置、标志类型等，具体见表2-4。
表2-4 CSS列表属性
下面通过一个实例来熟悉一下关于列表属性的使用。
2-15.xhtml
<html>
<head>
<title>列表属性</title>
<style type="text/css">
ul.dec {
list-style-type:square;
list-style-position:inside;
}
</style>
</head>
<body>
<ul class="dec">
<li>软件工程系</li>
<li>网络工程系</li>
<li>计应工程系</li>
<li>智能工程系</li>
</ul>
<ul>
<li>软件工程系</li>
<li>网络工程系</li>
<li>计应工程系</li>
<li>智能工程系</li>
</ul>
</body>
</html>
上述代码第一次出现的ul增加了class属性并进行列表修饰，第二次出现的ul标签照原样显示，可以增加对比效果，如图2-4所示。
图2-4 列表属性
2.2.5 CSS边距属性
CSS将每个标签都看作是一个盒子，所以就出现了盒子内部的距离设置以及盒子与盒子之间的外部距离的设置，因此边距属性是出现频率最高的。具体参见表2-5。
表2-5 CSS边距属性
下面通过一个实例来熟悉一下关于边距属性的使用。
2-16.xhtml
<html>
<head>
<title>边距属性</title>
<style type="text/css">
h1.one {
padding-top:10px;
padding-right:10px;
padding-bottom:5px;
padding-left:20%;
}
h1{
background:red;
}
</style>
</head>
<body>
<h1 class="one">按照上右下左的顺序设置内边距</h1>
<h1>按照上右下左的顺序设置内边距</h1>
</body>
</html>
上述代码中h1标签出现了两次，第一次出现的标签进行内边距设计，第二次出现的标签保持原始状态，便于对比，效果如图2-5所示。
图2-5 CSS边距属性
2.2.6 CSS边框属性
CSS边框属性主要针对表格或者需要明确划分区域等情况下，主要包括是否显示边框、边框样式、宽度以及颜色等，具体见表2-6。
表2-6 CSS边框属性
下面通过一个实例来熟悉一下关于边框属性的使用。
2-17.xhtml
<html>
<head>
<style type="text/css">
p {
border-style:solid;
border-width:10px;
border-color:blue;
}
</style>
</head>
<body>
<p>为本段话加实线边框，宽度为10像素，蓝色。</p>
</body>
</html>
上述代码为p标签添加实线边框，宽度为10像素，蓝色，效果如图2-6所示。
图2-6 CSS边框属性
2.2.7 CSS定位
CSS的定位功能非常强大，它允许开发人员按照自己的意图将特定标签放置到页面中任意指定位置。CSS针对页面内容的定位提供了一系列属性，利用这些属性，可以灵活实现各种布局。具体见表2-7。
表2-7 CSS定位
CSS定位在使用过程中，根据不同标签间的定位关系又可划分为绝对定位和相对定位等，下面先用一个实例熟悉一下相对定位。
2-18.xhtml
<html>
<head>
<title>相对定位</title>
<style type="text/css">
h2.left{
position:relative;
left:-20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="left">这个标题相对于其正常位置向左移动</h2>
<p>相对定位会按照元素自身的原始位置对该元素进行移动。</p>
</body>
</html>
相对定位指的是标签将自己原始位置看作原点进行各个方向的移动，上述代码第一次出现的h2显示的位置为正常效果，第二次出现的h2根据自身原始位置做了相对定位，即在自己原始位置的基础上向左（负数）移动20像素。效果如图2-7所示。
图2-7 相对定位
下面再来认识一下CSS绝对定位。
2-19.xhtml
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
h2{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是带有绝对定位的标题。绝对定位的元素位置相对于最近的已定位祖先元素，如果没有，那
么它的位置相对于最初的包含块。</h2>
</body>
</html>
绝对定位的原点不再是自身，而是看相隔最近的一个已经定位的元素。上述代码中只有一个标签进行了定位，因此它是根据包含自己的标签（即body）所在的位置来定位，效果如图2-8所示。
图2-8 绝对定位
2.2.8 CSS浮动
网页中各项内容显示的位置可以通过三种方式来实现，第一种就是上面讲过的定位，也是最精确的一种；第二种则是普通流，即元素的位置由元素在XHTML中的位置决定；第三种就是浮动，CSS浮动框就不再属于普通流范围，因此更加灵活。具体见表2-8。
表2-8 CSS浮动
CSS浮动框只有碰到包含它的外部框或者另外一个浮动框才会停止，下面通过一个小实例来认识一下浮动。
2-20.xhtml
<html>
<head>
<style type="text/css">
div.left{
width:300px;
height:50px;
float:left;
border:1px;
background:red
}
div.right{
width:300px;
height:50px;
border:1px;
background:green
}
div.bottom{
width:600px;
height:50px;
border:1px;
clear:both;
background:yellow
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>
以上代码进行了三个div块与CSS结合后的布局，“left”div为红色，“right”div为绿色。如果红色div不浮动，则绿色div应该在红色方块的下方。红色div实现left浮动后，绿色div与红色出现重叠现象。如图2-9。
图2-9 浮动
思考：如果绿色div设置right浮动，那黄色div不进行clear（清除浮动）会出现什么情况？