CSS样式的分类
CSS 样式被分为三类:内联样式、内嵌样式和外部样式表。我们来一一介绍它们。
什么是内联样式?
内联样式是指将 CSS 样式直接写在 HTML 标签内,使用样式属性来设置样式。
内联样式的使用范围很小,在开发中尽量不要使用。
什么是内嵌样式?
内嵌样式是指在 HTML 文件的 head 标签中使用 style 标签来设置 CSS 样式。
内嵌样式的使用在开发中也比较少,但是可以多用于临时样式的修正。
什么是外部样式表?
外部样式表是指将 CSS 样式单独存储到一个独立的 .css 文件中,通过链接引入到 HTML 文件中来使网站的 CSS 样式生效。
外部样式表的使用范围和重要性乃至于其技巧远高于内联和内嵌样式,毕竟作用于整个网站。
CSS 内联、内嵌和外链的权重
CSS 的样式设置不同的方法,在标签中直接设置样式、内部文件中的样式、链接的外部文件中的样式,其中的权重是有区别的。
浏览器会按照以下顺序来依据样式的权重显示效果,其权重规则为:内联样式 > ID 选择器 > 类选择器、伪类 和 属性选择器 > 元素 值 > 通用选择器。
CSS内联样式的权重是多少?
内联样式直接绑定在标签上并具有较高的优先级,所以它的权重是最高的。不过,在开发过程中不建议大量使用。
CSS内嵌样式的权重是多少?
内嵌样式的权重同样比较高,但是它只作用于当前的 HTML 页面中。
类、伪类和属性选择器的权重相同,都是相对低的。不过,在开发中类和属性选择器会使用得比较多。
CSS外链样式的权重是多少?
链接的外部样式表 和 含有很多 通用选择器 的样式表,其权重是很低的。特别的,如果一个元素被多个选择器设置了样式,那么在规则的应用上,会以 “层叠次序” 取出优先级,并以各方属性优先级得出样式规则的最终权重。
CSS 外链式的基本写法
在 HTML 文件中调用外部样式表要使用 标签, 标签要放在 元素中,而且还需要为存放 CSS 的样式表文件添加引用。
如何引用外部 CSS 样式表?
引用外部样式表要使用 标签,并且添加在 HTML 页面的 标签中。 一般情况下,CSS 文件都会存在于同一个根目录下。
例如:
```html
CSS外链式示例
```
在上面的示例代码中,通过使用 标签的 rel 属性来定义样式表,而 href 属性定义用于存储样式表的文件。