添加层叠样式表的四种方法

来源：互联网发布：矩阵潜袭新手编辑：程序博客网时间：2024/06/05 03:34

我们为网页添加样式表的方法有四种。

1．最简单的方法是直接添加在HTML的标识符（tag）里：

<Tag style=”properties”>网页内容</tag>

举个例子：

<p style=”color: blue; font-size: 10pt”>CSS实例</p>

代码说明：

用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。

2．添加在HTML的头信息标识符<head>里：

<head>

<style type=”text/css”>



</style>

</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“”。

3．链接样式表

同样是添加在HTML的头信息标识符<head>里：

<head>

<link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>

</head>

*.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀。

Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围：

·Screen（默认）：输出到电脑屏幕

·Print：输出到打印机

·TV：输出到电视机

·Projection：输出到投影仪

·Aural：输出到扬声器

·Braille：输出到凸字触觉感知设备

·Tty：输出到电传打字机

·All：输出到以上所有设备

如果要输出到多种媒体，可以用逗号分隔取值表。

Rel属性表示样式表将以何种方式与HTML文档结合。取值范围：

·Stylesheet：指定一个外部的样式表

·Alternate stylesheet：指定使用一个交互样式表

4．联合使用样式表

同样是添加在HTML的头信息标识符<head>里：

<head>

<style type=”text/css”>



</style>

</head>

以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

需要注意的是：

·联合法输入样式表必须以@import开头。

·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。