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

CSS学习|青训营笔记

1. CSS 简介

CSS: Cascadling Style Sheets（层叠样式表）

可以用来定义页面元素的样式

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

2.CSS基础代码

如下图（图上Property为属性，课件好像打错了）

首先为一个选择器(Selector)，选择修饰的对象； 其次限定属性(Property)，定义其对应属性值(value); 属性及属性值构成一个声明(declaration)

选择器

找出页面中的元素，一边给它们设置样式

1. 通配选择器 *{}指代所有标签
2. 标签选择器 h1{} 对应h1标签的CSS文件
3. id选择器 #id{} 可通过#后跟id修饰对应标签
4. 类选择器 .class{} 通过.后跟类名修饰对应标签
5. 属性选择器
   1. [属性名]{} 通过[]中放属性名可以来修饰对应属性
   2. 标签名[属性名="xxx"] 通过标签名和对应某个属性名更细致地修饰对应属性
   3. 为2的细化 标签名[属性名 正则匹配 "xxx"] 例：a[href$=".jpg"] 对a标签href属性后缀为.jpg的进行修饰
6. 伪类选择器：不通过属性而选择属性，通过伪类
   1. 状态伪类：当元素处于某个状态时，才会被选中 例：a:link 默认状态 a:visited 访问过后的状态 a:hover 鼠标移上去后显示样式 a:active 鼠标按下去后显示样式 以上根据标签的状态进行修饰 CSS/状态伪类
   2. 结构性伪类：根据dom节点在dom树中的相对位置来进行选择 例：li：first-child li：list-child 具体看课堂上的例子 CSS/结构性伪类

选择器的组合

对于上面所说的所有选择器，我们可以将它们组合起来使用

课堂例子CSS/选择器组合

3.CSS的三种使用

1. 外链:用link标签链接CSS文件
2. 嵌入：用style标签直接写CSS代码
3. 内联：在HTML标签中直接定义style属性，写CSS代码（不推荐

4. CSS如何工作

颜色

RGB

通过三原色红，黄，蓝的比例来表示所有颜色 可通过6位16进制数来表示 #000000 ~ #ffffff 从左到右每两位16进制数分别表示R，G，B的值

HSL

Hue,色相是色彩的基本属性，如红色、黄色等，取值范围是0-360

Saturation,饱和度是指色彩的鲜艳程度、越高约鲜艳，取值范围0-100%

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

alpha (透明度)

为0~1的数字，0表示透明，1表示不透明

在rgb中可在原来6位16进制数后补2位表示透明度

也可以通过函数

rgba(0 ~ 255,0 ~ 255,0 ~ 255,0 ~ 1)

hsla(0 ~ 360,0 ~ 100%,0 ~ 100%,0 ~ 1)

字体

• 通用字体族：Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fansaty、monospace等宽字体。
• font-size:设置字体大小。
• font-width：字重，设置字体的粗细，取值为100~900
• line-height：设置行高

调试CSS

如果在一些网页看到好看的修饰，可以直接F12看对应的CSS的代码，这极大的方便了前端工程师去学习。

个人总结

之前主要写过原生三件套代码，对CSS一些复杂的修饰并没有运用的太多，在这次经历课程学习后，对cSS有了更深一步的认识，但对于后两节课的内容还需要一些时间去消化。在之后的大项目中，可以尝试去实现一些复杂的优美的CSS修饰。