!](https://img-blog.csdnimg.cn/direct/28a2f38e75f04020abc99391a0581b36.png#pic_center)
一、什么是CSS3
如何学习
SEO搜索引擎优化
- CSS是什么
- Cascading Sheet层叠级联样式表,表现,网页美化
- CSS发展史:CSS1.0 CSS2.0 DIV + CSS HTML和CSS结构分离 CSS 2.1 CSS3.0
- CSS怎么用
- CSS选择器
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画(菜鸟教程)
二、快速入门
规范:在<style>中写CSS代码
CSS的注释是/**/
选择器 {
声明1;
声明2;
}
在CSS文件里不用写
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. 颜色 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.边框
- 边框的粗细
- 边框的颜色
- 边框的样式
<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
- 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