一、什么是CSS3

如何学习

SEO搜索引擎优化

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

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

CSS的注释是/**/

选择器 {

声明1;

声明2；

}

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

CSS的优势：

内容和表现分离网页结构表现统一可以复用样式十分丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎搜索三、CSS的三种导入方式行内样式，在标签元素中编写一个style属性，编写样式即可<h1 style="color:red">我是标题</h1>有多个属性用;分开内部样式在<style></style>中的外部样式写在外部CSS文件的优先级：就近原则，谁里这个元素最近拓展：外部样式两种写法链接式：属于HTML的在head中<link rel="stylesheet" href="path">好处就是结构和样式一起渲染出来导入式：属于CSS2.1<style>

@import url("path");

</style>缺点就是先渲染结构，在渲染样式四、选择器

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

1.基本选择器标签选择器标签 {

key:value;

}

标签1，标签2，.... {

}类选择器 class<style>

.类的名称 {

}

</style>

好处是可以多个标签复用类，选择所有class属性一致的标签，可以有多个用空格隔开id选择器<style>

#id名称 {

}

</style>

id必须保证全局唯一，一个id只能一个标签使用优先级：id > class > 标签2.高级选择器层次选择器后代选择器：后代选择器用于选取某元素的后代元素父元素 后代元素 {

}子选择器：子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素body>p {

}相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素div+p

{

background-color:yellow;

}通用选择器：选取所有指定元素之后的相邻兄弟元素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.为什么要美化有效的传递界面信息美化网页吸引用户凸显页面的主题提高用户的体验

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. 颜色   color2. 文本对齐方式   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.边框边框的粗细边框的颜色边框的样式

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

3.外边距

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

内边距一样

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

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

4.圆角边框

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

5.阴影

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

七、浮动1.标准文档流

自上而下的排布

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

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

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

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

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

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

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

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

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

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

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

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

4.父级元素边框塌陷

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

解决方案：

增加父级元素的高度在浮动元素后增加一个空的div标签，清除浮动overflow，解决溢出问题，在父级元素中增加一个overflow属性‘在父类添加一个伪类，:after#father：after {

content: '';

diaplay: block;

clear: both;

}5.对比display方向不可控制float浮动起来，会脱离文档标准流，所以要解决父级元素边框塌陷问题八、定位1.相对定位

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

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

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

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

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动画的属性

属性

描述

CSS

@keyframes

规定动画。

3

animation

所有动画属性的简写属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

3

animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

3

animation-delay

规定动画何时开始。默认是 0。

3

animation-iteration-count

规定动画被播放的次数。默认是 1。

3

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

3

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

3

十、过度1.过度

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

2.如何工作

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

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

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

示例：

div {transition: width 2s;}

3.多项改变

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

4.过度属性

属性

描述

CSS

transition

简写属性，用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

十一、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.转换属性

属性

描述

CSS

transform

向元素应用 2D 或 3D 转换。

3

transform-origin

允许你改变被转换元素的位置。

3

transform-style

规定被嵌套元素如何在 3D 空间中显示。

3

perspective

规定 3D 元素的透视效果。

3

perspective-origin

规定 3D 元素的底部位置。

3

backface-visibility

定义元素在不面对屏幕时是否可见。

3

十二、弹性盒子1.flex是什么flex是弹性布局，是一种非常流行的web页面快速布局解决方案flex可以实现子元素在父元素中自动伸缩，特别适合移动端布局2.flex术语

序列

术语

1

容器和项目是容器的子元素，容器为父元素(container / item)

2

主轴与交叉轴(main-axis / cross-arxis)

3

起始线与结束线(flex-start / flex-end)

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

序号

属性

描述

1

flex-direction

设置容器中的主轴方向：行/水平方向，列/垂直方向

2

flex-wrap

是否允许创建多行容器，即flex项目一行排列不下时，是否允许换行

3

flex-flow

简化flex-direction和flex-wrap属性

4

justify-content

设置flex项目在主轴上的对齐方式

5

align-items

设置flex项目在交叉轴上的对齐方式

6

align-content

多行容器中，项目在交叉轴上的对齐方式

4.项目属性

序号

属性

描述

1

flex-basis

项目宽度：项目分配主轴剩余空间之前，项目所占据的主轴空间高度

2

flex-grow

项目的宽度扩展：将主轴上的剩余空间按比例分配给指定项目

3

flex-shrink

项目的宽度收缩：将项目上多出空间按比例在项目间进行缩减

4

flex

上面三个属性的简化缩写flex: flex-grow flex-shrink flex-basis

5

align-self

单独定义某个项目在交叉轴上的对齐方式

6

order

自定义项目在主轴上的排列顺序，默认为0书写顺序，值越小位置越靠前

5.创建flex容器和flex项目给一个元素添加display: flex; 创建flex块级容器，内部的子元素自动成为flex项目或者给一个元素添加display: inline-flex; 创建flex行内容器， 内部子元素自动成为flex项目6.设置容器主轴方向与多行容器1.创建容器属性

序号

属性

描述

1

flex-direction

设置主轴方向

2

flex-wrap

设置多行容器

3

flex-flow

flex-direction和flex-wrap缩写

1.flex-direction属性值

序号

属性

描述

1

row

默认：主轴为水平方向(从左到右)

2

row-reverse

主轴为水平方向(从右到左反序)

3

column

设置主轴为垂直方向(从上到下)

4

column-reverse

设置主轴为垂直方向(从下到上)

2.flex-wrap属性值

序号

属性

描述

1

nowrap

默认：不换行，此时忽略项目尺寸

2

wrap

允许换行此时项目尺寸有效，即允许创建多行容器

3.flex-flow属性值

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

2.容器中项目对齐方式1.主轴项目对齐方式 justify-content属性

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

序号

属性值

描述

1

flex-start

默认：所有项目与主轴起始线对齐

2

flex-end

所有项目与主轴终止线对齐

3

center

所有项目与主轴中间线对齐，居中对齐

4

space-between

两端对齐：剩余空间在头尾项目之外的项目平均分配

5

spcae-around

分散对齐：剩余空间在每个项目两侧平均分配，每个项目两边的空间一样

6

space-evenly

平均对齐：剩余空间在每个项目之间平均分配

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

序号

属性值

描述

1

flex-start

默认所有项目与交叉轴起始线对齐

2

flex-end

所有项目与交叉轴终止线对齐

3

center

所有项目与交叉轴中间线对齐，居中对齐

注意

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

属性：align-content

序号

属性值

描述

1

stretch

默认：项目拉伸占据整个交叉轴

2

flex-start

所有项目与交叉轴起始线(顶部)对齐

3

flex-end

所有项目与交叉轴终止线对齐

4

center

所有项目与交叉轴中间线对齐：居中对齐

5

space-between

两端对齐：剩余空间在头尾项目之外的项目间平均分配

6

space-around

分散对齐：剩余空间在每个项目两侧平均分配

7

space-evenly

平均分配：剩余空间在每个项目之间平均分配

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

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

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

属性：align-self

序号

属性值

描述

1

auto

默认值：auto，继承align-items属性值

2

flex-start

与交叉轴起始线对齐

3

flex-end

与交叉轴终止线对齐

4

center

与交叉轴中间线对齐：居中对齐

5

stretch

在交叉轴方向上拉伸

6

baseline

与基线对齐

如果项目设置了高度，则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