如何实现外部引入css

这篇文章将为大家详细讲解有关如何实现外部引入css,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专注于会昌企业网站建设,自适应网站建设,成都做商城网站。会昌网站建设公司,为会昌等地区提供建站服务。全流程按需网站设计,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

外部引入css的方法:1、使用link来调用外部的css文件,标签定义文档与外部资源的关系;2、使用@import引用外部CSS文件。

本文操作环境:Windows7系统、css3版、Dell G3电脑

怎么引入外部css?

方法1:使用link来调用外部的css文件

在网页的标签对中使用标记来引入外部样式表文件,使用html规则引入外部css。

标签定义文档与外部资源的关系, 标签最常见的用途是链接样式表。

语法:

链接外部css样式时候link标签的内容结构解释:

href:为外部资源地址,这里是css的地址

rel:定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet

type:规定被链接文档的 MIME 类,这里是值为text/css

说明:

这种方法会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页。

方法2:使用@import引用外部CSS文件

CSS @import规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@import不能在条件组的规则中使用。

@import规则语法

@import url("文件路径");

说明:

这种方法会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

两种调用外部css样式方法的区别:

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

link引入的样式权重大于@import引入的样式。

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

关于“如何实现外部引入css”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:如何实现外部引入css
网站网址:http://ybzwz.com/article/jepdes.html