MDN文档的CSS学习笔记
1. 改变元素的默认行为
当对浏览器的默认样式不太满意时，可以选定那个元素，加一条CSS规则即可。
例如移除无序列表 <ul> 自带的项目符号：
li {
list-style-type: none;
}
list-style-type属性可以使用自定义字符串甚至emoji，或很多种预设语言，可以查表。
2. 根据状态确定样式
根据标签的状态确定样式。
例如使得没有被访问的链接颜色变为粉色、访问过的链接颜色变为绿色、鼠标悬停则移除下划线：
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
3. 如何构建 CSS
在 HTML 里应用 CSS
在文档中应用 CSS 有三种方法
外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>
<link> 元素的 href 属性需要引用你的文件系统中的一个文件。
内部样式表
将 CSS 直接写在 HTML 文件 <head> 标签里的 <style> 标签之中。
<!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>
内联样式
存在于 HTML 元素的 style 属性之中。每个 CSS 表只影响一个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
属性和值
函数
大多数值都是简单的关键字或数值，但也有一些可能的值以函数的形式出现。例如 calc() 函数、transform属性使用的 rotate() 函数。
规则
有些 @rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主 CSS 样式表，可以使用 @import：
@import 'styles2.css';
还有一个最常见的 @rules 之一是 @media，它允许使用媒体查询来应用 CSS，仅当某些条件成立（例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时）。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
速记属性
一些常用的：
div {
padding: 10px 15px 15px 5px;
}
与这四行代码是等价的：
div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
}
div {
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
}
与这五行代码是等价的：
div {
background-color: red;
background-image: url(bg-graphic,png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
}
4. CSS 如何运行
一个真实的 DOM 案例
现在通过一个 HTML 片段来了解 HTML 怎么转化成 DOM
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
对应树形结构为：
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
当浏览器遇到无法解析的 CSS 代码会发生什么
浏览器什么也不会做，继续解析下一个 CSS 样式。
相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个 CSS 选择器。
因此，当为一个元素指定多个 CSS 样式的时候，浏览器会加载样式表中的最后的 CSS 代码进行渲染，正因为如此，可以为同一个元素指定多个 CSS 样式来解决有些浏览器不兼容新特性的问题。
5. 层叠与继承
冲突规则
层叠
当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
优先级
内联 > id > class > tag
继承
一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。
例如 color 会继承，但 width 不会继承。因为如果复元素的 width 是50%，后代继承 width，那 CSS 就会很难使用了！
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。
inherit：使该元素属性和父元素相同。即：开启继承。
initial：设置为元素属性的初始默认值，默认值由官方 CSS 规范定义。如果没有默认值且该属性是自然继承的，那么会设置为 inherit。
unset：重置为自然值，即：如果属性是自然继承那么就是 inherit，否则和 initial 一样。
revert: 使该元素样式还原成样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置，否则，按浏览器定义样式表中的样式设置，否则，等价于 unset。
通俗解释就是：
- 设置了
inherit就是继承来自祖上的东西。- 设置了
initial就是抛弃祖上的东西另起炉灶从默认值开始，如果没有默认值，就接着继承祖上的东西。- 设置了
unset就是我不发表意见，本来是继承就继承，本来是默认就默认。- 设置了
revert就是推翻一切，从默认样式表重新开始。
重设所有属性值
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所作更改的简便方法，以便回到之前已知的起点。
.fix-this {
all: unset;
}
