一、什么是CSS3
如何学习
SEO搜索引擎优化
- CSS是什么
- Cascading Sheet层叠级联样式表,表现,网页美化
- CSS发展史:CSS1.0 CSS2.0 DIV + CSS HTML和CSS结构分离 CSS 2.1 CSS3.0
- CSS怎么用
- CSS选择器
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画(菜鸟教程)
二、快速入门
规范:在中写CSS代码
CSS的注释是/**/
选择器 {
声明1;
声明2;
}
在CSS文件里不用写标签
CSS的优势:
- 内容和表现分离
- 网页结构表现统一可以复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎搜索
三、CSS的三种导入方式
- 行内样式,在标签元素中编写一个style属性,编写样式即可
- <h1 style="color:red">我是标题有多个属性用;分开
- 内部样式
- 在中的
- 外部样式
- 写在外部CSS文件的
- 优先级:就近原则,谁里这个元素最近
- 拓展:外部样式两种写法
- 链接式:属于HTML的
- 在head中<link rel="stylesheet" href="path">
- 好处就是结构和样式一起渲染出来
- 导入式:属于CSS2.1
@import url("path");- 缺点就是先渲染结构,在渲染样式
四、选择器
作用:选择页面上的某一个或者某一类元素
1.基本选择器
- 标签选择器
- 标签 {
key:value;
}
标签1,标签2,.... {
} - 类选择器 class
-
.类的名称 {
}
好处是可以多个标签复用类,选择所有class属性一致的标签,可以有多个用空格隔开 - id选择器
#id名称 {
}
id必须保证全局唯一,一个id只能一个标签使用- 优先级:id > class > 标签
2.高级选择器
- 层次选择器
- 后代选择器:后代选择器用于选取某元素的后代元素
- 父元素 后代元素 {
} - 子选择器:子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素
- body>p {
} - 相邻兄弟选择器:相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素
- div+p
{
background-color:yellow;
} - 通用选择器:选取所有指定元素之后的相邻兄弟元素
- div~p
{
background-color:yellow;
}
3.结构伪类选择器
伪类:就是有一些条件
1.选择第一个子元素
Bashul li:first-child { }
2.选择最后一个子元素
Bashul 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. 颜色 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.列表样式
5.背景图像应用及渐变
背景图片
background-image:url("path"); 默认是平铺的 background-repeat: ; background-position:x y; 综合写法: background:背景颜色 url("") x方向位置 y方向位置 平铺
背景颜色渐变
六、盒子模型
1.什么是盒子
- margin:外边距
- padding:内边距
- border:边框
- 注意:body默认会有一个外边距
2.边框
- 边框的粗细
- 边框的颜色
- 边框的样式
3.外边距
综合写法: margin:上 下 左 右; 外边距的妙用:居中元素 margin:0 auto;居中 前提:外面的元素是个块元素,块元素有固定的宽度
内边距一样
盒子的计算方式,你这个元素到底多大?
元素的大小 = margin +border + 内容的宽度
4.圆角边框
border-radius: 左上 右上 右下 左下;
5.阴影
box-shadow:阴影样子, x偏移量, y偏移量, 模糊半径, 阴影颜色;
七、浮动
1.标准文档流
自上而下的排布
行内元素可以被包含在块级元素中,反之不可以
2.display
- block转换成块元素
- 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(
);表示只在X轴(水平方向)倾斜。 - skewY(
);表示只在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-evenly
3.多行容器的项目对齐方式
属性: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