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

一、本堂课重点内容

• CSS简介及引入
• 选择器及权重
• 颜色（RGB、HSL）及透明度
• 字体
• 布局

二、详细知识点介绍

1、CSS（样式）

Cascading Style Sheets 层叠样式表 引入方式分为：外链、嵌入和内联

2、选择器

选择器分为通配选择器、标签选择器、ID选择器、类选择器、属性选择器等

3、颜色

rgb、rgba、hsl、hsla、颜色名称、十六进制。
HSLA:色调（0-360）、饱和度（0%-100%）、亮度（0%-100%）、透明度（0-1）

4、字体

font-size，font-family,line-heigth,text-align,spacing,text-indent,text-decoration,white-space等

5、布局

盒子

内容区（content--width、height）、内边距（padding）、边框（border）、外边距（margin）

flex布局和grid布局

flex 布局：一维布局 grid 布局：二维布局

定位

定位（position）:相对定位，绝对定位，固定定位，粘滞定位

• static 默认值，元素是静止的没有开启定位
• relative 相对定位
• absolute 绝对定位
• fixed 开启元素的固定定位
• sticky 开启元素的粘滞定位

三、实践练习例子

`text1 { /加粗，bold Bolder lighter normal（默认）100-900 / font-weight: lighter; / 文字样式 normal oblique（倾斜） italic（斜体） inherit（继承） / font-style: italic; / 大小，larger smaller （length）30px em:相当于当前元素 rem：相当于根元素/ font-size: larger; /* 字体样式 serif：称线字体 sans-serif：非称线字体 monospace：等宽字体 / font-family: "Times New Roman", Georgia, Serif; / 行高 / line-height: 100px; / 2222把段落设置为小型大写字母字体： / font-variant: small-caps; / 颜色 看l3 / color: red; / 首行缩进 / text-indent: 2em; / 字符间隔 / letter-spacing: 2em; / 单词间距 / word-spacing: 15px; / 文本位置 center left right justify(文本两端对齐) / text-align: center; / 控制文本的垂直对齐方式 baseline sub(文本下标) super（文本上标） top text-top middle bottom text-bottom % inherit*/ vertical-align: 100%; /* 文本修饰 none：无 underline 下划线 line-through 删除线 overline 上划线 颜色ie不支持*/ text-decoration: overline rgb(86, 58, 211); }

`

四、课后个人总结

CSS的语句有很多，能实现的功能也多种多样。在本次课程，回忆起了以前学习的内容，还是需要经常练习。

五、引用参考

bytedance.feishu.cn/file/boxcn9… bytedance.feishu.cn/file/boxcn7…