css就近原则_CSS的引入方式和优先级

1.CSS的引入方式

CSS一共有四种引入方式，内联样式、内部样式表、外部样式表和@import引入。

1.1 内联样式

使用style属性引入样式。

123

缺点：HTML页面不纯净，文件体积大，不利于后期维护。

1.2 内部样式表

在style标签中写CSS代码。style标签一般放在head中。

text-decoration: none;

color: black;

display: inline-block;

}

百度一下

缺点：在页面中编写CSS代码，不利于CSS代码复用，也会增加文件体积，不利于后期维护。

1.3 外部样式表

使用link标签引入CSS文件。link标签一般放在head中。

优点：实现了HTML代码和CSS代码的完全分离，使得前期制作和后期维护都很方便。

1.4 @import引入

在style标签中使用@import url('css文件')引入CSS文件。

@import "css/test.css";

/* 或者使用：*/

@import url('css/test.css');

@import引入的CSS样式，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件中的一部分，类似第二种内嵌样式。

这种方式和外部样式表一样导入CSS文件，但效率不如外部样式表，不建议使用。

2.CSS的优先级

CSS的优先级遵循就近原则，一般来说，内联样式的优先级最高，内部样式表、外部样式表和@import引入，后声明的优先。

@import "css/orange.css";

color: green;

}

123

456

任意交换style标签、link标签和@import的位置，可以发现后声明的样式会覆盖先声明的。

css就近原则_CSS的引入方式和优先级相关推荐

css就近原则_CSS 三大特性
CSS 三大特性 CSS的三个特性是指层叠性.继承性以及优先级. 一.CSS层叠性说明层叠性是多种CSS样式的叠加,是浏览器处理样式冲突的方式.在HTML中对于同一个元素可以有多个CSS样式存在, ...
css就近原则_CSS常用总结 - div-import-border - ItBoth
[HTML CSS + DIV实现整体布局1.技术目标:开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局2.什么是W3C标准? W3C:World Wide Web Cons ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
html之CSS设计（四种引入方式、各种选择器）
文章目录一.CSS简介二.四种引入方式三.CSS选择器四.练习代码本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式使用style属性引入CSS样式. 示例: <h1 style="color:red;">s ...
css就近原则_细品100道CSS知识点（上）「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录细品100道CSS知识点(上)[干货满满]本篇细品100道C ...
【HTML/CSS】CSS权重、继承及引入方式
1 CSS权重 1.1 权重规则 CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则: 权重高的样式会被应用到元素上. 如果权重相同则使用最后声明的样式. 属性后加上!i ...
CSS day1 |选择器字体文本引入方式
目录 1 css简介 1.1 html局限性 1.2 CSS-网页的美容师 1.3 css语法规范 1.4 css代码风格 2 CSS选择器 2.1 css选择器的作用 2.2 标签选择器 2.3 类 ...

css就近原则_CSS的引入方式和优先级

css就近原则_CSS的引入方式和优先级相关推荐

最新文章

热门文章