行内方式、内嵌方式、链接方式、导入方式
1 )行内方式
直接对 HTML 标签适用 style="",例如:
1.<p style="color:#F00; background:#CCC; font-size:12px;"></p>
虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置 style 属性,所以会导致
HTML 页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。
2 )内嵌方式
将 CSS 代码写在<head></head>之间,并且用<style></style>进行声
明,例如:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5.<title>无标题文档</title>
6.<style type="text/css">
7.<!--
8.#div1{width:64px; height:64px; float:left;}
9.#div1 img{width:64px; height:64px;}
10.-->
11.</style>
12.</head>
13.<body>
14.<div id="div1"><img
src="http://www.cssxuexi.cn/index/images/ico/2days.gif" /></div>
15.</body>
16.</html>
即使有公共 CSS 代码,但每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护也大,如果文件很少,CSS 代码也不多 ,
这种方式还是很不错的。
3 )链接方式
链接方式是使用频率最高,最实用的方式,只需要在<head></head>之间加上
1.<link href="style.css" type="text/css" rel="stylesheet" />,就可以了,这种方式将 HTML 文件和 CSS 文件彻底分成两个或者多个文件,实现了页面框架 HTML 代码与美工 CSS 代码的完全分离,使得前期制作和后期维护都十分方便,并且如果要保持页面风格统一,只需要把这些公共的 CSS 文件单独保存成一个文件,其他的页面就可以分别调用自身的 CSS 文件,如果需要改变网站风格,只需要修改公共 CSS 文件就OK 了,相当的方便,这才是我们 xHTML+CSS 制作页面提倡的方式。
2.HTML 代码
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5.<title>无标题文档</title>
6.<link href="style.css" type="text/css" rel="stylesheet" />
7.</head>
8.<body>
9.<div id="div1"><img
src="http://www.cssxuexi.cn/index/images/ico/2days.gif" /></div>
10.</body>
11.</html>
CSS 代码
1.#div1{width:64px; height:64px; float:left;}
2.#div1 img{width:64px; height:64px;}
4) 导入方式
导入样式和链接样式比较相似,采用 import 方式导入 CSS 样式表,在 HTML 初始化时,会被导入到 HTML 文件中,成为文件的一部分,类似第二种内嵌方式。不建议使用
第二:四种样式的优先级
四种样式的优先级别是(从高至低): 行内样式、内嵌样式、链接样式、导入样式。