140. CSS3
简单介绍
HTML+CSS+JavaScript- 结构 + 表现 + 交互
如何学习
css是什么css怎么用（快速入门）css选择器（重点+难点）- 美化网页（文字、阴影、超链接、列表、渐变……）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果），教程：菜鸟教程
什么是css
css：Cascading Style Sheet层叠(级联)样式表css：表现（美化网页）：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……![]( "image-20210429183238305")
发展史
css1.0css2.0：DIV（块）+CSS，提出了html和css结构分离的思想，网页变得简单，利于SEOcss2.1：浮动和定位css3.0：圆角、阴影、动画……（浏览器兼容性）
练习格式
快速入门
style
基本入门
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码，每一个声明最好使用分号结尾
语法：
选择器 {
声明1;
声明2;
声明3;
}
-->
<style>
h1 {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>建议使用这种方式
![]( "image-20210429185156694")
css优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于
HTML的CSS文件 - 利于
SEO，容易被搜索引擎收录
css的3种导入方式
行内样式
1 | <!--行内样式：在标签元素中，编写一个style属性，编写样式即可--> |
内部样式：style标签
外部样式（推荐）
优先级：
就近原则：最近的是：行内样式，然后看内部样式和外部样式谁在上面
代码
1 |
|
拓展：外部样式两种写法
链接式：
html（推荐）1
<link rel="stylesheet" href="css/style.css">
导入式：
css2.1是css2.1特有的1
2
3<style>
@import url("css/style.css");
</style>缺点：导入式会先显示结构，再去渲染；链接式是一起生效
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
标签选择器
选择一类标签
1 | /*标签选择器，会选择到页面上所有的这个标签的元素*/ |
类选择器：class
语法
1
2
3
4类选择器的格式：
.类的名称 {
样式
}好处
好处：可以多个标签归类，是同一个class，可以复用；可以跨标签
示例
1
2
3
4
5
6
7*/
.title1 {
color: red;
}
.title2 {
color: blueviolet;
}
ID选择器
ID一定要唯一语法
1
2
3
4
5id选择器：id必须保证全局唯一
格式：
#id名称 {
}示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：id必须保证全局唯一
格式：
#id名称 {
}
*/
#title1 {
color: blueviolet;
}
.title2 {
color: red;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1 id="title1" class="title2">标题1</h1>
<h1 class="title2">标题2</h1>
<h1 class="title3">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：
不遵循就近原则，是固定的：
id选择器>class选择器>标签选择器
层次选择器
模型
后代选择器：空格
在某个元素的后面，如：祖爷爷->爷爷->爸爸->你
1 | /* 后代选择器*/ |
子选择器： >
只有一代，即儿子
1 | /*子选择器*/ |
相邻兄弟选择器：+
同辈：哥哥，姐姐
1 | <!DOCTYPE html> |
通用选择器：~
1 | /*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/ |
结构伪类选择器
伪类选择器：xx:xxx {}
示例
1 | <!DOCTYPE html> |
属性选择器（常用）
id和class结合
1 |
|
美化网页元素
为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签
重点要突出的字，使用
span套起来
1 |
|
字体样式
px：像素em：缩进分开写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!--
font-family 字体
font-size 字体大小
font-weight 字体粗细
color 字体颜色
-->
<style>
body {
color: #a13d30;
font-family: "Consolas", 楷体;
}
h1 {
font-size: 50px;
}
.p1 {
font-weight: bold;
}
</style>合并写
1
2
3
4
5
6<!--字体风格-->
<style>
p {
font: oblique bolder 18px "楷体" ;
}
</style>
文本样式
颜色
color
- 单词
rgb：0~Frgba：透明度,0~1
文本对齐方式
text-align=center排版：居中、左、右
首行缩进
text-indent： 段落首行缩进，一般是2em（首行缩进2字符）
块高
height 块高
行高
line-height：单行文字上下居中line-height=height
装饰
text-decoration
文本图片水平对齐
vertical-align: middle;
示例
1 |
|
阴影
1 | /*text-shadow |
超链接伪类
正常情况下，
a，a:hover
1 | /*鼠标悬浮的状态（只需要记住hover）*/ |
列表
1 | /* |
背景
背景颜色
1 | background: #a0a0a0; |
背景图片
法一
1 |
|
法二
1 | /*颜色 图片 图片位置 平铺方式*/ |
渐变
盒子模型
什么是盒子
margin：外边距![]( "image-20210430201717796")
所有的
body的margin默认为8padding：内边距border：边框
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
实现
1 | /*常见操作*/ |
内外边距
margin, padding 参数
- 一个参数：上下左右
- 两个参数：上下、左右
- 四个参数：上、左、下、右（顺时针）
盒子的计算方式
你这个元素到底多大？
美工+前端
盒子最终大小：margin + border + padding + 内容的大小（上图内容的大小为：296*22）
示例
1 |
|
圆角边框
有4个角
1 | div { |
圆形
1 | div { |
这里是半圆形：可以这样理解：
border-radius只控制半径为参数的那个1/4的圆，width和height控制的是区域的大小
阴影
补充
img是内联元素 ，所以无法使用margin: 0 auto;居中1
2
3
4
5
6
7img {
width: 150px;
height: 150px;
border-radius: 75px;
margin: 0 auto;
box-shadow: 10px 10px 100px yellow;
}![]( "image-20210501111143936")
所以用
margin: 0 auto;居中要求：
- 外面是块元素
- 块元素有固定的宽度
div的外层是body可以使用margin: 0 auto;居中，因为body是块元素，如果想让body里面的所有元素居中，可以这样
2
3
4
5
6
width: 1000px;
border: 10px solid red;
margin: 0 auto;
text-align: center;
}设置：
text-align:center
让内联 元素居中方法：
块元素设置
text-align:center，使块内所有元素居中将内联元素设置为块元素：
display: block1
2
3
4
5
6
7
8img {
width: 150px;
height: 150px;
border-radius: 75px;
margin: 0 auto;
box-shadow: 10px 10px 100px yellow;
display: block;
}
浮动
标准文档流
不局部：自上而下的拼
![]( "image-20210501124921960")
布局过：
![]( "image-20210501124903967")
块级元素：独占一行，且只有块元素设置大小才能被显示
h1~h6pdiv列表- ……
行内元素（内联元素）：不独占一行
spanaimgstrong- ……
行内元素可以包含在块级元素里面，但是块级元素不能包含在行内元素里面
display
1 | div { |
这个也是一种实现行内元素排列的方式，但我们很多情况都是用
float
float
左右浮动：float
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38div {
margin: 10px;
padding: 5px;
}
#app {
border: 1px #000 solid;
}
.layer01 {
border: 1px #f00 dashed;
display: inline-block;
float: right;
clear:both;
}
.layer02 {
border: 1px #00f dashed;
display: inline-block;
float: right;
clear:both;
}
.layer03 {
border: 1px #060 dashed;
display: inline-block;
float: right;
clear:both;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px; display: inline-block;
/*float: right;*/
line-height: 23px;
clear:both;
}
父级边框塌陷的问题
clear
right: 右侧不允许有浮动元素，如果有，排到下面去（下同）left: 左侧不允许有浮动元素both: 两侧允许有浮动元素none:
解决方案
增加父级元素高度
1
2
3
4#app {
border: 1px #000 solid;
height: 800px;
}增加一个空的
div标签，清除浮动1
2
3
4
5
6
7
8
9<div id="app">
<div class="layer01"><img src="images/1.jpg" alt=""></div>
<div class="layer02"><img src="images/5.jpg" alt=""></div>
<div class="layer03"><img src="images/3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子位置
</div>
<div class="clear"></div>
</div>1
2
3
4
5.clear {
clear: both;
margin: 0;
padding: 0;
}overflowparams:1
2
3hidden: 隐藏
scroll: 滚动条
auto:在父级元素中增加一个
overflow: hidden1
2
3
4
5#app {
border: 1px #000 solid;
/*height: 800px;*/
overflow: hidden;
}
父类添加一个伪类：
after（推荐）可以避免空
div1
2
3
4
5#app:after {
content: "";
display: block;
clear: both;
}小结
浮动元素后面增加空
div优势
- 简单
劣势：
- 代码中尽量避免空
div
设置父元素的高度
优势：
- 简单
劣势：
- 元素假设有了固定的高度，就会被限制
overflow: hidden优势：
- 简单
劣势：
下拉的一些场景避免使用
如果超出，就会被切掉，但是宁愿被切掉，也不要滚动条，很诡异
父类添加一个伪类：
after优势：
- 写法稍微复杂一点，但是没有副作用，推荐使用
对比
display- 方向不可控
- 不用管理父级边框塌陷
float- 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
定位
相对定位
position: reletive相对定位：相对于自己原来的位置进行偏移，相对定位的话，它仍然在标准文档流中，它原来的位置会被保留
1
2
3
4
5/*距离上面-20px*/
top: -20px;
left: 10px;
bottom: -10px;
right: 20px;示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位：相对于自己原来的位置进行偏移-->
<style>
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#app {
border: 1px solid #666;
padding: 0;
}
#first {
background-color: #a0a0a0;
border: 1px dashed #b61818;
/*相对定位：上下左右*/
position: relative;
/*距离上面-20px*/
top: -20px;
left: 10px;
}
#second {
background-color: #e2cccc;
border: 1px dashed #59b631;
}
#third {
background-color: #eade86;
border: 1px dashed #bb21d5;
position: relative;
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="app">
<div id="first">第1个盒子</div>
<div id="second">第2个盒子</div>
<div id="third">第3个盒子</div>
</div>
</body>
</html>
练习
实现
代码
1 |
|
绝对定位
- 定位：基于
xxx定位，只有上下左右- 没有父级元素定位的前提下，相对于浏览器定位；
- 父级元素存在定位，我们通常相对于父级元素进行偏移；
- 在父级元素范围内移动
- 相对于父级或浏览器的位置进行偏移，绝对定位的话，它不在标准文档流中，它原来的位置不会被保留
固定定位
定位：无论怎么走，都在固定位置
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 1000px;
}
div:nth-of-type(1) {
width: 100px;
height: 100px;
background-color: #ef67ad;
text-align: center;
line-height: 100px;
/*绝对定位：相对于浏览器*/
position: absolute;
right: 0;
bottom: 0;
display: block;
}
div:nth-of-type(2) {
width: 50px;
height: 50px;
background-color: #3383d9;
/*固定定位：定死了；很多导航栏不动，就是通过固定定位来实现的*/
position: fixed;
right: 0;
bottom: 0;
display: block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
理解图层
实践
z-index:默认是0，最高无限；习惯用999代表最高层
html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li><img src="images/bg.webp" alt=""></li>
<li class="tipText">学习微服务，找狂神</li>
<li class="tipBg"></li>
<li>时间：2021-1-1</li>
<li>地点：卢浮宫</li>
</ul>
</div>
</body>
</html>css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41#app {
width: 320px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#app ul {
position: relative;
}
.tipText, .tipBg {
position: absolute;
width: 320px;
height: 25px;
top: 167px;
color: white;
}
.tipText {
/*最低为0*/
/*z-index: 999;*/
}
.tipBg {
background: black;
/*背景透明度*/
opacity: 0.5;
/*现在一般不可以用，早期可以用*/
filter: alpha(opacity=50);
}
动画
菜鸟教程
canvas 动画：点击这里
卡巴斯基安全监控网站：点击这里
源码之家：点击这里
