什么是 CSS？
CSS（Cascading Style Sheet）是用来为网页添加样式的代码,是一种用于向用户指定文档如何呈现的语言。
CSS实际上是如何工作的？
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。分为两个阶段处理文档：
- 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算内存中表示文档。它把文档内容和其样式结合在一起。
- 浏览器显示 DOM 内容。
参考资料
CSS 的加载方式
-
外部样式表
- 通过<link>引入 CSS。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello CSS!</h1> </body> </html>- 通过
@import引入样式，放入<style>元素中，或被引用的外部 CSS 文件。
<style> @import url("styles.css"); @import url('styles.css'); @import url(styles.css); @import 'styles.css'; @import "styles.css"; @import url('landscape.css') screen and (orientation:landscape); </style> //不要忘记分号
注：一定要注意引入文件的路径
-
内部样式表
将CSS放在页面的<style>元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
h1 { background: orange; }
</style>
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
-
内联样式
不推荐，但在某些情况下很有用（单独对某个标签使用特殊的样式）。
<p style="background: orange; font-size: 24px;">Hello World!<p>
缺点：大量使用会使页面看起来很复杂， 且不利于更改样式。
-
属性样式
不推荐，太过时啦。
@charset 是什么，有什么作用？
- 在 CSS 文件中使用
@charset "utf-8"，告诉浏览器使用"utf-8"的格式解码。原理和我们在HTML中使用<meta charset="utf-8">类似。 - CSS 中
@charset "utf-8"会对我们的中文注释产生影响，当在线上预览 CSS 文件时，使用@charset "utf-8"以防使我们的中文注释变成乱码。 - 当在选用的字体，使用中文时，
@charset "utf-8"能够使浏览器正确识别中文字体。
例如：font-family: '微软雅黑';
若不使用 @charset "utf-8"应当尽量保证 CSS 文件中不要出现中文。
@import有什么作用？如何使用？
@import通常用来将外部CSS文件通过<style>标签引入HTML，或将新的CSS文件引入已被HTML引用的CSS文件。
- 在HTML的
<style>标签中引入外部CSS文件
<style>
@import url("styles.css");
@import url('styles.css');
@import url(styles.css);
@import 'styles.css';
@import "styles.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
//以上几种写法都适用，但是不要忘记分号
- 在已经被HTML引用的CSS文件中引入新的CSS文件
直接在CSS文件中写
@import "styles2.css" //styles2.css为想要新增的CSS文件
CSS选择器常见的有几种?
CSS选择器用于定位我们想要给予样式的HTML元素。
- 元素选择器（Element Selectors）
p {
color:red;
}
div {
color:blue;
}
- ID 选择器（ID Selectors）
<p id="notification">通知：明天不上班！</p>
#notification {
font-size: 25px;
}
- 类选择器（Class Selectors）
一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类。
<ul>
<li class="first done">起床</li>
<li class="second done">刷牙</li>
</ul>
.first {
font-weight: bold;
}
.done{
text-decoration: line-through;
}
- 通用选择器（Universal Selector）
* {
box-sizing: border-box;
}
.flex-container * {
flex-basis: 100%;
}
- 属性选择器（Attribute Selectors）
[attr]
[attr]选择包含attr属性的所有元素，不论attr的值为何。
[disabled] {
cursor: not-allowed;
}
[attr=val]
[attr=val]仅选择attr属性被赋值为val的所有元素。
[date-color="grey"] {
color: #ccc;
}
[attr~=val]
[attr~=val]仅选择attr属性的值（以空格间隔出多个值）中包含val值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
[attr*=val]
[attr*=val]选择 attr 属性的值中包含字符串 val 的元素。
[title*="good"] {
display: none;
}
[attr^=val]
[attr^=val]选择attr属性的值以val开头（包括val）的元素。
[href^="http://"] {
background-color: #f0ad4e;
}
[attr$=val]
[attr$=val]选择attr属性的值以val结尾（包括val）的元素。
[src$="gif"] {
border: 1px solid #ccc;
}
[attr|=val]
[attr|=val]选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
[lang|="zh"] {
font-family: '微软雅黑';
}
- 组合选择器（Combinators）
A,B
A, B 选中匹配 A 或 B 的元素
.author, .famous {
font-weight: bold;
}
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>
A B
A B 选中匹配 B 且为匹配 A 的元素的后代元素。
.article a {
color: #384ebf;
}
A > B
A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。
.warriors > li {
background-image: url(../images/warrior.svg);
}
<ul class="warriors">
<li> //选中
斯蒂芬·库里
<ul>
<li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
<li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
</ul>
</li>
<li>凯文·杜兰特</li> //选中
<li>克莱·汤普森</li> //选中
<li>德雷蒙德·格林</li> //选中
</ul>
A + B
A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。
.cavs .lbj + li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li> //选中
<li>凯文·乐福</li>
</ul>
A ~ B
A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。
.cavs .lbj ~ li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li> //选中
<li>凯文·乐福</li> //选中
- 多个选择器（Multiple Selectors）
.players .player.curry, .player.mvp, #lebron-james {
background-image: url(../images/mvp.png);
}
id 选择器和 class 选择器的使用场景分别是什么？
- id选择器用于标识页面上唯一的元素，一个元素只能添加一个id选择器
- class选择器可以应用到很多元素，一个元素也可以有很多的class选择器
id可以理解为一个人的身份证号，是唯一对应的。而class可以理解为一个人的标签，#高帅富#，#律师#，#已婚#。
伪类选择器有哪些？伪元素有哪些？
- 伪类（Pseudo-classes）
CSS伪类用于向某些选择器添加特殊的效果。
语法：
selector : pseudo-class {property: value}
a:link { ... } //未访问的链接
a:visited { ... } //已访问的链接
a:hover { ... } //鼠标移动到链接上
a:active { ... } //选定的链接
li:first-child { ... } //向元素的第一个子元素添加样式。
li:last-child { ... } //向元素的最后一个子元素添加样式。
body :not(p) { ... }
p:not(.warning) { ... }
- 伪元素（Pseudo-elements）
CSS伪元素用于向某些选择器设置特殊效果。
语法：
selector:pseudo-element {property:value;}
/* Add an arrow after links */
a::after {
content: "→";
}
/* Add a heart before links */
a::before {
content: "♥";
}
::selection
应用于文档中被用户高亮的部分（比如鼠标选中的部分）。
p::selection {
color: white;
background: blue;
}
::backdrop
实验特性
::first-letter
选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。
p::first-letter {
color: red;
font-size: 130%;
}
::first-line
将样式只应用于一个块状元素的首行。
::first-line {
color: blue;
text-transform: uppercase;
}
::-webkit-input-placeholder
/* 设置 input 元素 placeholder 的字体颜色 */
input::-webkit-input-placeholder {
color: #aaa;
}
下面代码是什么意思？
.item+p {color: red} class为item的元素的子元素p的下一相邻元素字体颜色为红色。
.item~p {color: yellow} class为item的元素它的子元素p的下N个相邻元素字体颜色为黄色。
.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：
相对长度单位，像素px是相对显示器屏幕分辨率而言的。
em：
相对长度单位，元素的font-size的计算值，代表了继承的字体大小的倍数（设置父元素字体为18px，设置字体大小为2em时就相当于36px，浏览器默认字体为16px，若不设置字体大小，那2em为32px）。
常用于创建可伸缩布局，这样即使用户更改了字体尺寸也不影响页面整体布局。CSS属性line-height，font-size，margin-bottom和margin-top常用em表示值。
rem：
是CSS3新增的一个相对单位（root em，根em），默认初始值是html默认font-size大小。当为在根元素上设置font-size大小时，1rem=1em，代表根元素默认大小的倍数。
该单位常用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位。IE8及之前版本不支持rem。
颜色有几种写法？
color: 直接写颜色名，如：blue;
color: #000000~ #ffffff;
color: #000~ #fff;
color: rgb(0,0,0)~ rgb(255,255,255);
color: rgb(0%,0%,0%)~rgb(100%,100%,100%);
