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

.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为蓝色

CSS入门