CSS 加载方式有几种？
外部样式表(推荐)
-
link
将CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的 <link> 元素中引用它。
示例：<link rel="stylesheet" href="style.css"> -
@import
用于从其他样式表导入样式规则。
示例：@import 'index.css';
这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式，并且需要更新 CSS 的时候只要在一个地方更新。
内部样式表
内部样式表是指不使用外部 CSS 文件，而是将你的 CSS 放置在<style>元素中，该元素包含在 HTML head 内。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
这在某些情况下很有用（也许你正在使用一个内容管理系统，不能直接修改 CSS 文件），但它不如外部样式表高效 —— 在网站中，CSS 将需要在每个页面重复，并且需要更新时要更改的多个位置。
内联样式
内联样式是仅影响一个元素的CSS声明，被 style属性包括着。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
在非必要，否则不要这么做！这很难维护（你可能不得不在每份文档里更新多次同样的信息），并且它还混合了 CSS 表示的样式信息和 HTML 的结构信息，使 CSS 难以阅读和理解。保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。
您唯一可能需要使用内联样式是当您的工作环境真的非常受限（也许您的CMS只允许您编辑 HTML 的 body）。
@charset有什么作用？
指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。示例 @charset "utf-8";若文件编码和页面不一致的话，则会出现乱码。
@import有什么作用？如何使用？
用于从其他样式表导入样式规则。语法：
@import url;
@import url list-of-media-queries;
其中:
url
是一个表示要引入资源位置的 <string>或者<uri>。 这个URL可以是绝对路径或者相对路径。 要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择
list-of-media-queries
是一个逗号分隔的 媒体查询条件列表，决定通过URL引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。
id 选择器和 class 选择器的使用场景分别是什么？
两者异同：
两者都可以选择到DOM节点并添加样式。不同在于元素的ID属性具有唯一性，一个元素只能添加一个id选择器，而一个元素可以有多个class。ID选择器的优先级是高于class选择器的。
使用技巧：
在编写样式时尽量使用类选择器，即使该DOM节点可能只出现一次。因为ID选择器的优先级比类选择器高,在后期样式的控制中会越来越难控制。也许有人会问：我可不可以全篇都使用ID选择器，那么就不存在和类选择器比较优先级了。理论上这是可以的，但是请注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本。
既然有了类选择器为什么还要规定一个ID选择器？
在一个完整的HTML+CSS+JavaScript的页面体系中，对一个DOM节点的ID使用最多的其实是JavaScript(因为通过ID能唯一的确定DOM节点，方便控制),CSS中的使用的ID选择器一般情况下只会添加少量样式，更多对DOM节点的样式控制都是使用类选择器,既能够产生样式叠加,又方便后期的维护。请尽量避免在CSS中使用大量的ID选择器
常规情况下，CSS中会出现大量的ID选择器的情况——JavaScript插件配套的样式表中。
CSS选择器常见的有几种？
http://www.jianshu.com/p/67c6ba93787f
伪类选择器有哪些？伪元素有哪些？
CSS伪类是用来添加一些选择器的特殊效果。
http://www.jianshu.com/p/67c6ba93787f
以下选择器分别是什么意思?
#header{
}/*匹配id为header的元素*/
.header{
}/*匹配header类的元素*/
.header .logo{
}/*匹配header类下所有的后代（不只是子元素、子元素向下递归）logo类元素*/
.header.mobile{
}/*匹配同时为header类和mobile类的元素*/
.header p, .header h3{
}/*匹配header类下p标签和h3标签*/
#header a:hover{
}/*匹配鼠标悬停其上的id为header的元素下的a元素*/
#header .logo~p{
}/*匹配id为header下的logo类的所有相邻的标签p*/
#header .logo+p{
}/*匹配id为header下的logo类的直接相邻的标签p*/
#header .logo p{
}/*匹配id为header下的logo类的所有子标签p*/
#header .logo>p{
}/*匹配id为header下的logo类的直接子标签p*/
#header p.logo{
}/*匹配id为header下同时为logo类和标签p的元素*/
#header .logo.p{
}/*匹配id为header下同时为logo类和p类的元素*/
#header input[checked]{
}/*匹配id为header下input标签中attr为checked的元素*/
选择器的优先级是如何计算的？
优先级从高到低：
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
计算方法：
- 获取选择器中ID选择器的个数，赋值给a
- 获取选择器中类选择器，属性选择器([type="text"])和伪类选择器(:hover)的个数，赋值给b
- 获取选择器中标签(type)选择器和伪元素选择器(::before)的个数，赋值给c
- 通用选择器(*)不占优先级权重
将abc三个数串联成一个基数绝对大的数字(既无论数字再大也不进位)。
Examples:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
如果两个specificity值一样呢？那自然是看样式表中出现的先后顺序，后者可以覆盖前者的样式。
注：写于HTML中行内的样式(style="width:100px")总会覆盖外部样式表的样式，具有绝对的优先级。
参考： https://www.w3.org/TR/css3-selectors/#specificity
网友评论