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元素。

这里就不做示例了。