1.css的介绍
1.1 W3C的介绍
结构层：HTML 表现层：CSS 行为层：JavaScript(js)
1.2 什么是css
css是层叠样式表
2.层叠样式表CSS
2.1 css的引入方式
四种：行内样式、内嵌样式、外链样式、导入样式
2.1.1 行内样式
行内样式又叫做标签样式，它是在标签里面加上style属性
2.1.2 内嵌样式
写在style标签内（style标签写在head标签内）
2.1.3 外链样式
第一步：新建一个.css的文件，专门写css样式
第二步：head标签内需要写入link标签（link标签可以写在body标签内，但是不推荐）
第三步：link标签内href属性将css文件导入（路径（绝对路径和相对路径））
2.1.4 导入样式
通过@import url （“”）进行导入.css文件
就近原则：距离修饰的标签越近，优先级越高
概念来讲：行内>内嵌>外链>导入
3. 选择器
3.1 基本选择器
标签选择器（根据标签的名称获取）
ID选择器（根据id为XXX的标签）
类选择器 (根据class为XXX的标签)
通用选择器 (通配符)
效果图如下：
四种选择器的优先级：ID > 类 > 标签 > 通配符
3.2 包含选择器
子代选择器 ------ 获取某个标签的第一级子标签
后代选择器------ 获取某个标签内所有的子标签
分组选择器 ------ 逗号选择器 ，可以给多个标签加上样式，通过逗号隔开
效果图如下：
3.3 属性选择器
3.4 伪类选择器
同一个标签，根据不同的状态，有不同的样式，这就叫伪类，使用冒号:表示的
注意：这四种超链接的伪类选择器的顺序是一定的，不可以改变，他们的顺序 :link :visited :hover :active
3.5 伪元素选择器
注意：如果要使用before和after的话，一定要加上content（内容）属性
4. CSS常见样式
4.1 样式的基本语法
4.2 常见的样式
控制字体 ：
设置字号 -------- font-size:12px;
设置颜色 ------ color:#rrggbb;
设置字体 -------- font-family:“宋体”；
设置行高 ----- line-height:150% 1.5em
设置字体的粗细 ----- font-weight:normal(正常 默认值) blod（粗体）
样式的特点：
1、继承性--------网页中子元素将继承父元素的样式
2、层叠性 ------网页中子元素定了与父元素相同的样式，则子元素的样式会覆盖掉父元素的样式，后面 定义的样式会覆盖前面定义的样式
控制文本
text-indent ：2em (可以取负值) -------- 设置文本的缩进
text-align : left center right ------- 文本的对齐方式
text - transform : none(正常的大小) capitalize(将每个单词的第一个字母住那换为大写)uppercase(转 换为大写) lowercase（转换为小写） --------文本的大小写
5. 布局
5.1 盒子布局
border---- 边框
padding ----- 内边距
margin ----- 外边距
5.2 元素的分类
块级元素： 独占一行，可以设置高和宽 div p hn等
内联元素：不会自动换行，设置宽和高的时候是不起作用 span a等
块级元素和内联元素可以进行 互相转换 ------- 使用dispaly
效果图如下：
css隐藏元素的方式：display:none；width:0;height:0;
5.3 浮动布局
通过设置float属性进行布局 浮动是css实现布局的一种方式
float取值： none:不浮动， left：左浮（对象向左浮动，而后面的内容流向对象的右侧） ，right：右浮（对象向右浮动，而后面的内容流向对象的左侧）
注意：left:前面的元素浮动效果后，会对后面元素产生影响 ------ 通过消除浮动来解决
clear属性： none : 默认值 允许两边都可以有浮动对象， left : 不允许左边有浮动对象， right：不允许右边有浮动对象 ，both： 不允许两侧有浮动对象
5.4 定位布局
属性：position ----- 设置对象的定位方式
值： static ----- 静态定位（没有定位）默认值; absolute ------ 绝对定位：将对象从文档流中分离出来，通过设置left、right、top、bottom四个方向的 相对于父级对象进行绝对定位，如果不存在这样的父级对象，则依据body对象; relative------- 相对定位：对象不从文档流中分离出来，通过设置left、right、top、bottom四个方向相 对于自身位置进行相对定位
效果图如下：
5.5 其他属性
1.overflow：设置当对象内容超过指定的高度及宽度的时候如何管理内容
visible ------默认值 不剪切内容也不添加滚动条
auto ----- 在必需时对象内容才会被剪切或者添加滚动条
hidden ----- 不显示超过对象尺寸的内容
scroll ----- 总是显示滚动条
3种隐藏元素的方式： 1、 display : none; 2、 width:0;height:0; 3、overflow:hidden;
2.zoom：设置或者检索对象的缩放比例
normal : 默认值 使用对象的实际尺寸
number: 百分比|无符号的浮点实数 浮点数值为1.0 或者百分数100%的时候相当于此属性是normal
5.6 CSS3弹性盒子
弹性盒子是由弹性容器（Flexible 或者 flexbox）和弹性元素(Flex item)组成 弹性容器时通过设置display属性来实现的------ display:flex 或者inline-flex 一个弹性容器可以包含一个或者多个弹性元素
常见的属性 ：
flex-direction ------ 指的时弹性容器中子元素的排列方式
flex-wrap ------- 指的时弹性盒子的子元素超出父容器时是否换行
flex-flow ------flex-direction和flex-wrap 的简写
align-items -----设置的时弹性盒子中的元素在侧轴（纵轴）上的对齐方式
justify-content ----设置的时弹性盒子中的元素在主轴（横轴）上的对齐方式
align-content -----修改了flex-wrap 的行为，类似于align-items ，但是它不对齐弹性项目，而是对齐弹 性线
flex-direction：
row ------ 横向从左到右排列（左对齐），默认值
row-reverse ----反向横向排列(右对齐)，从后往前排列，最后一项排在最前面
column ---- 纵向排列
column-reverse ---反向纵向排列，从后往前排列，最后一项排在最前面
flex-wrap ：
flex-flow：
效果图如下：
align-items ：
justify-content：
align-content：
其他属性： order align-self flex-basis flex-grow flex-shrink flex
6. CSS中的特殊样式
6.1 CSS中变换效果
通过转换使元素大小、位置、形状发生一些改变，包括2D和3D转换
2D转换 ：
CSS3提供了2D转换，通过transform属性进行设置 translate() ----- 从当前位置移动元素（根据X轴和Y轴给定的参数） ----- 是一种平移的效果
rotate() -----根据给定的角度顺时针或者逆时针旋转元素，可以取负值-------元素进行逆时针旋转
scale() -----增加或者减少元素的大小(根据给定的高度或者宽度参数)
scaleX() -------增加或者减少宽度
scaleY() -------增加或者减少高度
skew() -----使元素沿着X轴和Y轴倾斜给定的角度
skewX() -----使元素沿着X轴倾斜给定的角度
skewY() -----使元素沿着Y轴倾斜给定的角度
matrix() ------ 整合所有的2D转换的方法：
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和 倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
3D转换：
rotateX（） ------- 给定角度X轴上旋转
rotateY（） ------- 给定角度Y轴上旋转
rotateZ（） ------- 给定角度Z轴上旋转
6.2 CSS过渡效果
元素从一种效果过渡到另一种效果上
要求： 1、效果添加到哪一个css属性 2、过渡效果的时常 3、效果触发的动作(：hover)
多项改变 ：同时可以制定多个属性进行过渡效果，添加多个属性的时候，用逗号隔开
指定速度的曲线： transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
1.ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
2.linear - 规定从开始到结束具有相同速度的过渡效果
3.ease-in -规定缓慢开始的过渡效果
4.ease-out - 规定缓慢结束的过渡效果
5.ease-in-out - 规定开始和结束较慢的过渡效果
6.cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
transition-delay 属性规定过渡效果的延迟（以秒计）
6.3 动画效果
@keyframes规则创建动画，实现的是将一个元素从一个css样式变换到另一个css样式，使用的是from 和to两个关键字(0% 100%)
animation-delay 属性规定动画开始的延迟时间,负值也是允许的。如果使用负值，则动画将开始播 放，如同已播放 n 秒
animation-iteration-count 属性指定动画应运行的次数,使用值 "infinite" 使动画永远持续下去 animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：
1.normal - 动画正常播放（向前）。默认值
2.reverse - 动画以反方向播放（向后）
3.alternate - 动画先向前播放，然后向后
4.alternate-reverse - 动画先向后播放，然后向前
5.animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
1.ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
2.linear - 规定从开始到结束的速度相同的动画
3.ease-in - 规定慢速开始的动画
4.ease-out - 规定慢速结束的动画
5.ease-in-out - 指定开始和结束较慢的动画
6.cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值
animation-fill-mode 属性可接受以下值：
1.none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
2.forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-3.iteration-count）。
4.backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动 画延迟期间保留该值。
5.both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
6.4 渐变效果
渐变------可以在两个或者多个颜色之间进行平稳的过渡 ；线性渐变（向下、向上、向左、向右、向对角线） ；径向渐变（由中心定义）
线性渐变：语法格式： background-image:linear-gradient( direction,color1,color2........ )
效果图如下：
径向渐变： 语法格式：background-image: radial-gradient(shape size at position, start-color, ..., lastcolor);
默认地，shape 为椭圆形，size 为最远角，position 为中心 size 参数定义渐变的大小。
它可接受四个值：
1.closest-side
2.farthest-side
3.closest-corner
4.farthest-corner
效果图如下：
6.5 圆角
border-radius属性实现圆角的样式
border-radius 属性可以接受一到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三 个用于右下角）
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）
效果图如下：
6.6 多列
将文本内容设计为向报纸一样多列展示布局
column-count ------设置要分割的列数
效果图如下：
