使用CSS
CSS是Cascading Style. Sheet的缩写。译作「层叠样式表单」。是用于（增强）控制页面样式并允许将样式信息与网页内容分离的一种标记性语言。
你可以用以下三种方式将样式表加入您的页面。一般情况，最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
关于分号：
引号里分号（内联定义）：各属性间须有分号，最后一个，分号可忽略
中括号里的分号（非内联定义）：须有，类似于语句须结尾
1.1链入外部样式表文件(Linking to a Style. Sheet)
你可以先建立外部样式表文件（.css），然后在<head>标签中使用link对象。
示例如下：
<head>
<title>title of article</title>
<link href="res:layout.css" type="text/css"/>
</head>
如
（1）layout.css中的内容：
a{ /*类型选择符，用于控制标签（同类标签）*/
text-decoration:line-through;
text-align:right;}
a[id="headbodytail"]{ /*属性选择符，用于控制需要突出标签（同类标签中需要突出的标签）*/
text-decoration:line-through;
text-align:center;}
a[name="aa"]{
text-decoration:line-through;
text-align:left;}
#three{ /*id选择符*/
width:80%;
height:30;
text-align:left;}
.six{ /*类选择符（class）*/
width:80%;
height:50;
text-align:right;}
（2）实例中的应用：
<html>
<head>
<title>实例</title>
<link rel="stylesheet" type="text/css" href="res:css/test.css"></link>
</head>
<body>
<hr color="#ff0000" /><br size="20" />
<H3>A标签css样式导入实例</H3><br size="20" />
<a href="res:help.xhtml">类型选择符测试</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml"id="headbodytail">属性选择符测试01</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml"name="aa">属性选择符测试02</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml"id="three">id选择符测试</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml"class="six">类（class）选择符测试</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml"style=" text-decoration: line-through;">内联测试</a>
<hr color="#ff0000" /><br />
<a href="res:help.xhtml">类型选择符测试</a>
<hr color="#ff0000" /><br />
</body>
</html>
附：
link标签--当在文档中声明使用外接资源(比如CSS)时使用此标签
link标签是单独出现的
属性
href --指定需要加载的资源(CSS文件)的地址URI
media --媒体类型,参见CSS教程
rel --指定链接类型
rev --指定链接类型
type --包含内容的类型,一般使用type="text/css"
rel属性-- rel属性,描述了当前页面与href所指定文档的关系.
rel属性通常出现在a,link标签中
属性值
alternate --定义交替出现的链接
appendix --定义文档的附加信息
bookmark --书签
chapter --当前文档的章节
contents
copyright --当前文档的版权
glossary --词汇
help --链接帮助信息
index --当前文档的索引
next --记录文档的下一页.(浏览器可以提前加载此页)
nofollow --不被用于计算PageRank
prev --记录文档的上一页.(定义浏览器的后退键)
section --作为文档的一部分
start --通知搜索引擎,文档的开始
stylesheet --定义一个外部加载的样式表
subsection --作为文档的一小部分
rel是relationship的英文缩写.
1.2定义内部样式块对象(Embedding a Style. Block)
你可以在<head>标签中插入一个<STYLE>...</STYLE>块对象。
示例如下：
<head>
<title>内部样式测试</title>
<style. type="text/css">
.red{color:#ff0000;} /*类选择符（class）*/
#green{color:#00ff00;} /*id选择符*/
font{ /*类型选择符*/
color:#0000ff;
text-align:center;}
input[type="text"]{background-color:#0000ff;} /*属性选择符*/
input[type="date"]{background-color:#ff0000;}
</style>
</head>
请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。
如：实例中的应用：
<html>
<head>
<title>内部样式测试</title>
<style. type="text/css">
.red{color:#ff0000;} /*类选择符（class）*/
#green{color:#00ff00;} /*id选择符*/
font{ /*类型选择符*/
color:#0000ff;
text-align:center;}
input[type="text"]{background-color:#0000ff;} /*属性选择符*/
input[type="date"]{background-color:#ff0000;}
</style>
</head>
<body>
<font style="width:50%">内联测试（文字稍多点）</font>
<hr color="#ff0000" /><br />
<font id="green">ID选择符测试测试（文字稍多点）</font>
<hr color="#ff0000" /><br />
<font class="red">类（class）测试测试（文字稍多点）</font>
<hr color="#ff0000" /><br />
<font class="red">属性选择符测试如下</font>
<hr color="#ff0000" /><br />
<input type="text" caption="姓名" name="username" value="王二" /><br/>
<input type="password" caption="密码" name="password" value="" /><br/>
<input type="checkbox" name="hobby" value="1" caption="篮球" /><br/>
<input type="checkbox" name="hobby" value="2" caption="击剑" checked="true" /><br/>
<object type="date" name="starttime" value="15:30:50"/><br/>
<object type="time" name="starttime" value="15:30:50" readonly="true" /><br/>
</body>
</html>
1.3内联定义(Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
如：
<p style="background-color: #FFCC66;"></p>
