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

初识CSS课程笔记

一、课程重点

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染
调试 CSS

二、详细知识点：

1、CSS是什么？

首先明确概念

CSS： Cascading Style Sheets 层叠样式表
用来定义页面元素的样式，设置字体和颜色、设置位置和大小、添加动画效果等都由CSS完成。
HTML提供内容，CSS提供样式，JavaScript提供行为

2、使用CSS的方式

外链
嵌入
內联

3、CSS是如何工作的？

首先，加载并解析 HTML ，然后构建 DOM 树。
解析HTML的过程中，同时加载并解析CSS，并将解析出来的样式添加到DOM节点
最终展示页面。

T57HW__JSBGZAS~O_}_23XV.png

4、选择器Selector

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

（2）使用多种方式选择元素

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

（3）分类

通配选择器
标签选择器
id选择器
类选择器
属性选择器

5、伪类

伪类(pseudo-classes) 。不基于标签和属性定位元素。

分类

状态伪类
结构性伪类

6、组合

下面是几种组合方式

直接组合是AB都选中
其他几种组合是只选中B，但是A要满足条件

图片4.png

7、选择器组

几种选择器一起设置同一种属性，使代码更简洁，编写也方便

8、颜色

RGBA：红绿蓝透明

000000黑色，FFFFFF白色
HSL：色相饱和度亮度
也可以英文单词指定某一种颜色

9、字体font-family

设置字体注意顺序：

英文中文，一般英文一种格式、中文另一种格式。这样可以使中英文的格式不一样，推荐使用这种方式。
中文英文，一般中英文都用中文的格式。

10、font-size

关键字

small、medium、large

小中大
长度

px、em

px像素 em相对长度单位
百分数

相对于父元素字体大小

11、字重（粗细）

所有字体的字重都可以设置两种normal-400 bold-700
部分可以设置100-900之间的粗细

12、行高

默认是1.1-1.2，需要调整

13、text-align

left、center、right、justify

左对齐、中间对齐、右对齐、两端对齐

14、spacing

间距

包含字母间的间距和单词间的间距

text-indent

15、缩进

text-decoration

16、文字修饰

none、underline、line-through、overline

无修饰、下划线、删除线（中间线）、上划线

17、white-space

normal

默认。空白会被浏览器忽略。【多个空格会合并仅保留一个。一行内显示不下的时候会自动换行】

nowrap

文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

空白会被浏览器保留。【空格、换行都保留】

pre-wrap

保留空白符序列，但是正常地进行换行。【保留空格，该换行还是换行。一行内显示不下的时候会自动换行】

pre-line

合并空白符序列，但是保留换行符。【合并空格，保留换行】

18、调试CSS

右键点击页面，选择「检查」
使用快捷键

ctrl+Shift+I ( windows)

Cmd+Opt+I (Mac)

三、课后个人总结：

CSS属性，各种样式很多，其含义和注意事项需要多用多练才能熟练掌握。
尽可能使用外部样式表，而尽量避免使用内部样式表。
HTML仅仅提供内容，CSS提供样式，JavaScript提供行为。
本篇文章是简单的初识，下篇文章对CSS深入探讨。

初识CSS课程笔记 ｜ 青训营笔记