CSS|青训营笔记

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

一、课程知识要点：

1.什么是CSS？ 2.CSS是如何工作的？ 3.各类选择器 4.图片，字体等相关的属性

二、详细知识点介绍：

什么是CSS？

Cascading Style Sheets 用来定义页面元素的样式（设置字体和颜色、设置位置和大小、添加动画效果）

CSS是如何工作的？

加载HTM、解析HTML、创建DOM树、展示页面

解析HTML、加载CSS、解析CSS（添加样式到DOM节点）、创建DOM树、展示页面。

选择器Selector：

找出页面中的元素，一边给他们设置样式 使用多种方式选择元素（按照标签名、类名或id，按照属性，按照DOM树中的位置）

伪类（pseudo-classes） 不基于标签和属性定位元素

几类伪类（状态伪类，结构性伪类）

选择器组合： 直接组合（AB）:说明A同时满足B

后代组合（A B）：选中B，如果它是A的子孙

亲子组合（A>B）:选中B，如果它是A的子元素

兄弟选择器（A~B）：选中B，如果它在A后且和A同级

相邻选择器（A+B）:选中B，如果它紧跟在A后面

颜色-HSL

Hue色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360。

Saturation饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。

Lightness亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha透明度

字体

通用字体族（Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体）

font-size 关键字：small、medium、large

长度：px、em

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

选择器的特异度（Specificity）

三、课后总结：

CSS用来修饰HTML,样式非常多，比如对字体、文本的修饰，需要我们慢慢去了解。