目录
一、什么是CSS
如果将HTML比作毛坯房的话，那么CSS就是房子的装修了。CSS是用来指定文档如何展示给用户的一门语言。展示一份文档给用户实际上是将文档变成用户可用的文件，可以将文档在电脑屏幕、投影仪、打印机等设备上展示
Q：什么是文档？
A：一份文档是文本文件，而这份文本文件是由标记语言组织起来的；HTML就是最常见的标记语言
所以具体来说CSS可以做些什么呢？
举几个例子，
<1>CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。
<2>CSS也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。
<3>CSS甚至还可以用来做一些特效，比如动画。
二、在HTML里应用CSS
1.外部样式表
外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML的<link> 元素标签引用它
这是一个CSS文件：
h1{
color: aqua;
background-color: black;
border: 2px solid green;
}
p{
color: brown;
font-size: 20px;
}这是在HTML文件当中引用CSS文件：
注：<link>元素中的href属性需要引用文件系统中的一个文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
//在这里引用CSS文件
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Look!</h1>
<p>This is a CSS example</p>
</body>
</html>2.内部样式表
内部样式表与外部样式表不同的是，内部样式表不使用外部CSS文件，而是把CSS放在HTML文件的<head>标签中的<style>标签当中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: aqua;
background-color: black;
border: 2px solid green;
}
p{
color: brown;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Tomorrow is Monday</h1>
<p>Today is Sunday</p>
</body>
</html>内部样式表与外部样式表比起来更加低效，是因为在一个站点里，需要在每个页面重复的添加相同的CSS，如果需要修改CSS的话，则需要在每个页面文件中都修改一遍
3.内联样式
内联样式表存在于HTML元素的style属性之中。
其特点是每个CSS表只影响一个元素！
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//在h1和p标签内的style属性中编辑CSS
<h1 style="color: aqua; background-color: black; border: 2px solid green;">Tomorrow is Monday</h1>
<p style="color: brown; font-size: 20px;">Today is Sunday</p>
</body>
</html>尽量不要这样做！
<1>难以维护，在更新时，需要修改同一个文档的多处地方
<2>难以阅读和理解，这种写法将文档结构和文档表现混合起来了，就使得代码变得难以阅读和理解，将不同的代码分开存放在不同的文档中会让工作更加清晰
但是！！！
在有些情况下，内联样式更加常见。例如：工作环境超级严格，网站管理系统（CMS）仅允许编辑HTML正文，则不得不使用内联样式。
一个小技巧：
有的时候我们会在文本中使用大量的CSS。可以在计算机上创建一个新的文件夹,然后在文件夹中创建 index.html 与 styles.css 的副本。:然后，当遇到一些想要试验的CSS时，替换HTML
<body>内容与一些HTML样式，并开始添加CSS样式在CSS文件。
*层叠顺序
当为某个HTML元素指定多个样式时，样式的使用就会有优先级：
1.行内样式（在 HTML 元素中）
2.外部和内部样式表（在 head 部分）
3.浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
在内部样式表和外部样式表同时出现时，如果内部样式表是在链接到外部样式表之后定义的，则内部样式表优先级更高， 反之则外部样式表优先级更高。
三、CSS语法
CSS规则集由选择器和声明块组成：
选择器指向需要设置样式的HTML元素；
声明块包含一条或多条用分号分隔的声明，并且用花括号括起来；
每一条声明都包含一个属性和值，用冒号分隔开。
四、CSS选择器
CSS选择器用来选取要设置的HTML元素，CSS选择器可以分为五类，分别是：简单选择器、组合器选择器、伪类选择器、伪元素选择器、属性选择器
1.简单选择器
简单选择器会根据名称、id、类来选取元素
<1>元素选择器
元素选择器根据元素名称来选择HTML元素
p {
text-align: center;
color: red;
}<2>id选择器
【id名称不能以数字开头】
id 选择器使用 HTML 元素的 id 属性来选择特定元素
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
举个例子：
这条CSS规则将应用于 id = "content" 的HTML元素。
#content {
text-align: center;
color: red;
}<3>类选择器
【类名不能以数字开头】
1.类选择器选择有特定 class 属性的 HTML 元素。
举个例子，
这条CSS规则将应用于所有带有 class = "center" 的元素
.center {
text-align: center;
color: red;
}2.可以指定特定的HTML元素受到类的影响 ，如下：
p.center {
text-align: center;
color: red;
}
//只有具有 class="center" 的 <p> 元素会居中对齐3.HTML元素可以引用多个类
//<p>元素将根据 class="center" 和 class="large" 进行设置
<p class="center large">这个段落会引用两个类。</p>
<4>通用选择器
通用选择器（*）会选择页面上所有的HTML元素，页面上的每个HTML元素都会受到影响
* {
text-align: center;
color: blue;
}<5>分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
对选择器进行分组要用逗号隔开；使用分组选择器可以在最大程度上缩减代码
h1, h2, p {
text-align: center;
color: red;
}2.组合选择器
组合选择器会根据元素之间的特定关系来选取元素
组合器：是解释选择器之间的关系的机制
| 组合器名称 | 选择关系 |
| 后代选择器（空格） | 匹配属于指定元素后代的所有元素 |
| 子选择器（>） | 匹配属于指定元素子元素的所有元素 |
| 相邻兄弟选择器（+） | 匹配所有作为指定元素的相邻同级的元素 |
| 通用兄弟选择器（~） | 匹配属于指定元素的同级元素的所有元素 |
<1>后代选择器
//选择<div>元素中的所有<p>元素
div p {
background-color: yellow;
}<2>子选择器
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
//选择<div>元素的子元素中的所有<p>元素
div > p {
background-color: yellow;
}<3>相邻兄弟选择器
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”
//选择紧随 <div> 元素之后的所有 <p> 元素
div + p {
background-color: yellow;
}<4>通用兄弟选择器
//选择属于 <div> 元素的同级元素的所有 <p> 元素
div ~ p {
background-color: yellow;
}3.伪类选择器
伪类选择器根据特定状态选取元素
伪类用于定义元素的特殊状态。例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
4.伪元素选择器
伪元素选择器选取元素的一部分并设置其样式
CSS 伪元素用于设置元素指定部分的样式。例如，它可用于：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
5.属性选择器
属性选择器根据属性或属性值来选取元素
| 选择器 | 例子 | 例子描述 |
| [attribute] | [target] | 选择带有 target 属性的所有元素 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素 |
| [attribute~=value] | [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素 |
| [attribute|=value] | [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素 |
| [attribute^=value] | a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素 |
| [attribute*=value] | a[href*="baidu"] | 选择其 href 属性值包含子串 "baidu" 的每个 <a> 元素 |
举个例子：
//选取 class 属性以 "top" 开头的所有元素
[class^="top"] {
background: yellow;
}