传统的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>

ul{}{
    margin:0;
    padding:0;
    list-style-type:none;
}

/**//*无序链表的链接CSS设置开始*/
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;
}

ul a:visited{}{
    background:#efb57c;
    border:2px outset #efb57c;
}

ul a:focus{}{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:hover{}{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:active{}{
    background:#bb8e60;
    border:2px outset #bb8e60;
}
/**//*无序链表的链接CSS设置结束*/
li{}{    
    padding-left:10px;
}

<%@ page contentType="text/html; charset=UTF-8" %>

<ul>    
<li><a href='ShowPage?page=addTag'>添加類別</a></li>
<li><a href='ViewTag'>查看類別</a></li>
<li><a href='ShowPage?page=addAccount'>添加賬目</a></li>
<li><a href='ViewAccount'>逐条查看賬目</a></li>
<li><a href='ShowPage?page=summary'>统计</a></li>
<li><a href='PeriodSummary?period=year'>每年统计</a></li>
<li><a href='PeriodSummary?period=month'>每月统计</a></li>
<li><a href='PeriodSummary?period=day'>每日统计</a></li>
</ul>

用出来效果还是挺好看的。

Xhtml中提供了一些有用的元素用来在表单中增加结构和定义，它们是fieldset，legend和label。
Fieldset用来给相关的信息块进行分组，它在表现上类似于Swing中的border和VS中的frame。
Legend用来标识fieldset的用户，它相当于border的标题文字。
Label元素可以用来帮助添加结构和增加表单的可访问性，它用来在表单元素中添加有意义的描述性标签。

fieldset，legend和label的例图

页面代码

<form method=post action="#" onsubmit="return checkForm()">
<table width=200 bgcolor="#f8f8f8">
  <tr><td>
  <fieldset><legend>用户注册</legend>
    <p><label for="name">用户名:</label><input type="text" name="name"
     value="" /></p>
    <p><label for="pswd">密码:</label><input type="text" name="pswd"
     value="" /></p>
    <p><label for="pswd">再次输入密码:</label><input type="text" name="pswd2"
     value="" /></p>
    <p><input type="button"
     value="注册"/></p> 
    </fieldset>
  </td></tr>
</table>
</form>

未加样式的效果

样式表中的设定

fieldset{
  margin:1em 0;
  padding:1em;
  border:1px solid #ccc;
  background:#f8f8f8;
}

legend{
  font-weight:bold;
}

label{
  display:block;
}

其中值得注意的是label的display属性设置为了block。Label默认是行内元素，但将display属性设置为了block后使其产生了自己的块框，是自己独占一行，因此输入表单就被挤到了下一行，形成了下图的效果。

加入上述样式的效果

More…

表单元素因为输入数据的限制经常宽度不一，当需要个别调整大小是可以这样设置：
<input type="text" name="negetiveinteger"
value="-1" style="width: 200px; height: 20px" />

加入必填字段的标识

在许多表单中有必填字段，我们可以在label中使用Strong来表示出来。代码如下：
<label for="letterOrInteger">ID:<strong class="required">(必填字段)</strong></label>
样式设定如下：
.required{
font-size:12px;
color:#760000;
}

表单反馈效果

表单反馈样式及页面代码

fieldset{
  margin:1em 0;
  padding:1em;
  border:1px solid #ccc;
  background:#f8f8f8;
}

legend{
  font-weight:bold;
}

label{ 
  width:100px;
}

.feedbackShow{
  position:absolute;
  margin-left:11em;
  left:200px;
  right:0;
  visibility: visible;
}

.feedbackHide{
  position:absolute;
  margin-left:11em;
  left:200px;
  right:0;
  visibility: hidden;
}

.required{
  font-size:12px;
  color:#760000;
}

<table width=100% bgcolor="#f8f8f8">
  <tr><td>
    <fieldset><legend>员工信息</legend>
    <p><label for="letterOrInteger">ID:<strong class="required">(必填字段)</strong></label><span id="idMsg" class="feedbackHide">这里必须输入英语或数字</span><input type="text" name="letterOrInteger"
      value="" style="width: 200px; height: 20px" /></p>
    <p><label for="character">姓名:</label><span id="nameMsg" class="feedbackHide">这里必须输入汉字</span><input type="text" name="character"
      value="" style="width: 200px; height: 20px" /></p>
    <p><label for="email">邮件:</label><span id="emailMsg" class="feedbackHide">这里必须输入符合邮件地址的格式</span><input type="text" name="email"
      value="" style="width: 200px; height: 20px" /></p>
    <p><input type="submit"
      value="提交" style="width: 100px; height: 25px"/></p>
    </fieldset>
  </td></tr>
</table>

JavaScript验证代码

/**
* 检查验证
*/
function checkForm(){
  // 英数字验证
  var letterOrInteger=$("letterOrInteger").value;
  if(isLetterOrInteger(letterOrInteger)==false){
    $("letterOrInteger").focus();
    $("idMsg").className="feedbackShow";
    return false;
  }
  else{
    $("idMsg").className="feedbackHide";
  }
 
  // 汉字验证
  var character=$("character").value;
  if(isCharacter(character)==false){
    $("character").focus();
    $("nameMsg").className="feedbackShow";
    return false;
  }
  else{
    $("nameMsg").className="feedbackHide";
  }
 // 邮件验证
  var email=$("email").value;
  if(isEmail(email)==false){
    $("email").focus();
    $("emailMsg").className="feedbackShow";
    return false;
  }
  else{
    $("emailMsg").className="feedbackHide";
  }

  return false;
}

Tomcat示例工程下载：
http://www.blogjava.net/Files/junglesong/CssTest20080305000633.rar