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

一、本节课的重点内容

CSS选择器、布局

二、详细知识点介绍

1. CSS 是什么？

Cascading Style Sheets

用来定义页面元素的样式

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

包含选择器Selector，选择器 Property，属性值Value，声明Declaration

2. CSS 的使用方式

<!--- 外链 ---><link rel="stylesheet"href="/assets/style.css">
<!--- 嵌入 ---><style></style>
<!--- 内联 ---><p style="margin:1em 0">Example Content</p>

其中内联不推荐使用。

3. CSS 工作流程

4. 选择器详解

找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

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

4.1 通配选择器

4.2 标签选择器

元素选择器根据元素名称来选择 HTML 元素。

在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

4.3 id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

#para1
{ text-align:center;
color:red; }

4.4 类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

4.5 属性选择器

5. 伪类

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

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

6. 组合

名称	语法	说明	示例
直接组合	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

组合器组：

body,h1,h2,h3,h4,h5,h6,ul,ol,li {
    margin: 0;
    padding: 0;
}

[type="checkbox"], [type=radio"] {
    box-sizing: border-box;
    padding: 0;
}

7. 颜色

7.1 RGB

rgb(255,255,255)

7.2 HSL

hsl(255,255,255)

Hue：色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360。 Saturation：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。 Lightness：亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

8. 字体相关的CSS

8.1 font-family 字体族

通用字体族

Serif 衬线体
- Georgia、宋体
Sans-Serif 无衬线体
- Arial、Helvetica、黑体、微软雅黑
Cursive 手写体
- Caflisch Script、楷体
Fantasy
- Comic Sans MS, Papyrus, Zapfino
Monospace 等宽字体
- Consolas、Courier、中文字体

8.2 opacity 不透明度

设置元素的不透明级别

数值：0.0 （完全透明）到 1.0（完全不透明）

可选：inherit（从父元素继承 opacity 属性的值）

8.3 font-size 字体大小

可选项：small、medium、large 长度：px、em 百分数：（相对于父元素字体大小）

字体列表最后写上通用字体族
英文字体放在中文字体前面

8.4 line-height 行高

长度：px、em

8.5 font-weight 行高

可选项：normal、bold、bolder、lighter、inherit

数值：100-900

8.6 letter-spacing 字符间距

可选项：normal、length、inherit

数值：100-900

8.7 text-indent 首行缩进

数值：

length定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。

可选项：inherit（规定应该从父元素继承 text-indent 属性的值）

8.8 text-decoration 下划线

可选值：none（默认。定义标准的文本）、underline（定义文本下的一条线）、overline（定义文本上的一条线）、line-through（定义穿过文本下的一条线）、blink（定义闪烁的文本）、inherit（规定应该从父元素继承 text-decoration 属性的值）

8.9 white-space

可选项：normal（默认。空白会被浏览器忽略）、pre（空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签）、nowrap（文本不会换行，文本会在在同一行上继续，直到遇到
标签为止）、pre-wrap（保留空白符序列，但是正常地进行换行。）、pre-line（合并空白符序列，但是保留换行符。）、inherit（规定应该从父元素继承 white-space 属性的值。）

9. 选择器的优先级

1、行内样式 2、ID选择器 3、class、属性、伪类选择器 4、类型和伪元素选择器

10. 继承

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

11. 布局

11.1 什么是布局

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和
内容等信息来计算

11.2 布局相关技术

常规流：行级、块级、表格布局、FlexBox、Grid布局。

浮动、绝对定位

三、个人课后总结

Flex布局挺实用的

CSS基础｜ 青训营笔记