您的位置:首页 - 代码 - CSS教程 - 正文
CSS扫盲(三): 怎样插入一个样式表
作者:未知 文章来源:hellobmw.com 发布时间:2007-08-02 21:49:45
怎样插入一个样式表
当浏览器读到CSS样式表后,就会按照CSS的定义来格式化HTML文档。下面给出三种插入CSS样式表的方法:

一、外部CSS样式表
当需要把某个样式应用在多个页面上时,使用一个外部的CSS是个不错的方法,你可以仅仅修改这一个CSS文件就改变整个网站的外观。每个页面必须使用

程序代码1
<link>

标签链接到CSS文件,

程序代码1
<link>

标签应该放在head区块中。

程序代码3
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head>

浏览器会从mystyle.css文件中读取样式定义并将HTML文档格式化。

外部的CSS可以使用任意的文本编辑器来编写,但不能包含HTML标签。样式表文件必须以.css扩展名保存。下面是一个CSS文件的例子:

程序代码4
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")}


程序代码5
需要注意一点
:在写属性的值时,数量和单位之间不能有空格。如果有空格,这个CSS将只能在IE浏览器下执行,其他浏览器将无能为力,因为这并不符合W3C标准。

二、内部CSS样式表
当需要每个文档都使用单独的样式时,可以使用内部CSS样式表。同样是在head区块中定义样式,不过使用的标签是

程序代码6
<style>

,例如:

程序代码7
<head> 
<style type="text/css"> 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
</style> 
</head>

注意:浏览器一般会忽略未知的标签,这意味着一个不支持

程序代码6
<style>

标签的旧版浏览器将会忽略掉这部分样式定义,而将
程序代码6
<style>

标签中的内容显示出来。不过不是没有办法,我们可以使用HTML注释来阻止旧版浏览器显示这些内容:
程序代码10
<head> 
<style type="text/css"> 
<!-- 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
--> 
</style> 
</head>

三、行内样式
行内的样式定义将内容和外观混合在一起,这会失掉样式表的很多好处。但也不是绝对不能这样使用,比如需要偶然地对某一要素的样式进行定义的时候。

行内样式只要直接在相关的标签内定义就可以了,样式可以包含任意的CSS属性。下面是如何改变段落颜色和左边空白的例子:

程序代码11
<p style="color: sienna; margin-left: 20px"> 
This is a paragraph 
</p>

程序代码12
四、多重样式表

如果几个属性(property)同时对某个相同的selector进行不同样式定义时,值(value)将会继承最具体的样式。

举例来说吧,一个外部样式表对h3这个selector定义了以下几个属性:

程序代码13
h3 
{ 
color: red; 
text-align: left; 
font-size: 8pt 
}

还有一个内部样式表这样定义:

程序代码14
h3 
{ 
text-align: right; 
font-size: 20pt 
}

如果某个使用了这个内部样式表的页面同时还链接到上面的外部样式表,那么实际上h3的属性将是:

程序代码15
color: red; 
text-align: right; 
font-size: 20pt

color的值从外部样式表中继承而来,text-alignment和font-size的值则被内部样式表的值替换。[完]

转自:http://hellobmw.com/archives/css-how-to-insert-a-style-sheet.html
热门文章
最新文章