CSS 基础

选择器

是一个标识，告诉浏览器如何选择要设置样式的元素。选择器分为基础选择器、复合选择器、伪类选择器、伪元素选择器、属性选择器、结构选择器、UI 选择器等

h1 {
  color: blue;
}

.special {
  color: blue;
}

h1,
.special {
  color: blue;
}

当使用选择器列表时，如果任何一个选择器无效（存在语法错误），那么整条规则都会失效。

h1 {
}
.box {
}
#unique {
}

a[title] {
}

a[href='https://example.com']
{
}

a:hover {
}

p::first-line {
}

* {
}

body p {
}

article > p {
}

选择紧邻<p>元素之后的<img>元素。

p + img {
}

选择一个元素的兄弟元素，即使它们不直接相邻。

p ~ img

ul > li[class="a"] {
}

层叠同级别的规则应用到一个元素的时候，写在后面的就是实际使用的规则。
优先级优先级高的规则会覆盖优先级低的规则。
继承子元素会继承父元素的样式。不过一些特殊的是不能继承的，比如 width 1. inherit 继承父元素的值 2. initial 将属性重置为它的默认值 3. revert 重制为浏览器的默认样式 4. revert-layer 将应用于选定元素的属性值重制为在上一个层叠层中建立的值。 5. unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则就是 initial。
all 撤销所有属性

blockquote {
  background-color: orange;
  border: 2px solid blue;
}

.fix-this {
  all: unset;
}

<blockquote>
  <p>This blockquote is styled</p>
</blockquote>

<blockquote class="fix-this">
  <p>This blockquote is not styled</p>
</blockquote>

理解层叠 - 资源顺序：同权重的规则后面的规则会覆盖前面的规则 - 优先级：不同选择器优先级不同，权重高的会影响权重低的 - 重要程度有三个因素会影响一条规则是否适用于一个元素

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）------三位数的三个位数

备注：通用选择器（*）、组合符（+、>、～、''）和调用优先级的选择器（:where()）不会影响优先级。

（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。

区块盒子（div、p）：盒子会产生换行，可以设置宽高。内边距、外边距和边框会影响其他元素。不设置width，默认为auto，会根据内容撑开宽度。
行内盒子（span、i）：不产生换行，widht和height无效。垂直方向内边距外边距和边框会被应用但是不回将inline状态的盒子推开。水平方向会被应用并且会把inline状态的盒子推开。

注：display可以改变盒子的类型。

盒模型

最常见的就是 px

相对长度单位
- em：相对本元素的字体大小，或者在用于font-size时相对于父元素的字体大小。rem相对于跟元素的字体大小
- vh和vw：分别相对于视口的高度和宽度
- 百分比：相对于父级的宽度来设定。
- 数字：不透明度、颜色等
颜色
- 颜色名：red、blue、green等
- 十六进制：#ff0000、#f00等
- RGB：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
- HSL：hsl(0, 100%, 50%)、hsla(0, 100%, 50%, 0.5)。色相、饱和度、亮度

@font-face{
    font-family: 'myFont';
    src:url("myFont.ttf");
}

html{
    font-family: 'myFont';
}