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

初学CSS

1.什么是CSS？

CSS全称（Cascading Style Sheets）,它是用来定义页面元素的样式。

```
设置字体的颜色。
```
```
设置位置和大小
```
```
添加动画效果
```

2.如何导入CSS样式？

有三种方式：外链、嵌入、内联。

外链: <link re="stylesheet" href="/assets/style.css>

嵌入：<style> li{margin:0; list-style:none;} <style>

内联：<p style="margin:1em 0">Content</p>

3.CSS是如何工作的呢？

4.CSS选择器

4.1-选择器的作用

找出页面中的元素，以便给他们设置样式。同时我们可以使用多种方式选择元素如：

```
按照标签名、类名或id
```
```
按照属性
```
```
按照DOM树中的位置
```

4.2-选择器种类

通配选择器、id选择器、标签选择器、类选择器、属性选择器和伪类选择器

通配选择器，顾名思义就是适配所有页面中元素的选择器，通常以（*）表示如下图示例：

id选择器，通过id的名字来查询页面中的元素，通常以元素命名前加上（#）来表示如下图示例：

标签选择器，通过标签的名字来查询页面中的元素，通常以元素标签名来表示如下图示例：

类选择器：通过类的名字来查询页面中的元素，通常以元素类名前加上（.）来表示如下图示例：

属性选择器：通过属性名字来查询页面中的元素，通常以元素属性名前加上（[]）来表示如下图示例：

伪类选择器：

```
不基于标签和属性定位元素
```

几种伪类：状态伪类和结构性伪类

4.3-CSS选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认， 同一级别css引入方式不同，优先级不同 如：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import) 优先级的算法。

4.4-选择器组合

5.CSS颜色用法

5.1-颜色RGB用法

RGB（红绿蓝），即颜色是由红绿蓝混合搭配出现的颜色，取值范围（0-255）。
用法：rgb（红色、绿色、蓝色）。

5.2-颜色HSL用法

HSL（Hue（色彩）、Saturation（饱和度）、Lightness（亮度）），即元素又这三种组成。
色彩取值范围（0-360）、饱和度和亮度取值范围（0-100%）
用法：hsl（色彩、饱和度、亮度）。

5.3-颜色饱和度

饱和度（alpha），即用来选择是否遮盖所做样式，取值范围（0-1）。
搭配rgb或hsl来使用，如：rgba（255,0,0,1）或hsla（0,100%，50%，1）等。

6.字体样式及用法

6.1-字体样式（font-family）

```
Serif衬线体：Georgia、宋体
```

Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑

Cursive手写体：Caflisch、Script、楷体

```
Fantasy：ComicSansMS、Papyrus
```

Monospace等宽字体：Consolas、Courier、中文字体

注意事项：字体列表最后写上通用字体族，且英文字体放在中文字体前。

6.2-字体大小（font-size）

```
关键字：small、medium、large
```
```
长度：px、em
```

百分数：相对于父元素字体大小

6.3-字体用法

font：style weight size/height family，如：

font：bold 14px Helbetica，serif

7.CSS属性继承

继承，顾名思义就是子元素会继承父元素中定义的样式，某些属性会自动继承其父元素的计算值，除非显式指定一个值。而显式指定一个值的方式我们称为显式继承。

8.CSS属性初始值

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

backgroun-color的初始值为transparent
margin-left的初始值为0

我们也可以使用intial关键字显式重置为初始值如：

background-color：intial

9.CSS布局

9.1-布局是什么？

9.2-布局相关技术

9.3-布局样式

width（宽度）:

```
制定content box的宽度
```

取值为长度、百分比、auto（由浏览器根据其他属性确实）

百分数相对于容器的content box宽度

height（高度）:

```
制定content box的高度
```

百分数相对于容器的content box宽度（容器有制定的高度时，百分数才生效）

例图：

padding（内边距）:

指定元素四个方向的内边距（上右下左）

```
百分数相对于容器的宽度 
```

border（边框）:

指定容器边框样式、粗细和颜色

三种属性：border-width/style/color

四个方向：border-top/right/bottom/left

margin（外边距）:

指定元素四个方向的外边距（上右下左）

```
百分数相对于容器的宽度 
```

取值可以是长度、百分数、auto（水平居中）

10.块级盒子和行级盒子

块级：不和其他盒子并列摆放，适合所有盒模型属性。
行级：和其他行级盒子摆放在一行或拆开成多行，盒模型中的width、height不适用。

10.1-displa属性

```
display：block（块级盒子）
```
```
display：inline（行级盒子）
```

display：inline-block（本身是行级，可以放在行级盒子中；可以设置宽高，作为一个整体不会被拆散成多行）

display：none（排版是完全被忽略）

11.CSS常规流

11.1-行级排版和块级排版

11.2-BFC内的排版规则

```
盒子从上到下摆放
```
```
垂直margin合并
```

BFC内盒子的margin不会与外面的合并

```
BFC不会和浮动元素重叠
```

11.3-Flex Box排版规则

它是一种新的排版上下文，它可以控制子级盒子的：

```
摆放的流向（右左上下）
```
```
摆放顺序
```
```
盒子宽度和高度
```
```
水平和垂直方向的对齐
```
```
是否允许折行
```

11.4-Flexibility

12.Grid布局

display：grid（使元素生成一个块级的Grid容器）

使用grid-template相关属性将容器划分为网络

```
设置每一个子项占哪些行列
```

13.position属性

```
static：默认值，非定位元素
```

relative：相对定位，相对自身原本位置偏移，不脱离文档流

absolute：绝对定位，相对非Static祖先元素定位

```
fixed：相对于视口绝对定位
```

13.1-相对定位（relative）

13.2-绝对定位（absolute）

14个人总结：

经过一天的CSS的学习，我算是把CSS的一些基本内容掌握完了。学习了CSS后，我感觉真的很有趣，以为它能为我的网页添加上一些有趣的样式，让我做的网页变得美观，尤其是掌握了各种选择器的用法，使得CSS的使用更为简洁省事。但在CSS使用中，还特别需要注意是伪类和伪元素的使用。同时我们需要掌握各种页面布局，根据自己的想法来调整内外边距，同时通过相对或绝对定位来来定义元素的位置。目前学完了HTML和CSS，我在web开发上面又前进了一小步，接下来我还要继续跟着青训营继续深入的学习web。以上就是我经过一天的学习的总结，希望能帮助到大家，谢谢！

理解CSS | 字节青训营笔记

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