CSS入门
CSS,全称为Cascading Style Sheets，层叠样式表。是用来为网页添加样式的代码。
CSS工作原理：
图1
CSS的引入方式
外部样式表：
1.通过 <link> 引入 CSS。
<head>
<link rel="stylesheet" href="index.css">
</head>
（rel=relationship stlyesheet:样式表 href=Hypertext Reference超链接）
2.通过 @import 引入样式，只能放入 css 中引用： 分号不能省
<stlye>
@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>
内部样式表：
<head>
<style>
p{background: orange;}
</style>
</head>
内联样式：（不推荐）
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
@charset有什么作用：
告诉浏览器使用什么字符集去解码。
id 选择器和 class 选择器分别的使用场景
- id选择器因其在文档中必须是唯一的且一个标签只能绑定一个id，相当于一个身份证，故通常用于较大区块，多用于父级；
- class选择器称为类选择器，一个 CSS 类可以应用到多个不同的元素，相当于一个特征，一个元素也可以应用多个不同的 CSS 类。
常见的CSS选择器：
元素选择器 Element Selectors
p { color: red; }
ID 选择器 ID Selectors
<p id="notification">通知：明天放假</p>
#notification { font-size: 24px; }
类选择器 Class Selectors
<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; }
通用选择器 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 的所有元素。
[data-color="gray"] { color: #ccc; }
伪类 Pseudo-classes：
-
a:link {....;} 选中元素当中的链接
-
a:visited {....;} 仅选中访问过的链接，这个样式可能被其他与链接相关的伪类覆盖
-
a:hover {....;} 鼠标悬置
-
a:active {....;} 匹配被用户激活的元素
-
li:first-child { ... }
-
li:last-child { ... }
-
.box p:nth-child(num) {....}
-
.box p:nth-of-type(num){....}
伪元素 Pseudo-elements:
::first-line 将样式只应用于一个块状元素的首行
::first-letter 选中一整块文字第一行的第一个字母
::before/::after 在元素之前／之后插入内容，必须要有content属性
组合选择器：
A, B
A, B 选中选中所有A和B
A B
A B 选中所有A的后代B。
A > B
A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。
A + B
A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。
A ~ B
A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。
练习：下面组合选择器分别是什么意思？
- .item+p {color: red} class="item"元素下相邻的第一个p元素为红色
- .item~p {color: yellow} class="item"元素下相邻的数个p元素为黄色
- .item p {color: blue} class="item"元素下所有p元素为蓝色
- p.item {color: blue} p元素下所有class="item"元素为蓝色
- .item>p{color: blue} class="item"元素下的所有直接子元素p为蓝色
