📄 css12.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!-- A:link {text-decoration: none; color:#0072A8}
A:visited {text-decoration: none; color: #0072A8}
A:active {text-decoration: none; color: #FF0000}
A:hover {text-decoration: underline; color: FF0000}
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}-->
</style>
<meta name="keywords" content="homepage,designer,免费,html,Dhtml,CGI,DW,flash,fireworks,java,Javascript,CGI,frontpage,photoshop,free,原代码，教程">
<meta name="Author" content="kunshan,china,ajie,阿捷,ajie@nease.net">
<title>CSS中文教程--将样式表加入到HTML中</title>
</head>
<body bgcolor="#FFFFFF">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="9%"></td>
<td width="81%"><p align="center"><img src="csstop.gif" alt="csstop.gif (6568 bytes)" WIDTH="420" HEIGHT="58"></td>
<td width="10%"></td>
</tr>
<tr>
<td width="9%"></td>
<td width="81%"><table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#C0C0C0"><p align="center"><a href="index.htm">返回<font face="Arial">DHTML</font>栏目</a> <a href="../index.html">返回首页</a> 本教程译文：<a href="mailto:water_tang@126.com">Water Tang</a> 和 <a href="mailto:tian_tang@126.com">Xianzhen
Liang</a></td>
</tr>
</table>
</td>
<td width="10%"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="9%"></td>
<td width="81%"><hr color="#808080">
</td>
<td width="10%"></td>
</tr>
<tr>
<td width="9%"></td>
<td width="81%"><p align="center"><strong>将样式表加入到HTML中</strong></p>
<p><br>
--------------------------------------------------------------------------------<br>
<br>
有很多方法将样式表加入到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。
<br>
<br>
连接到一个外部的样式表 <br>
嵌入一个样式表 <br>
输入一个样式表 <br>
内联样式 <br>
CLASS属性 <br>
ID属性 <br>
SPAN元素 <br>
DIV元素 <br>
关于认证的备注 <br>
<br>
--------------------------------------------------------------------------------<br>
<br>
连接到一个外部的样式表<br>
一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:<br>
<br>
<font color="#804000"><LINK REL=StyleSheet HREF="style.css"
TYPE="text/css" MEDIA=screen><br>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css"
TITLE="8-bit Color Style" MEDIA="screen, print"><br>
<LINK REL="Alternate StyleSheet" HREF="color-24b.css"
TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen,
print"><br>
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css"
MEDIA=aural><br>
</font><br>
<LINK>标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。<br>
<br>
外部样式表不能含有任何像<HEAD>或<STYLE>这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由<br>
<br>
P { margin: 2em }<br>
<br>
组成的文件就可以用作外部样式表了。<br>
<br>
<LINK>标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有
<br>
<br>
screen (缺省值)，提交到计算机屏幕； <br>
print， 输出到打印机； <br>
projection，提交到投影机； <br>
aural，扬声器； <br>
braille，提交到凸字触觉感知设备； <br>
tty，电传打字机 (使用固定的字体)； <br>
tv，电视机； <br>
all，所有输出设备。 <br>
多样的媒体通过用逗号隔开的列表或值all指定。<br>
<br>
Netscape Navigator 4.x 错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator
4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。<br>
<br>
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate
StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个<LINK>标记，定义一个固定样式。<br>
<br>
一个首选样式会自动被应用，就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。<br>
<br>
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表。<br>
<br>
注意现在的浏览器一般都缺乏选择交互样式的能力。<br>
<br>
单一的样式也可以通过多个样式表给出<br>
<br>
<font color="#800000"><LINK REL=StyleSheet HREF="basics.css"
TITLE="Contemporary"><br>
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"><br>
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"></font><br>
<br>
在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。<br>
<br>
当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。<br>
<br>
Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY
背景图象或颜色。如果考虑到这个错误，网页制作者不妨提供另外的包括一个背景图象或颜色的结构，例如嵌入或内联样式，或使用BODY元素的BACKGROUND属性。<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>嵌入一个样式表</strong><br>
一个样式表可以使用STYLE元素在文档中嵌入:<br>
<br>
<font color="#804000"><STYLE TYPE="text/css" MEDIA=screen><br>
<!--<br>
BODY { background: url(foo.gif) red; color: black }<br>
P EM { background: yellow; color: black }<br>
.note { margin-left: 5em; margin-right: 5em }<br>
--><br>
</STYLE></font><br>
STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。<br>
<br>
旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解(<!--
comment -->)在里面，像上述例子那样。<br>
<br>
嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。<br>
<br>
<br>
--------------------------------------------------------------------------------<br>
<br>
<strong>输入一个样式表</strong><br>
一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:<br>
<br>
<font color="#804000"><STYLE TYPE="text/css" MEDIA="screen,
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -