CSS实际上如何工作？
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：
- 浏览器将HTML和CSS转化成DOM（文档对象模型）。DOM在计算机内存中表
示文档。它把文档内容和其样式结合在一起。浏览器显示 DOM 的内容。
CSS工作原理图
CSS 加载方式有几种
外部样式表（推荐）
- 通过 <link> 引入 CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
- 通过 @import 引入样式，放入 css 中（不要忘记分号）
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
内部样式表
将 CSS 放在页面的<style>元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
p { background: red; }
</style>
</head>
<body>
<p>Hello CSS!</p>
</body>
</html>
内联样式
不推荐，但在某些情况下很有用。
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
@charset有什么作用
@charset "utf-8";
@charset CSS @规则, 指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而且前面不得有任何字符。
如果有多个@charset @规则被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的字符集相关<style>元素内的样式属性内使用。
此 @规则 在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 content
。
再比如CSS注释中，如果使用了中文，不加以指定字符编码，若和编码不一致，则可能在浏览器中显示乱码：
@charset "UTF-8";
@import "style2.css";
h1 {
color: blue;
}
/*****
我是注释
*****/
@import有什么作用？如何使用？
@import 'style.css';
@importCSS @规则 , 用于从其他样式表导入样式规则，告诉 CSS 引擎引入一个外部样式表。这些规则必须先于所有其他类型的规则，@charset规则除外; 因为它不是一个嵌套语句。
@import 可以在HTML元素或者<style>元素内的样式属性内使用。
参考MDN文档：@import
id 选择器和 class 选择器的使用场景分别是什么？
id 就像是一个公民的身份证号，代表大的分类，尽量不要滥用id选择器，
class代表标签，一个人可以有很多个标签，大学生，男生，单身狗，高富帅。
一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类：
<ul>
<li class="first done">起床</li>
<li class="second done">刷牙</li>
<li class="third">洗脸</li>
</ul>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
CSS选择器常见的有哪几种?
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link代表一个未访问过的链接；
a:hover代表处于鼠标指向状态下的链接；
a:active，代表鼠标点击下去未松手；
a:visited，代表访问过的链接，一般用不同的颜色表示，未访问，和已访问。
所以正常的逻辑顺序，是 LVHA，可以爱恨原则，记忆~~L(O)V(E)/HA(TE）
原因：
在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。如果按照标题上的顺序，把visited放在了hover的后面，那么当鼠标移动到访问过的链接上面时，便没有了hover 的效果，显然我们是希望无论是否访问过，都应该有hover效果的。
解释下列选择器含义
.item+p {color: red}
选中匹配class属性中包含item的元素的下一相邻p元素，将颜色设为红色
.item~p {color: yellow}
选中匹配class属性中包含item的元素的下N个相邻p元素，将颜色设为黄色
.item p {color: blue}
之间有空格表示，选中匹配class属性中包含item的元素的后代p元素，将颜色设为红色
p.item {color: blue}
之间没有空格表示，选中同时匹配p元素和class属性中包含item的元素，将颜色设为蓝色
.item>p{color: blue}
选中class属性中包含item的元素的直接子元素p元素，将颜色设为蓝色
em、rem分别是什么？
px、em、rem 都是CSS中的单位：
- px像素（Pixel）相对长度单位。像素px是相对于显示器屏幕分辨率而言的；
- em相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸；
- rem是CSS3新增的一个相对单位（root em，根em），rem 和em 不同在于，相对于HTML根元素。
参考：彻底弄懂css中单位px和em,rem的区别——博客园leejersey
颜色有几种写法？
- 使用一个关键字，如blue;
- 使用RGB ,如 #808080; 或rbg（255,0，51）
- 使用HSL 圆柱坐标，如 hsl(30, 100%,50%)；
- 其他还有rgba()以及hsla()，这是在rgb和hsl基础上增加了阿尔法通道，即颜色的透明度。
网友评论