这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
课程内容
一、CSS 概述
二、CSS 选择器
三、设置文本样式
四、CSS 工作原理
五、CSS 布局
- 盒模型
- Flex 布局
- Grid
- 定位
一、CSS概述
CSS（Cascadipg Style Sheets）：
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS：
外链： 将外部样式表链接到页面。这是将 CSS 附加到文档中的最常见和最有用的方法，可以将CSS链接到多个页面，从而允许使用相同的样式表设置所有页面的样式。
<link rel="stylesheet" href="styles.css">
嵌入： 内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。
内联： 内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素：
二、CSS选择器
选择器 Selector
找出页面中的元素，以便给他们设置样式：
- 通配选择器
* - 标签选择器
h1 - id选择器
#id - 类选择器
.class - 属性选择器
a[title]
伪类pseudo-classes：
不基于标签和属性定位元素：
- 状态伪类：link、visited、hover、active、focus
- 结构性伪类：fisrt child、last child
选择器组：
body,h1,h2,ul,ol,li{ }
三、设置文本样式
颜色
rgb (143,172,135)
hsl( 18,91%,50%) Hue Saturation Lightness
rgba (255,0,0,0.52) alpha透明度
hsla(0,100%,50%,0.52)
字体
- font-family：多设备字体兼容
- font-size:
关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小 - font-weight：100-900
- line-weight：行高
四、CSS 工作原理
五、CSS 布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
相关技术：
盒模型：
- Content box: 这个区域是用来显示内容，大小可以通过设置
width和height。 - Padding box: 包围在内容区域外部的空白区域；大小通过
padding相关属性设置。 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
六、课程小结
通过本次课程的学习，对CSS的工作过程有了大致的理解，并能运用所学的CSS做些文字上的格式化操作。关于 CSS 的布局，大多采用盒模型，所有的元素都被一个个的“盒子”包围着，通过视频学习掌握了盒模型的基本原理，通过背景和边框的设置可以绘制出不同的形状看起来很有趣。
