------------恢复内容开始------------
CSS
CSS（Cascading Style Sheets，层叠样式表），是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 语法
- 语法由一个选择器（selector）起头，选择将要用来添加样式的 HTML 元素。接着输入一对大括号，在大括号内部定义一个或多个形式为属性（property）-值（value）对的声明。每个声明指定所选元素的一个属性，后面跟想赋给属性的值。如：
h1 {
color: red;
font-size: 5em;
}
- 冒号之前是属性，冒号之后是值。不同的 CSS 属性对应不同的合法值。
- 当一个属性与一个值配对时，这种配对被称为 CSS 声明。完成一个声明块后声明块与选择器配对以生成 CSS 规则集。
- 属性和值不区分大小写。
CSS 模块
- CSS 由许多模块（module）构成。
格式化 HTML 元素
- 元素选择器，即直接匹配 HTML 元素的选择器。例如，若要样式化一个文档中所有的段落，只需使用选择器
p - 用逗号将不同选择器隔开，即可一次使用多个选择器：
p,
li {
color: green;
}
- 移除无序列表
<ul>的项目符号：
li {
list-style-type: none;
list-style-type: square；//小圆球改为小方块
}
使用类名
- 给元素添加类名属性
class，再选中类名进行编辑。如 HTML 定义
<ul>
<li>项目一</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>
在 CSS 中，类前面加一个点(.)进行调用从而选择器选中：
.special {
color: orange;
font-weight: bold;
}
这是对于所有属于class="special"的元素，也可特定元素类型调用：
li.special {
color: orange;
font-weight: bold;
}
根据元素在文档中的位置确定样式
- 使用包含选择符选择器，在两个选择器间加上空格表示嵌套关系：
li em{
color: green;
}
- 使用相邻选择符选择器，表示与前面元素具有相同层级的段落样式：
h1 + p {
font-size: 200%;
}
根据状态确定样式
- 即设置 CSS 样式取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。
a:link {
color: pink;
} // 未被访问
a:visited {
color: green;
} // 被访问过
a:hover {
text-decoration: none;
} // 鼠标悬停时无下划线
- 选择器和选择符可以嵌套使用
在 HTML 中应用 CSS
- HTML 中应用 CSS 的三种方式：外部样式表、内部样式表、内联样式表
外部样式表
- 即在
<head>中设置<link rel="stylesheet" href="...">
内部样式表
- 将 CSS 放置在 HTML
<head>中的<style>元素中
内联样式
- 影响单个 HTML 元素的 CSS 声明，包含在元素的
style属性中，如：
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
内联样式最好避免。
选择器
- 两个选择器之间加上一个逗号变为选择器列表。
类型、类和ID选择器
- 即区分指向元素、class和一个 id
- 类型选择器，选择一个标签名或者元素
- 全局选择器（*），选中文档中的所有内容（或者是父元素中的所有内容）。全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。例如，如果我想选中任何
元素的第一子元素，不论它是什么元素，都给它加粗：
article *:first-child {
}
- 类选择器，
class嵌套定义
如 <div class="notebox warning"> Haer</div>
CSS 调用时：
.notebox.warning{
}
- ID 选择器：以井号（#）开头，基本上与类选择器是同种用法。在一篇文档中，一个 ID 只会用到一次
关系选择器
- 后代选择器：典型用单个空格（" "）字符————组合两个选择器。
- 子代关系选择器：子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
- 邻接兄弟：邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。
- 通用兄弟：如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。
属性选择器
存否和值选择器
- 这些选择器允许基于一个元素自身是否存在（例如
href）或者基于各式不同的按属性值的匹配，来选取元素。
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attr] | a[title] | 匹配带有一个名为attr的属性的元素--方括号里的值。 |
| [attr=value] | a[href="https://example.com"] | 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 |
| [attr~=value] | p[class~="special"] | 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 |
| [attr|=value] | div[lang|="zh"] | 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。 |
子字符串匹配选择器
- 这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有
box-warning和box-error类，想把开头为"box-"字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。
| 选择器 | 示例 | 描述 |
|---|---|---|
[attr^=value] |
li[class^="box-"] |
匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 |
[attr$$（单个符号出问题了，其实是一个）=value] |
li[class$="-box"] |
匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 |
[attr*=value] |
li[class*="box"] |
匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。 |
标签属性选择器
- 根据一个元素上的某个标签的属性的存在以选择元素：
a[title] {
}
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"]{
}
伪类与伪元素
- 一个伪类，用来样式化一个元素的特定状态，以单冒号标注。例如：
a:hover {
}
- 伪元素，选择一个元素的某个部分而不是元素自己，以双冒号标注，相当于将元素的某个状态认为是某个类的元素。例如，::first-line是会选择一个元素（下面的情况中是
<p>）中的第一行
p::first-line {
}
运算符
优先级
- 层叠：同一类型选择器的两种样式，后面声明的样式会替换样式表中较早出现的冲突样式。
- 一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些；一个类选择器稍微具体点，则会选择该页面中有特定
class属性值的元素，所以它的优先级就要高一点。 - 继承：一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
控制继承
-
inherit: 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。 -
initial: 将应用于选定元素的属性值设置为该属性的初始值。 -
revert: 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于unset。 -
revert-layer: 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。 -
unset: 将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则和initial一样 -
CSS 的简写属性
all可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit、initial、unset或revert）。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。 -
一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）—— 三位数的三个位数：
· ID：选择器中包含 ID 选择器则百位得一分。
· 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
· 元素：选择器中包含元素、伪元素选择器则个位得一分。 -
内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其他任何优先级的权重都要高。
-
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——
!important。用于修改特定属性的值，能够覆盖普通规则的层叠。
函数
calc()函数，允许在 CSS 中进行简单的计算：width: calc(90% - 30px);函数由函数名和括号组成，括号内是函数的值。在上面calc()的例子中，这些值定义了这个盒子的宽度为包含块宽度的 90%，减去 30 像素。transform()函数。有多种取值，如rotate():transform: rotate(0.8turn);
@规则（@rules）
- CSS 的 @rules是一些特殊的规则，提供了关于 CSS 应该执行什么或如何表现的指令。
@import：将一个样式表导入另一个 CSS 样式表@import "Name.css"@media：创建媒体查询
简写属性
- 一些属性，如
font、background、padding、border和margin等属性称为简写属性。它们允许在一行中设置多个属性值，从而节省时间并使代码更整洁。
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
等价于：
padding: 10px 15px 15px 5px;
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
等价于：
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
