CSS基础知识筑基( 二 ) _生活百科

<link>引入，所有引入了该css文件的页面都会生效，便于复用和统一管理。<link rel="stylesheet" href="https://www.huyubaike.com/biancheng/css文件路径" /><html><head><meta charset="utf-8"/><title>css练习HTML预览</title><link type ="text/css" rel="stylesheet" href="https://www.huyubaike.com/biancheng/css1.css" /><style type="text/css">pre{color:red;}</style><style type="text/css">@import "mystyle.css" supports(display: flex);</style></head><body><div><p style="color: blue;">一段p标签文字，使用行内样式style</p><pre>pre标签文本，使用内部样式</pre><font>font标签内容</font></div></body></html><link>和@import的区别？都可以用来加载外部css资源文件，不同点：
@import()资源类型link支持更多外部资源加载，包括css、图标@import是CSS语法，只支持导入css哪里使用？HTML页面中css文件、<style>标签里，必须是第一句加载优先级与HTML页面一同加载要等网页加载完成后才进行加载兼容性问题良好@import是CSS2.1版本的，不兼容 ie5 以下扩展性<link>支持javascript去控制其属性@import不支持JS操作，支持媒体查询2.4、层叠、优先级和继承层叠：
一个元素可应用多个样式选择器，当多条样式规则应用到同一个元素时，存在样式冲突，就出现了层叠，那到底该用谁的呢？

同级别（同选择器）的样式规则：后面的样式规则会覆盖前面的，或者也可以理解谁离元素最近就用谁，和选择器顺序无关，如<p class="d1 d2">中d1、d2的顺序无关。
谁大就用谁：其他情况就是用优先级权重来计算，谁的优先级更高（值更大）就用谁！

.d1{color: red;color: green;/* 层叠 */}.d2{color: blue;/* 层叠，同级别，最后出场的胜出！ */}优先级：选择器优先级：样式的目标越具体优先级越高：行内样式优先级（1000 ）> id（100）> class（10）>标签（1）>通用（0）。括号内是权重值，用来决策优先级。

!important：一个特殊的 CSS语法，恐怖如斯10000优先级，可以用来覆盖所有上面所有优先级和层叠，使用小心（尽量不用）！

h1{color: green !important;/* 只能用在属性上 */color: blue;}继承：
继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的。如一些布局类的（高宽、边距、边框）是默认不继承的，可以显示设置继承。一些文本类的（字体、文本样式、字体颜色）大多支持隐式继承（默认从父元素继承）。
CSS提供了五个特殊的通用属性值用来显示控制继承，每个 css 属性都可使用这些值。
属性描述inherit继承父类属性（/?n?her?t/），就是 "开启继承"，使子元素属性和父元素相同initial恢复初始值（ /??n??l/最初的），设置属性值和浏览器默认样式相同，如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit。unset自然值，将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样revert恢复，将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset 。revert-layer重置上一层，将应用于选定元素的属性值重置为在上一个层叠层中建立的值。