CSS 笔记

CSS

CSS，或 Cascading Style Sheets （层叠样式表或级联样式表），用来给浏览器添加样式。

引入 CSS 的方式 Import

内联 Inline Style

使用 style 属性来引入 CSS

嵌入 Embedded Style

在 标签里使用

外联 External Style Sheets

把 HTML 代码和 CSS 代码分别存储到两个文件中，在 标签中通过 标签引入 CSS

---

CSS 规则的组成

selector {
    property: value;  /* declaration */
}

其中 selector 为选择器，declaration 为声明，property 为声明中的属性，value 为声明的属性值。

选择器 Selector

每个元素的样式规则都应该有开始和结束大括号（{ 和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间，并且每条样式规则都以分号;结束。

通用选择器 Universal Selector

使用 * 来选择所有元素，称为通用选择器或通配符。

* {
  color: blue;
}

元素/类型选择器 Element/Type Selector

元素选择器或者类型选择器()选择 HTML 元素。

h2 {
  color: green;
}

类选择器 Class Selector

.blue-text {
  color: blue;
}
 

CSS 的 class 具有可重用性，可应用于各种 HTML 元素。

注意:

• 在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有 .。
• 不能用数字开头命名类或者 ID。
• 即使某个 HTML 元素有多个类，CSS 选择器只是其中一个，仍然会匹配该元素。

记得在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可， 例如：

ID 选择器 ID Selector

#red {
  color: red;
}

每一个 HTML 元素都有一个 id 属性。

使用 id 的好处：通过 id 选择器来改变单个元素的样式。

根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。

如果浏览器遇到多个 id，css 规则依然会生效。但是，任何具有 id 属性的元素应该具有唯一的值。

属性选择器 Attribute Selector

使用 [attr=value] 属性选择器来修改样式。这个选择器使用特定的属性值来匹配和设置元素样式。

属性修改器可以和正则表达式配合。

例如，下面的代码会改变所有 type 为 radio 的元素的外边距。

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

也可以匹配一个属性，不针对属性值。

[type] {
  margin: 20px 0px 20px 0px;
}

加上 s 来区分大小写，i 忽略大小写：

[data-type='primary' s] {
  color: red;
}

分组选择器 Grouping Selector

可以用逗号分割多个选择器：

strong,em,.my-class,[lang] {
  color: red;
}

伪类选择器 Pseudo Class

伪类

伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。

伪类使用单个冒号：:

a:hover {
  color: blue;
}
/* 这条规则的作用是：当光标放在超链接上时，超链接显示蓝色 */

a:visited {
  color: pink;
}
/* 这条规则的作用是：当访问超连接后，超链接显示粉色 */

p:nth-child(even) {
  color: red;
}
/* 这条规则的作用是：选择所有的偶数段落，把文本颜色设置为红色 */

伪元素

伪元素使用两个冒号：::。

::before 创建一个伪元素，它是所选元素的第一个子元素； ::after 创建一个伪元素，它是所选元素的最后一个子元素。

::before 和 ::after 必须配合 content 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。 尽管有时 ::before 和 ::after 是用来实现形状而非文字，但 content 属性仍然是必需的，此时它的值可以是空字符串。

例：

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

在上面的例子里，class 为 heart元素的 ::before 伪类添加了一个黄色的长方形，长方形的高和宽分别为 50px 和 70px。 这个矩形有圆角，因为它的 border-radius为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 5px、50px 的位置。

不过，伪元素不限于插入内容。您还可以使用它们来定位元素的特定部分。例如，假设您有一个列表，则可以使用 ::marker 为列表中的每个项目符号点（或数字）设置样式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

您还可以使用 ::selection 为用户突出显示的内容设置样式。

::selection {
  background: black;
  color: white;
}

复杂选择器

复杂选择器实现更精准的定位。

只能向下级联，选择子元素，而不能向上选择父元素。

连结符 Combinator

连结符位于两个选择器之间。

后代连结符 Descendant combinator

这种连结符用于定位子元素，使用空格 。

后代连结符是递归的。

p strong {
  color: blue;
}

/* 这段代码只匹配 p 元素的 strong 子元素 */

下一同级/兄弟连结符 Next sibling combinator

使用 + 选择在同一个父元素下，紧跟在另一元素之后的元素。

p + strong {
  color: blue;
}

后继兄弟连结符 Subsequent-sibling combinator

使用 ~ 选择在同一父元素下的，某个元素后的元素。

可以配合使用 :checked 伪类创造一个纯 CSS switch 元素。

:checked ~ .toggle__decor {
  background: rebeccapureple;
}

孩子选择器 Child combinator

孩子选择器或直接后代选择器使用 > 限制连结符仅仅应用于直接后代上。

组合选择器 Compound selector

可以把选择器组合：

a.my-class {
  color: red;
}

/* 选择具有 my-class 类的超链接 */

---

级联 Cascade

级联是一种解决当多个 CSS 规则应用于一个 HTML 元素产生冲突时的算法。

级联由 4 部分组成：

• 位置和次序：CSS 规则出现的次序
• 优先级（Specificity）：决定哪个 CSS 选择器有最强的匹配
• 来源（Origin）：确定 CSS 的来源，例如：浏览器风格，浏览器扩展或者自己编写的 CSS
• 重要性：有些 CSS 规则比其他要更加优先，例如：!important。

位置和次序

• 对于多个相同形式的选择器规则，最后一个声明的生效。因为浏览器是从上往下读取的。
• 在 HTML 中多个 link 标签链接 CSS 文件，最后一个 link 标签生效。style 标签同理。
• 如果 style 标签声明在 link 标签之前，那么 link 标签生效。
• 内联 style 属性会覆盖除了 !important 之外所有的规则。
• 同一选择器下的多条同种规则，最后一条规则生效。

优先级

使用权重或者评分机制计算哪个选择器具有最高的优先性。

• 同一元素的类选择器比单纯的类型选择器更优先，即使类型选择器在类选择器下面声明。
• id 选择器的优先级更高，会覆盖其他直接应用的规则。所以一般不使用 id 选择器。

优先级计算是累积的，每种选择器都有特定的分数，把分数叠加就是优先级的分数。

CSS 选择器应该尽可能简单。

优先级评分：

• 通用选择器 * ：0 分
• 元素或者伪元素选择器：1 分

• 类，伪类，属性选择器：10 分

  • :not() 伪类本身不加分，但是传入的参数加分，例如：:not(.my-class) 为 10 分

• ID 选择器：100 分

  • 注意是 ID 选择器而不是带有 id 的属性选择器
• 内联 style 属性：1000 分
• !important：10000 分，这是单个条目能得到的最大分

分数相同的情况下，会应用最下面的 CSS 规则。

来源

页面的 CSS 并不仅仅来源于程序员编写的 CSS 代码。

来源的优先级如下(从最低到最高优先级)：

• 用户代理为基础的样式：浏览器默认应用到 HTML 的样式
• 本地用户样式：操作系统层级，例如，基础字体大小，或者减弱动态效果等；也有可能是浏览器扩展添加的样式
• 编写的 CSS：自己编写的 CSS
• 使用了 !important
• 本地用户样式使用 !important
• 用户代理使用 !important

重要性

重要性的优先级(从最低到最高优先级)：

• 常规规则，例如字体大小，背景，文本颜色
• animation 规则
• !important 规则
• transition 规则

动画和转换的优先级很高，因为它们的预期效果就是改变视觉。

---

样式继承 Inheritance

根元素 html 不会继承任何样式，因为它是第一个元素。

每一个 HTML 页面都含有 body 元素，可以在 body 元素上使用 CSS 样式。

设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。

继承是自上而下的。

并不是所有的 CSS 属性都是可以继承的。

每一个 HTML 元素的每个 CSS 属性都有初始值。初始值并不会继承而是作为级联失败时的默认属性。

使用 inherit 关键字使任何属性继承父元素的值。

.my-component strong {
  font-weight: inherit;
}

使用 initial 关键字恢复属性值为默认值。

aside strong {
  font-weight: initial;
}

当某属性是可继承时，unset 关键字和 inherit 等同；反之和 initial 等同。因为记住哪些 CSS 属性是可继承的很难，所以 unset 可以发挥作用。

如果又给 p 加入了一些属性，为了避免手动调整特定的 unset，可以添加 all 属性，保证所有值都是不继承的。

/* p 的全局样式 */
p { 
  margin: 2em;
  color: goldenrod;
}

/* 重设 aside 中 p 的样式 */
aside p {
  margin: unset;
  color: unset;
}

/* 重设 aside 中 p 的所有样式 */
aside p {
  margin: unset;
  color: unset;
  all: unset;
}

---

样式的优先级 Prioritize

! important > 内联 > id 选择器 > 多个 class 中声明在最后的样式(CSS) > class 选择器 > 继承（body）

注：

• HTML 元素里应用的 class 的先后顺序无关紧要。
• 但是，在