引入外部css的方法:1。使用link调用外部css文件,标签定义文档与外部资源的关系;2.使用@import引用外部CSS文件。
本文操作环境:Windows7系统,css3版本,戴尔G3电脑
【资料图】
如何引入外部css?
方法1:使用链接调用外部css文件。
在网页的head/head标记对中,使用链接标记引入外部样式表文件,并使用html规则引入外部css。
链接标签定义了文档和外部资源之间的关系。链接标签最常见的用途是链接样式表。
语法:
链接rel="样式表" href="css文件路径" type=" text/css "/链接外部CSS样式时链接标记的内容结构说明:
Href:是外部资源的地址,这里是css的地址。
Rel:定义当前文档和链接文档之间的关系,这里是外部css样式表,或样式表。
Type:指定链接文档的MIME类,其中的值为text/css。
描述:
这个方法在网页文件主体加载之前加载CSS文件,所以显示的网页从一开始就有样式的效果。它不会先显示没有样式的网页,然后像导入的网页一样显示样式化的网页。
方法2:使用@import引用外部CSS文件。
CSS @import rule,用于从其他样式表中导入样式规则。这些规则必须优先于所有其他类型的规则。@import不能用于条件组的规则中。
@导入规则语法
@导入url("文件路径");描述:
这种方法会在整个网页加载后加载CSS文件,导致出现问题。如果网页很大,它会先显示没有样式的页面,然后网页的样式会在一瞬间出现。这是进口的固有缺陷。
调用外部css样式的两种方法之间的区别:
@import是CSS提供的语法规则,只服务于导入样式表;链接HTML提供了一个标签,不仅可以加载CSS文件,还可以定义RSS、rel连接属性等。
页面加载时,同时加载链接标签引入的CSS@import引入的CSS会在页面加载后加载。
@import是只有CSS2.1才有的语法,所以只能在IE5中识别。链接标签是HTML元素,不存在兼容性问题。
可以通过JS操作DOM,插入链接标签改变样式;因为DOM方法是基于文档的,所以不能使用@import来插入样式。
link引入的样式的权重大于@import引入的权重。
推荐:《css视频教程》以上是如何对外介绍css的细节。更多信息请关注php中文网站其他相关文章!
来源:php中文网站
关键词: