CSS ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天本堂课重点（不熟悉）内容： CSS概述

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

本堂课重点（不熟悉）内容：

CSS概述样式
CSS选择器

h1{ <!-- 选择器Selector-->
    color:white; <!--选择器Property:属性值Value-->
    font-size:14px; <!--每一行为一条声明Declaration-->
}

设置文本样式
CSS工作原理

DOM树->渲染树（结点的位置，样式）

CSS布局：确定内容大小和位置的算法
- 盒模型
- Flex布局
- Grid
- 定位

详细知识点介绍：

CSS

在页面使用CSS
- 外链
- 嵌入
- 内联（不推荐，仅在ui组件库中添加样式使用）
通配选择器 *
id选择器 #id_name
class选择器 .class_name
[disabled]

7. 一类 <p><a href="#top">回到顶部</a></p> 以#开头 <p><a href="a.jpg">查看图片</a></p> 以".jpg"结尾

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类：对某一状态下的控件进行选中

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
  a:link {
    color: black;
  }

  a:visited {
    color: gray;
  }

  a:hover {
    color: orange;
  }

  a:active {
    color: red;
  }

  :focus {
    outline: 2px solid orange;
  }
</style>

9. 颜色相关 - 颜色RGB - HSL 色相、饱和度、亮度 - alpha 透明0->不透明1

字体 font-family 字体先英文、后中文；为避免最后没有对应字体的情况将通用字体放在最后

woff2 在用的时候进行下载

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

font-size

2em 相对于默认字体的值大小默认为10px，则10*2 = 20px

字重 100-900 其中400为normal，700为bold 需要字体设计字重才能展现
line-height行高若为1.6 则代表行高为默认字体的1.6倍
white-space 空格与换行

深入CSS 上

特异度越特殊的选择器优先级越高：通过id，伪类，标签的个数得出优先级，id>伪类>标签 样式覆盖、复用
继承 eg.color为当前样式，若没有设置，则查找上一级（父级）的设置
- 模型属性不可继承例如宽度等
- 文字相关可继承例如 font-size color 等
为避免出现没有值的情况使用通配设置

* {
    box-sizing:inherit;
}

若实在没有找到，则 （1）初始值 or （2）initial关键字显式重置为初始值

（1）
- background-color : transparent（透明）
- margin-left : 0
（2）
- background-color ：initial (与background-color : transparent等价)
- 声明值，若有多个，则获得层叠值
- 若层叠值为空则使用继承or初始值，从而得到指定值（保证其不为空）
- 将指定值（可能是相对值，相对值进行转化，转化为绝对值）转化为计算值
- 将计算值（包含一些60%等类似数据）进一步转换，转化为使用值（不再有相对值or关键字 eg.400.2px）
- 将小数像素值转化为整数，最终得出实际值（渲染时实际生效的值，如400px） ps:计算值（通过找到父类or url链接直接得出的值） & 使用值（body为100% 需要将其放在容器中，实际布局需要的值放在formattting去计算） ps:继承继承到的是父类转化后的绝对值
布局相关技术：
- 常规流：块级（一块一块摆）、行级（一行一行）、表格布局、FlexBox、Grid布局
- 浮动：图片浮动，环绕文字效果 盖在常规流上面
- 绝对定位
盒模型：内边距（一个值：四条一样；两个值：上下、左右；四个值：上、右、下、左）、边框（内容：宽高对其限制）、外边距
margin 边距融合 A在B上面100px，B在A下面120px，则A、B间距离120px
box-sizeing:border-box 当A未加语句但宽度为100%时，长度未减去外框导致数据超出；当B加了语句，则符合常规 控制超出

深入CSS下

行级（width、height不适用） & 块级（不与其他块级盒子并排摆放）
display属性:
- inline 行级盒子
- block 块级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none 排版时完全忽略
Flex Box:
- 一种新的排版上下文
- 它可以控制子级盒子
  - 摆放的流向（ → ← ↑ ↓）
  - 摆放顺序
  - 盒子宽度和高度
  - 水平和垂直方向的对齐
  - 是否允许折行
主轴 & 侧轴
- justify-content 六个空格方式
- align-items 五个对齐模式
Flexibility 子项的弹性 flex-grow 属性值为数字 flex语法了解学习
Grid布局
- fr代表份
- line网格线线以左上角为起点，从1起算
绝对定位：position属性
- static 默认值，非定位属性
- relative 相对于自身原本位置偏移，不脱离文档流未脱离常规流
- absolute 绝对定位，相对非static祖先先元素定位脱离常规流
- fixed 相对于视口（窗口）绝对定位
学习CSS建议
- 充分利用 MDN 和 W3C CSS 规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性不断出现

引用参考：

PPT-CSS

PPT-深入CSS

CSS ｜ 青训营笔记

本堂课重点（不熟悉）内容：

详细知识点介绍：

CSS

深入CSS 上

深入CSS下

引用参考：

CSS ｜青训营笔记