简介
- CSS：层叠样式表，CSS文件后缀为
.css。
- css用于在html文档中修改（美化）元素样式。
- 核心语法：选择器和声明（属性和属性值）。
引入方式
- 行内（内联）样式：在html文档元素标签内使用style添加。
- 内部样式：在html文档的head中使用
<style></style>配合css语法添加。
- 外部样式：在html文档之外编写css文件，在html文档内的head中使用
<link>引入css。
选择器
- 全局选择器：*{声明}。
- 元素选择器：元素名{声明}。
- 类选择器：.classname{声明}。
- id选择器：#id{声明}。
- 合并选择器：选择器1，选择器2，…{声明}。
- 关系选择器：
- 后代选择器：选择被E包裹的F元素：E F{声明}
- 子孙选择器：选择E元素的直接子元素F:E>F{声明}
- 相邻兄弟选择器：选择E元素后的第一个F元素：E+F{声明}
- 通用兄弟选择器：选择E元素后的所有F元素：E~F{声明}
- 选择器优先级：行内样式>ID选择器>类选择器>元素选择器
属性
- 字体
- color颜色
- font-size文本大小
- font-weight文本粗细
- font-style文本字体样式
- font-family字体类型
- 背景
- background-color背景颜色
- background-image背景图像
- background-repeat背景图像平铺样式
- background-size背景图像大小
- background-position背景图像起始位置
- 文本
- text-align文本水平对齐方式
- text-decoration文本的修饰，下划线、上划线、删除线等。
- text-transform控制文本大小写
- text-indent文本块中首行文本的缩进
- 表格
- border表格边框
- border-collapse折叠边框
- width，height表格宽度和高度
- text-align表格文本水平对齐方式
- padding表格填充
- background-color背景颜色；color文本颜色
盒子模型
- css盒子模型
- 所有html元素都可以看成一个盒子
- 实际内容(content)、内边距(padding)、边框(border)、外边距(margin)
- 弹性盒子模型
- 当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式。包含弹性容器和弹性子元素
- (弹性容器的属性)display：flex。开启弹性盒，设置子元素默认水平排列
- (弹性容器的属性)flex-direction规定弹性子元素在父容器中的位置
- (弹性容器的属性)justify-content把弹性项沿着弹性容器的主轴线对齐
- (弹性容器的属性)align-items设置弹性子元素在纵轴方向上的对齐方式
- (弹性子元素的属性)flex：val。按照val（扩展因子）的值作为比率分配剩余空间
文档流
- 文档中可显示对象在排列时所占用的空间和位置。
- 标准流在布局上有很多问题，不美观。
脱离文档流
- 浮动
- 增加一个浮层来防止内容
- float定义元素的浮动方向，只有左右浮动。
- 浮动副作用：
1. 造成父元素高度塌陷
2. 后续元素会受影响
- 清除浮动
1. 父元素设置高度
2. 受影响元素增加clear属性
3. 父元素添加overflow：hidden；clear：both
4. 伪对象方式，.fatherclass：：after{content:“”;clear:both}
- 定位
- 相对定位position:relative
- (脱离文档流)绝对定位position：absolute
- (脱离文档流)固定定位position：fixed
- Z-index属性值越大的元素越靠前
CSS新特性
- 圆角
border-radius
- 阴影
box-shadow
- 动画
- 创建动画
@keyframes name{0%{css样式}…100%{css样式}}
- 执行动画
animation：name duration timing-function delay iteration-count direction；
- 媒体查询
- 可以使页面在不同中断和不同屏幕大小的时候达到不同的效果
- 在head标签里添加
- 语法：@media screen and （max-width：**px）{样式}
- 雪碧图
- 把所有零星图片包含到一张大图中，一次传输整张图片，使用时移到指定位置即可
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到需要的位置
- 字体图标
- 使用字体图标库（阿里字体图标库）
- 从字体图标库中下载需要的字体图标
- 引入字体图标
总结
