CSS

CSS 是什么

Cascading Style Sheets (层叠样式表)
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

CSS是如何工作的

如何使用CSS

可以在<head>元素中使用<link>或<style>元素来通过css样式表的外链引用对该html页面进行修饰。
- 我们更推荐以外链引用的方式进行使用，这样可以使项目结构更加清晰。

<!-- 外链引用 -->
<link rel="stylesheet" href="assets/style.css">

<!-- 嵌入使用 -->
<style>
p {
    margin: 1em  0;
}
</style>

或者在<body>元素中使用类似下面的方式对某些元素在标签内进行特定样式的修饰。

<!-- 内联使用 -->
<p style="margin: 1em 0">Example Text</p>

选择器 Selector

用于找出页面中的元素，以便给他们设置样式。(如上述例子中嵌入式用的p就是标签选择器)
可使用多种方式选择元素
- 按照标签名、类目、id
- 按照属性
- 按照 DOM 树中的位置

通配选择器 Universal selectors

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

在 CSS3 中，星号 (*) 可以和命名空间组合使用：

ns|* - 会匹配ns命名空间下的所有元素
*|* - 会匹配所有命名空间下的所有元素
|* - 会匹配所有没有命名空间的元素

下面是个简单的例子

* {
  color: red;
  font-size: 20px;
}

标签选择器 Type selectors

CSS 标签选择器(类型选择器)通过节点名称匹配元素。换句话说，它选择一个文件中所有给定类型的元素。

类型选择器可以使用 @namespace 赋予命名空间。这在处理包含多个命名空间的文件时很有用，比如带有内联 SVG 或 MathML 的 HTML 文档，或者混合了多个词汇的 XML 文档。

ns|h1——匹配命名空间为 ns 的 <h1> 元素
*|h1——匹配所有 <h1> 元素
|h1——匹配没有声明命名空间的 <h1> 元素

照例给出一个example：

/* 所有 <a> 元素。*/
a {
  color: red;
}

/** 使用命名空间 **/
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}

ID 选择器 ID selectors

CSS ID 选择器会根据该元素的 id 属性中的内容匹配元素。为了使该元素被选中，它的 id 属性必须与选择器中给出的值完全匹配。

/* id 为 "demo" 的元素会被选中 */
#demo {
  border: red 2px solid;
}

属性选择器 Attribute selectors

CSS 属性选择器匹配那些具有特定属性或属性值的元素。

语法如下：

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 实验性

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

一个example如下：

/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

伪类 Pseudo-classes

不基于标签和属性定位元素
类型
- 状态伪类
- 结构性伪类

CSS伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类:hover可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。

//TODO

// 之后补充伪类的速查表

组合 Combinators

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是B的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

如何调试

浏览器右击页面，打开检查元素
使用快捷键
- F12打开检查元素
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

选择器特异度

给出一个例子，让你能够简单的计算选择器的特异度

上面这个例子中，经过简单的计算，第一个选择器可以算作122特异度；第二个选择器算作22特异度；

按优先级来算，会优先加载第一个选择器的样式

继承

在 css 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承属性

当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

继承属性的一个典型例子就是color属性。给出以下样式规则：

p {
  color: green;
}

若将其应用在下面这段 HTML 代码上…

<p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 "emphasized text" 就会呈现为绿色，因为 em 元素继承了 p 元素color属性的值，而没有获取 color 属性的初始值（这个 color 值用于页面没有指定 color 时的根元素）。

非继承属性

当元素的一个非继承属性(在 Mozilla code 里有时称之为reset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

非继承属性的一个典型例子就是 border 属性。给出以下样式规则：

p {
  border: medium solid;
}

若将其应用在下面这段 HTML 代码上…

<p>This paragraph has <em>emphasized text</em> in it.</p>

…文本 "emphasized text" 就没有边框，因为 border-style 属性的初始值为none。

TIPS

inherit 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

可以使用 all 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如：

font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

这会将 font 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 font-weight 属性为"bold"

CSS求值过程

css求值过程有点复杂，看下图理解：

css求值过程

CSS基础使用 | 青训营笔记

CSS