------------恢复内容开始------------

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;

标签：attr,元素,笔记,学习,value,选择器,CSS,属性
From： https://www.cnblogs.com/aaplloo/p/18176113

CSS学习笔记

CSS