CSS知识分享

在页面中使用css有三种方法：
1.外链式

<link rel="stylesheet" href="/assets/style.css">

2.嵌入式

<style>
        li {
            margin: 1em 0;
        }
</style>

3.内嵌式

<p style="margin: 1em 0;">Example Content</p>

• css的工作机制是先解析出DOM树之后将css样式添加至结点的各个元素上形成渲染树

• css中的常见选择器：通配选择器、标签选择器、类选择器、ID选择器、属性选择器。组合器：

例属性选择器如下：

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

组合器！！！
1.后代组合器
语法：A B
例子：div span 匹配所有位于任意 div 元素之内的 span 。
2.直接子代组合器
语法：A > B
例子：ul > li 匹配直接嵌套在 ul元素内的所有 li 元素。
3.一般兄弟组合器
语法：A ~ B
例子：p ~ span 匹配同一父元素下，p 元素后的所有 span 元素。
4.紧邻兄弟组合器
语法：A + B
例子：h2 + p 会匹配所有紧邻在 h2 元素后的 p 元素。
5.伪类
例子：a:visited 匹配所有曾被访问过的 a 元素。
6.伪元素
例子：p::first-line 匹配所有 p元素的第一行。

• 表示颜色有三种方式：

1.RGB表示法：rgb(red,green,blue)
2.十六进制数字：#ffffff
3.HSl表示法：（0,100%，100%）第一个位置是色相，第二个位置是鲜艳程度，第三个位置是明亮程度。
4.英文字母#red等等
那么，后面加一个透明度rgba(red,green,blue,0.74)不透明。#ffffffba，hsla(0,100%,100%,0.74)

• font-family使用的时候建议通用字体族放在最后，英文字体放在中文字体之前
• font-size关键字有small、medium、large，长度有px和em，百分数单位是相对于父元素单位大小计算.

em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

• display:grid布局