2

这是我参与「第四届青训营」笔记创作活动的的第2天。本节课的主题是【理解 CSS】，授课老师为韩广军，本篇笔记分别对课程中所讲的几个要点进行一些复述加上我个人的解读，如若有误，欢迎大家在评论区交流，指出不当之处。

初学CSS

什么是CSS（Cascading Style Sheets，层叠样式表）？
- 用来设置页面元素的样式
  - 设置字体和颜色
  - 设置位置和大小
  - 添加动画效果
CSS概览
```
选择器（Property）{
Property:属性值(Value);
}
```
在页面中使用CSS的3种方式：
1. 外联（推荐）
2. 嵌入
3. 内联
CSS是如何工作的
CSS的用法
1. 选择器 Selector
  - 找出页面中的元素，以便给他们设置样式。
  - 选择元素的多种方式
    1. 通配选择器：匹配全部元素
```
<style>
*{
color:red;
font-size:20px;
}
</style>
```
    2. id选择器（id要求唯一）
```
#id{
property:value;
}
```
    3. 类选择器(常用，class可出现多次)
```
.class{
property:value;
}
```
    4. 属性选择器
```
[disabled]{
property:value;
}

input[type="password"]{
property:value;
}
```
2. 伪类
  
  不基于标签和属性定位元素
  
  几种伪类：
  - 状态伪类：如a标签在不同状态下 a:link
  - 结构性伪类：根据dom节点中位置决定是否选中元素（first-child,last-child,通过写公式选择奇数/偶数标签）
3. 组合标签/伪类
  
  选择器组：通过逗号连接
4. 颜色表示方法
  1. RGB
    
    #4a0000 ==== rgb(74,00,00) 十六进制转换
  2. HSL
    
    例如用于按钮变色时，用HSL方便。
  3. alpha透明度
    
    #ff000078 , rgba(，, , 1) hsla
e. 字体

font-family

通常要加上通用字体族。

除了默认字体，还可使用Web Fonts

font-size
1. 关键字
  - small/medium/large
2. 长度
  - px/em（em为相对值。1em=父集的大小）
3. 百分数
  - 相对于父元素字体大小
font-style(斜体..）

font-weight 自重，100-900，越大越粗，normal = 400，需要字体支持字重才生效

line-height 行高，两行文字间的baseline（基准线），没有单位时表示自身字体大小（如size=20，line-height=1.6，则行高为32）

white-space，用以决定文字是否换行/保留空格

深入CSS

1. 规则优先级问题
1. 根据特异度选择
2. CSS的继承性

某些属性会自动继承其父元素的计算值，除非显式指定一个值

文字属性一般能隐性继承，多媒体则不会隐式继承。

显式继承：
```
*{
box-sizing:inherit;
}
```
3. CSS的初始值

CSS中，每个属性都有一个初始值

可以通过initial关键字显式重置为初始值,如：

background-color:initial

4. CSS的求值过程

练习：容器，font-size=1.2em，h1 = 1.2px

布局（Layout）

-   布局相关技术

    -   常规流

        -   盒模型

            -   width，height指定content box的宽高度，容器有指定的高度时，百分数才生效

                padding指定元素四个方向的内边距，百分数相对于容器宽度

        -   行级

        -   块级

        -   表格布局

        -   FilexBox

        -   Grid布局

    -   浮动

    -   绝对定位

理解 CSS|青训营笔记

2

初学CSS

深入CSS

1. 规则优先级问题

2. CSS的继承性

3. CSS的初始值

4. CSS的求值过程

布局（Layout）