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元素。
这里就不做示例了。