CSS层叠样式的学习[1]

CSS样式入门

1.连接到一个外部的样式表

数据挖掘研究院

将一个外部的样式表加入到HTML网页中使用下列的格式： 数据挖掘实验室

<LINK REF=  HREF=  TYPE=   MEDIA=> 数据挖掘实验室

<LINK>标记放置到文档的head部分。 数据挖掘研究院

其中REF属性用于定义的连接文件与HTML文档之间的联系。REL=StyleSheet指定一个固定的首选样式。固定样式在样式表被激活时总是被应用。网页制作者不能指定多于一个的首选样式。 数据挖掘实验室

交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表。 数据挖掘研究院

注意现在的浏览器一般都缺乏选择交互样式的能力。

数据挖掘研究院

单一的样式也可以通过多个样式表给出

数据挖掘研究院

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"> 数据挖掘研究院

在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。

数据挖掘研究院

可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型 数据挖掘研究院

<LINK>标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有 数据挖掘研究院

• screen (缺省值)，提交到计算机屏幕；
• print， 输出到打印机；
• projection，提交到投影机；
• aural，扬声器；
• braille，提交到凸字触觉感知设备；
• tty，电传打字机 (使用固定的字体)；
• tv，电视机；
• all，所有输出设备。

当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。 数据挖掘研究院

2.嵌入一个样式表一个样式表可以使用STYLE元素在文档中嵌入: 数据挖掘研究院

一个样式表可以使用STYLE元素在文档中嵌入: 
数据挖掘研究院
 

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。 
数据挖掘研究院
 

旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面，像上述例子那样。 
数据挖掘研究院
 

嵌入的样式表可用于当一个文档具有独一无二的样式的时候（即只有少数网页需要这样的样式时）。如果多个文档都使用同一样式表，那么外部样式表会更适用。（当一个网站需要统一样式时，则用连接一个外部的样式表（方法一）比较方便，更能优化网站的速度与维护） 数据挖掘实验室 

 数据挖掘实验室