在页面中使用CSS

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

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

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

外链：传统开发，内容和样式的分离；
嵌入：组件式开发，关注点（组件相关）分离；
内联：UI组件库，少量样式修改；

CSS是如何工作的

未命名文件(3).png

选择器

找到页面中的元素。选择方式有：

按照标签名、类名（多次）或id（唯一）；
按照属性；
按照DOM树中的位置；

属性选择器

使用[属性值]/[属性名=属性值]，选择拥有该属性值的所有元素；
属性选择器拥有“正则”功能，^=表示开头，$=表示结尾；
- [href^="#"]可匹配href="#top";
- [href$=".jpg"]可匹配href="a.jpg";

伪类选择器

状态性伪类（与用户交互时产生样式）；
结构性伪类（元素在父级DOM结点中的相对位置）；

组合

存在DOM结点A和B，则有：

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

选择器组

同时使用多个选择器，选择器之间用,隔开，如选择器1, 选择器2, 选择器3, ...。

色彩空间

RGB：rgb(红色[0-255], 绿色[0-255], 蓝色[0-255]) => #(红色16进制)(绿色16进制)(蓝色16进制)；
HSL：hsl(色相[0-360], 饱和度[0-100%], 亮度[0-100%])；
alpha透明度（附加a）：[0-1]，0为完全透明，1为不透明；

字体

font-family使用策略

字体列表最后写上通用字体（兼容性兜底）；
英文字体放在中文字体前（英文字体通常不包含中文，避免混乱）；

Web Fonts

从互联网中获取所需字体，并与系统预置字体一起使用。

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

中文字体包较大，中文慎用Web Font，确需使用时，需要对字体包进行裁剪，仅保留常用文字。

选择器的特异度

选择器的特异度决定了优先级，从而导致样式的覆盖，具体地，id > （伪）类 > 标签。

继承

继承包括隐式继承与显式继承，其中隐式继承（主要是字体）会自动继承父级元素的样式（计算值），而对于不能隐式继承样式，可以通过inherit属性关键字进行显式继承。未命名文件(3).png

布局

盒模型

CSS中将每个元素视为一个盒子。
只有垂直方向的外边距会发生外边距叠加。

常规流（文档流）

只有根元素、浮动和绝对定位的元素会脱离常规流，其余元素采用下列的某种布局：

行级（不等于行级元素）布局
- 只包含行级盒子时使用行级布局；
- 可以在一行或多行中摆放；
- 行级盒子无法设置宽高；
块级（不等于块级元素）布局
- 某些容器提供块级布局（根元素，Flex子项，Gird子项等）；
- 不与其它盒子并排摆放；
表格布局（很少使用）
Flex布局（一维）
- flex-direction控制盒子摆放方向；
- flex-direction方向为主轴，主轴垂直方向为侧轴；
- justify-content主轴对齐，align-items侧轴对齐；
- order盒子摆放顺序；
- flex-grow弹性扩展，flex-shrink弹性收缩；
Grid布局（二维）
- 将容器划分为网格，设置子元素占据的行列位置；
- 标记网格线，使用网格线表示子元素位置；

【青训营】02 - CSS