一、什么是CSS3

如何学习

SEO搜索引擎优化

0. CSS是什么
0. Cascading Sheet层叠级联样式表，表现，网页美化
1. CSS发展史：CSS1.0 CSS2.0 DIV + CSS HTML和CSS结构分离 CSS 2.1 CSS3.0
1. CSS怎么用
2. CSS选择器
3. 美化网页
4. 盒子模型
5. 浮动
6. 定位
7. 网页动画（菜鸟教程）

二、快速入门

规范：在<style></style>中写CSS代码

CSS的注释是/**/

选择器 {

声明1;

声明2；

}

在CSS文件里不用写<style>标签

CSS的优势：

0. 内容和表现分离
1. 网页结构表现统一可以复用
2. 样式十分丰富
3. 建议使用独立于html的css文件
4. 利用SEO，容易被搜索引擎搜索

三、CSS的三种导入方式

0. 行内样式，在标签元素中编写一个style属性，编写样式即可
1. <h1 style="color:red">我是标题</h1>有多个属性用;分开
2. 内部样式
3. 在<style></style>中的
4. 外部样式
5. 写在外部CSS文件的
6. 优先级：就近原则，谁里这个元素最近
7. 拓展：外部样式两种写法
8. 链接式：属于HTML的
9. 在head中<link rel="stylesheet" href="path">
10. 好处就是结构和样式一起渲染出来
11. 导入式：属于CSS2.1
12. <style>
    @import url("path");
    </style>
13. 缺点就是先渲染结构，在渲染样式

四、选择器

作用：选择页面上的某一个或者某一类元素

1.基本选择器

0. 标签选择器
1. 标签 {
   key:value;
   }
   标签1，标签2，.... {
   
   }
2. 类选择器 class
3. <style>
   .类的名称 {
   
   }
   </style>
   好处是可以多个标签复用类，选择所有class属性一致的标签，可以有多个用空格隔开
4. id选择器
5. <style>
   #id名称 {
   
   }
   </style>
   id必须保证全局唯一，一个id只能一个标签使用
6. 优先级：id > class > 标签

2.高级选择器

0. 层次选择器
0. 后代选择器：后代选择器用于选取某元素的后代元素
1. 父元素 后代元素 {
   
   }
2. 子选择器：子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素
3. body>p {
   
   }
4. 相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
5. div+p
   {
   background-color:yellow;
   }
6. 通用选择器：选取所有指定元素之后的相邻兄弟元素
7. div~p
   {
   background-color:yellow;
   }

3.结构伪类选择器

伪类：就是有一些条件

1.选择第一个子元素

ul li:first-child {

}

2.选择最后一个子元素

ul li:last-child {

}

3.选择当前元素的父级元素的子元素的第一个，且是p，在本例中。这个是按照类型进行选择

p:nth-child(1) {

}

4.选中父元素下的p元素的第二个，这个是按照顺序选择

p:nth-of-type(1) {

}

4.属性选择器

属性选择器的格式
1.属性名：存在id属性的元素 a[id]{

}
2.属性名 = 属性值：a[id=first]{

}
注意：=是绝对等于   *=是包含这个元素
3.a中href中以http开头的 a[href^=http]{

}
注意：可以使用正则表达式

五、美化网页

1.为什么要美化

0. 有效的传递界面信息
1. 美化网页吸引用户
2. 凸显页面的主题
3. 提高用户的体验

span标签：重点要突出的字使用span标签括起来

2.字体样式

1.字体    font-family:字体1, 字体2,...;
2.字体大小  font-size:20px;
3.字体粗细  font-wigth:bold或者使用数字最大是900;
4.字体的颜色 color:颜色;
5.字体风格  font-style:italic;
综合写法：
font:字体粗细, 字体大小/字体行高, 字体, 字体颜色, 字体的;

3.文本样式

1. 颜色   color
2. 文本对齐方式   text-slign:center;
3. 首行缩进 text-indent:2em;//1em代表一个字符
4. 行高   line-height:200px;行高和块的高度一致，就可以上下居中
5. 下划线  text-decoration: underline;
6. 中划线  text-decoration: line-through;
7. 上划线  text-decoration: overline;
8. 超链接伪类    
    a{
        默认颜色
    }
    a:hover {
        鼠标触及的颜色
    }
    a:active {
        鼠标点击未释放的颜色
    }
9. 文本阴影 text-shadow:颜色 水平偏移 垂直偏移 模糊半径;

4.列表样式

<style>
    li {
        list-style:nonoe;  //列表去掉点
    }
</style>

5.背景图像应用及渐变

背景图片

background-image:url("path");
默认是平铺的
background-repeat: ;
background-position:x y;
综合写法：
background:背景颜色 url("") x方向位置 y方向位置 平铺 

背景颜色渐变

六、盒子模型

1.什么是盒子

• margin：外边距
• padding：内边距
• border：边框
• 注意：body默认会有一个外边距

2.边框

0. 边框的粗细
1. 边框的颜色
2. 边框的样式

<style>
    form{
     border: 1px red solid;   
    }
</style>

3.外边距

综合写法：
margin:上 下 左 右;
外边距的妙用：居中元素
margin:0 auto;居中 前提：外面的元素是个块元素，块元素有固定的宽度 

内边距一样

盒子的计算方式，你这个元素到底多大?

元素的大小 = margin +border + 内容的宽度

4.圆角边框

border-radius: 左上 右上 右下 左下;

5.阴影

box-shadow:阴影样子, x偏移量, y偏移量, 模糊半径, 阴影颜色;

七、浮动

1.标准文档流

自上而下的排布

行内元素可以被包含在块级元素中，反之不可以

2.display

0. block转换成块元素
1. inline-block行内快元素，保持块元素的性质，但是可以内联，在一行
2. inline行内元素
3. none不显示元素

3.浮动

1.浮动：会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

2.相邻的浮动元素：如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

3.清除浮动：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。这样既有浮动的效果，也有块元素的效果

clear:right;右侧不允许有浮动
clear:left;左侧不允许有浮动
clear:both;两侧都不允许有浮动

float:right;右浮动
float:left;左浮动

4.父级元素边框塌陷

浮动后，元素不在父级元素里

解决方案：

0. 增加父级元素的高度
1. 在浮动元素后增加一个空的div标签，清除浮动
2. overflow，解决溢出问题，在父级元素中增加一个overflow属性‘
3. 在父类添加一个伪类，:after
4. #father：after {
   content: '';
   diaplay: block;
   clear: both;
   }

5.对比

• display
• 方向不可控制
• float
• 浮动起来，会脱离文档标准流，所以要解决父级元素边框塌陷问题

八、定位

1.相对定位

相对于自己原来的位置，进行偏移

position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;

相对定位的话，他原来的位置会被保留，不会脱离标准文档流

2.绝对定位

0. 父级元素没有定位的前提下，相对于浏览器定位
1. 父级元素有定位时，相对与父级元素

position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;

绝对定位后，他不在文档标准流，原来的位置不保留

3.固定定位

position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;

相对于浏览器的位置，固定不动

4.z-index

就是把图层置顶、置地

opacity:0.5;设置透明度

filter:alpha(opacity=0.5);

九、动画

什么是CSS3动画

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。
• 您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
• 0% 是动画的开始，100% 是动画的完成。
• 示例：
• @keyframes myfirst
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }
  
  @-webkit-keyframes myfirst /* Safari 与 Chrome */
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }

1.创建动画

@keyframes规则是创建动画，规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

示例：

@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

2.把动画绑定到一个选择器上

使用@keyframes创建动画，把他绑定到一个选择器上，否则动画不会有效果，指定至少把这两个CSS3的动画属性绑定向一个选择器：
1.规定动画名称
2.规定动画的时长  不指定时长，动画无效，因为默认的时长为0

示例：

把myfirst动画绑定到div元素上，动画时长5秒
div {
    animation: myfirst 5s;
}

3.CSS3动画的属性

十、过度

1.过度

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候

2.如何工作

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

示例：

div {
transition: width 2s;
}

3.多项改变

div {
transition: width 2s, height 2s transfrom 2s;
}

4.过度属性

十一、CSS32D转换

1.转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2.如何工作

转换的效果是让某个元素改变形状，大小和位置。

3.2D转换

1.translate(): translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

示例：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

示例：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

示例:

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

4.skew(): 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

示例：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

4.3D转换

1.rotateX()：围绕其在一个给定度数X轴旋转的元素。

示例：

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

2.rotateY()：围绕其在一个给定度数Y轴旋转的元素。

示例：

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

3.转换属性

十二、弹性盒子

1.flex是什么

• flex是弹性布局，是一种非常流行的web页面快速布局解决方案
• flex可以实现子元素在父元素中自动伸缩，特别适合移动端布局

2.flex术语

• 项目必须沿着主轴排列，所以布局的时候，第一件事就是确定好主轴
• 起始线与结束线，就是主轴的起点和终点，也就是两端
• 交叉轴，依赖于主轴存在，不能单独存在，垂直于主轴

3.容器属性

4.项目属性

5.创建flex容器和flex项目

• 给一个元素添加display: flex; 创建flex块级容器，内部的子元素自动成为flex项目
• 或者给一个元素添加display: inline-flex; 创建flex行内容器， 内部子元素自动成为flex项目

6.设置容器主轴方向与多行容器

1.创建容器属性

1.flex-direction属性值

2.flex-wrap属性值

3.flex-flow属性值

flex-flow: 主轴方向 多行容器

2.容器中项目对齐方式

1.主轴项目对齐方式 justify-content属性

主轴上要有剩余空间对齐才有效

2.交叉轴上的项目对齐方式align-items

注意

• 单行容器中，交叉轴上只有一个项目，所有剩余空间不需要在项目间分配
• 因此没有像主轴对齐的三个属性：space-between，spcae-around，space-evenly

3.多行容器的项目对齐方式

属性：align-content

注意：多行容器中，交叉轴上可能会有多个项目，剩余空间在项目之间分配才有意义

多行容器也只是只有一个主轴和一个交叉轴，只是在主轴上放不下了换行形成的

3.单个项目对齐方式

1.设置单个项目在交叉轴上的对齐方式

属性：align-self

• 如果项目设置了高度，则stretch值无效
• baseline：除非全部 项目与基线对齐，否则效果与起始线对齐是相同的

4.单个项目的排列顺序

1.属性order

用来调整每个项目在主轴上排列顺序

属性值为0，默认值按书写顺序显式，属性值为值越大越靠后显示

5.单个项目的放大/缩小因子

1.设置项目在主轴 上的放大因子

flex-grow属性

• 在主轴上存在剩余空间是，flex-grow才有效
• 该属性的值，成为放大因子
• 常见属性
• 0 默认值，不放大，保持原值
• n 放大因子，正整数

2.设置项目在主轴上的缩小因子

flex-shrink属性

• 在主轴上空间容纳不下所有项目时，flex-shrink才有意义
• 该属性的值名称为最小因子，
• 1 默认值，允许缩小适应主轴空间变化
• 0 不缩小，保持原始大小
• n缩小因子，正整数

3.设置项目在主轴上的计算计准尺寸

flex-basis属性

• 再分配多余空间之前，项目暂居的主轴空间
• 浏览器根据这个属性，计算主轴是否有多余空间
• 该属性会覆盖项目原始大小
• 该属性会被项目最小高度/最小宽度值覆盖
• auto 默认值项目原始大小
• px像素
• %百分比

优先级：项目大小<flex-basis<min-width/height