CSS是在HTML结构上进行装潢，使HTML网页更富表现力。
一、CSS样式单的基本使用
CSS样式单可以控制HTML文档的显示。但在控制文档的显示之前，首先应在需要显示的HTML文档中导入CSS样式单，有如下4中使用样式单的方式。
1.链接外部样式文件（最常用）：
这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一批样式可控制多份文档。
引入外部样式文件应在<head…/>元素中增加如下<link…/>子元素；
<link href="CSS样式文件的URL" rel="stylesheet" type="text/css"/>
2.导入外部样式文件：这种方式与上一中方式类似，只是使用@import来引入外部样式单。
@import url (样式单地址) sMedia ;
代码示例：
HTML中
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!--<title>链接外部CSS样式单</title>--> <title>导入外部CSS样式单</title> <!--引入 outer.css样式表单文件--> <!--<link href="outer.css" rel="stylesheet" type="text/css"/>--> <!--导入外部样式单--> <style type="text/css"> @import "outer.css"; </style> </head> <body> <table> <tr> <td>这是练习</td> </tr> <tr> <td>日后会在我的网址</td> </tr> <tr> <td>展示链接</td> </tr> </table> </body>
outer.css中
/*设置整个表格的背景色*/ table{ background-color:#003366; width:400px; } /*设置单元格的背景色、字体等*/ td{ background-color:#fff; font-family:"楷体_GB2312"; font-size:20pt; text-shadow:0 6px 2px #333; }
3.使用内部样式定义：
这种方式是通过HTML文档头定义样式单部分来实现的，这种方式下，每批CSS样式只控制一份文档。
内部CSS样式需要放在<style…/>元素定义，<style…/>元应放在<head…/>元素内。
<style type="text/css"> 样式单文件定义 </style>
示例：
<head> <meta http-equiv="Content-Type" content="text/html";charset="UTF-8"/> <title>内部样式单</title> <style type="text/css"> table{ background-color:#036; } td{ background-color:#0ff; font-family:"楷体_GB2312"; font-size:20pt; text-shadow:-8px 6px 2px #f00; } .title{ font-size:18px; color:#60C; height:30px; width:200px; border:3px solid #0f0; } </style> </head>
4.使用行内样式：
这种方式将样式行内定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现，每份CSS样式只控制单个HTML元素。
这里就不做示例了。
