这是我参与「第四届青训营 」笔记创作活动的的第2天
1、CSS是什么
- Cascading Style Sheets 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
例如 h1 { color: white; font-size: 20px; }
对h1 进行设置颜色和文字大小 基本格式就是.类别{属性1：属性值1；...}
2、在页面使用CSS
- 外联(推荐使用，内容与页面分离)
- 嵌入
- 内联
3、CSS是如何工作的
graph TD
加载HTML-->解析HTML--> 创建DOM树--> 展示页面
选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM数中的位置 伪类(pseudo-classes)
- 不基于标签和属性定位元素
- 两种伪类
- 结构伪类
- 状态伪类
4、CSS的常见属性
- alpha透明度
- font-family字体族
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
- font-size字体
- 关键词 small、medium、large
- 长度单位 px、em
- 百分数 相当于分元素字体大小
- text-align 设置元素内文本内容的水平对齐方式
- left right center
- text-decoration 添加下划线 删除线、上划线
- line-height 行间距
- 包含 上间距+文本高度+下间距
5、调试CSS
- 右键页面，选择检查
- ctrl+shift+I
6、CSS的元素显示模式和模式转换
- 块元素 div标签是典型的块元素
- 独占一行
- 高度、宽度、外边距、以及、内边距都可以控制
- 宽度默认为父级宽度的100%
- 是一个容器和盒子，里面可以放行内或者块级元素
- 行内元素
- 相邻元素内元素在一行上，可以显示多个
- 高度和宽度设置无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素 元素显示模式转换
- 转换为块元素 display：block
- 转换为行内元素 display：inline
- 转换为行内块 display：inline-black
7、CSS的优先级
从上到下权重逐渐变大
- 继承或者*
- 元素选择器
- 类选择器
- ID选择器
- 行内选择器
- ！ 如果是复合选择器，则会有权重叠加，需要计算权重
8、浮动特性
- 脱离标准普通流的控制移动到指定位置
- 浮动的盒子不在保留原先的位置
- 浮动元素具有行内块元素特性
- 选择器 {float：属性值；}
- none 不浮动
- left 左浮动
- right 右浮动
8、定位
- position ：static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
总结
通过这次课程的学习对CSS有了更深刻的理解包括CSS的一些常用属性和非常重要的浮动和定位这两个重要特性。
