在XHTML中CSS的意义
传统的HTML能够并已经创建了大量优秀美观使用的网页，但随着时代的发展和客户要求的逐步提高，传统HTML网页将网页的数据，表现和行为混杂的方式妨碍了自身可维护性和精确性的提高。
在XHTML中，CSS能把网页的数据和表现（主要是格式和样式规则）分隔开来，使人对网页能有更精确细致的控制，同时可维护性也变得更好，更方便。
在本文中，我们将学习CSS的相关知识。
框模型
在CSS处理网页时，它认为网页包含的每一个元素都包含在一个不可见的框中，这个框由内容（Content），内容外的内边距（padding），内边距的外边框（border）和外边框的不可见空间-外边距（margin）组成。
块级元素和行内元素
在XHTML中，元素可能是块级（block）的，也可能是行级（inline）的。
块级元素会产生一个新行（段落），而行级元素是行内的，不会产生新行（段落）。
常见的块级元素有div，p等，常见的行级元素有a，span等。
在默认情况下，元素按照在XHTML中从上到下的次序显示，并且在每个块级元素的框的开头和结尾换行。
注意：块级元素和行级元素不是绝对的，我们可以通过样式设置来改变元素的这个属性。
元素的基本属性
内边距：padding
边框：border
外边距：margin
大小：width，height
对齐：text-align
颜色：color
背景：background
使元素浮动：float
下面将讲述如何对这些元素属性进行设置。
改变元素背景
Background有以下子属性：
background-color：背景颜色，默认值transparent，输入#rrggbb即可。
background-image：背景图像，默认值none
background-repeat：背景图像的重复显示，默认值repeat（纵横重复），repeat-x（水平重复），repeat-y（垂直重复），no-repeat（使图像不并排显示）
background-attachment：默认值scroll，表示随页面滚动，如果是fixed则不随页面滚动。
background-posistion：默认值top left。
这些属性也可以统一设置，如：background:#ccc url(theadbg.gif) repeat-x left center;
例：
TABLE.Listing TH {
FONT-WEIGHT: bold;
background:#ccc url(theadbg.gif) repeat-x left center;
BORDER-BOTTOM: #6b86b3 1px solid
}
设定元素的大小
设置width和height即可，如：
width:180px;
height:50%;
注意这里可以设置绝对大小如180px也可以设置相对大小50%，其中百分数是相对与父元素的比例，父元素即容纳本元素的元素。
此外设置元素大小还可以使用min-width，max-width，max-height，min-height等，但在部分浏览器中不支持这些属性。
例：
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
Px和em的区别
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
设置元素的外边距
外边距是一个元素与下一个元素之间的透明空间量，位于元素的边框外边。
设置外边距设置margin的值即可，如margin:1;它将应用与四个边。
如果要为元素的上右下左四个边设置不同的外边距，可以设置margin-top，margin-right，margin-bottom，margin-left四个属性。
例：
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
添加元素的内边距
内边距是边框到内容的中间空间。使用它我们可以把内容和边界拉开一些距离。
设置内边距如右：padding:1px;
如果要为元素的上右下左四个边设置不同的内边距，可以设置padding-top，padding-right，padding-bottom，padding-left四个属性。
例：
li{
padding-left:10px;
}
控制元素浮动
float属性可以使元素浮动在文本或其它元素中，这种技术的最大用途是创建多栏布局（layout）
float可以取两个值：left，浮动到左边，right：浮动到右边
例：
#sidebar{
width:180px;
height:500px;
float:left;
background:#f8f8f8;
padding-top:20px;
padding-bottom:20px;
}
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
设置边框
边框位于外边距和内边距中间，在应用中常用来标示特定的区域。它的子属性有：
border-style：可以设定边框的样式，常见的有solid，dotted，dashed等。
border-width：边框的宽度。
border-color：边框颜色
border-top，border-right，border-bottom，border-left可以把边框限制在一条或几条边上。
例：
ul a{
display:block;
padding:2px;
text-align:center;
text-decoration:none;
width:130px;
margin:2px;
color:#8d4f10;
}
ul a:link{
background:#efb57c;
border:2px outset #efb57c;
}
控制元素内容的对齐
text-align属性可以让我们设置元素内容的对齐，它可以取的值有left，center，right等。
例：
body{
margin:0 auto;
text-align:center;
min-width:760px;
background:#e6e6e6;
}
#bodyDiv{
width:822px;
margin:0 auto;
text-align:left;
background:#f8f8f8;
border:1px solid #FFFFFf;
}
控制元素在父元素的垂直对齐
设置vertical-align可以控制元素在父元素的垂直对齐位置，它可以取的值有：
middle：垂直居中
text-top：在父元素中顶对齐
text-bottom：是元素的底线和父元素的底线对齐。
在网页中引入样式表
<title>"記賬系统"单项收支记录浏览页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
type="text/css" />
</head>
样式表示例
body{
margin:0 auto;
text-align:center;
min-width:760px;
background:#e6e6e6;
}
#bodyDiv{
width:822px;
margin:0 auto;
text-align:left;
background:#f8f8f8;
border:1px solid #FFFFFf;
}
TABLE.Listing {
MARGIN: 0px 0px 8px;
WIDTH: 92%;
BORDER-BOTTOM: #6b86b3 3px solid
}
#content{
width:640px;
height:500px;
float:right;
background:#f8f8f8;
}
#content h1,#content h2,#content p{
padding-left:20px;
}
#footer{
clear:both;
}
fieldset{
margin:1em 0;
padding:1em;
border:1px solid #ccc;
background:#f8f8f8;
}
如何知道页面元素对应样式表的那部分？
如果页面元素设置了id，则它对应的样式表部分是#id，如#bodyDiv。
如果页面元素设定了class，则它在样式表中寻找”元素类型.class”对应的部分，如TABLE.Listing。
如果没有写明，则元素会找和自己类型对应的样式设置，如fieldset。
注意CSS中没有大小写的区别。
例：
<div id="content">
<table id="TbSort" class="Listing" width=100% align=center>
<fieldset><legend>添加账目</legend>