首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

【转载】在网页中引出CSS的方法

2013-03-21 
【转载】在网页中引入CSS的方法HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须通过一

【转载】在网页中引入CSS的方法

HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法,将CSS与HTML挂接在一起,才能正常工作。在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种(优先级从高到低)。

<div style="border:2px #00F solid; width:80px; height:30px;">文本内容</div>

<html> <head> <title>webpage</title> <style type="text/css"> div{ border:2px #00F solid; width:80px; height:30px; } </style> </head> <body> <div>文本内容</div> </body> </html>

这种方式对于单一的网页很方便,但是对于包含较多页面的网站,如果对每一个页面都以内嵌的方式设置各自的样式,就失去了CSS的优点,而实际上对于一个网站都编写一个单独的CSS文件,用以下两种方法引入HTML文件中。

?

3,导入式与链接式

导入式与链接式的目的都是将一个独立的CSS文件引入HTML文件,二者的区别不大,但是深入了解还是有些地方不同。

实际上,链接式是使用HTML的标记引入外部CSS文件:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>   

?而使用导入式则是使用CSS规则引入外部CSS文件

<style type="text/css">           @import"mystyle.css";    </style>  

?

这两种方法在显示效果上也略有区别:

?

1,使用链接式,会在装载页面主体之前装载CSS文件,这样显示出来的网页一开始就带有样式效果,而使用导入式时,会在整个页面加载完成后再装载CSS文件,对于网页体积较大时,可能在开始浏览时没有显示效果,等待数秒后才会显示样式。

?

2,对于一些较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放在几个CSS文件中,这样如果使用链接式,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。而使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式不具备这个性质。

?

3,如果希望通过JavaScript来动态决定引入哪个 文件,则必须使用链接式才能实现。

热点排行