CSS3笔记
Writing In The Front：
@Auther：纸箱里的猫
@Description：CSS3自用学习笔记
@Last Updated Date：2021.7.20
@Learning Completion Date：2021.7.8—7.9
@Writing The Software：Typora
目录
文章目录
1. 什么是CSS
1.1 CSS是什么
Cascading Style Sheet (层叠级联样式表)
Hyper Text Markup Language(超文本标记语言)
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动等
1.2 CSS的发展史
CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，SEO（搜索引擎优化）
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性
1.3 快速入门
style
基础入门
规范,style编写CSS的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范,<style>编写CSS的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
推荐写法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8HrEVug-1626771276077)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708090427328.png)]
<link rel="stylesheet" href="css/style.css">
1.4 CSS的优势
1.内容和表现分离
2.网页结构表现同一，可以实现复用
3.样式十分的丰富
4.建议使用独立于html的css文件
5.利于SEO，容易被搜索引擎收录
1.5 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: aqua;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red"></h1>
</body>
</html>
拓展：外部样式两种写法，一般使用链接式
rel 属性是必须的，规定当前文档与被链接文档/资源之间的关系。
-
链接式：
html
<!-- 外部样式--> <link rel="stylesheet" href="css/style.css"> -
导入式：
@import是css2.1特有的
<style> /*导入式*/ /*@import url("css/style.css");*/ </style>
2. 选择器
作用：选择页面上的某一个或者某一列元素
2.1 基本选择器
1.标签选择器
选择一类标签 标签{}
/标签选择器，会选择到页面上所有的这个标签的元素，标签{}/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
background: aqua;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>123</p>
</body>
</html>
2.类选择器 class
选择所有class属性一致的标签，跨标签 .类名{}
/*类选择器的格式 .class的名称{}
好处：可以多个标签归类，是用一个class，可以复用
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处：可以多个标签归类，是用一个class，可以复用
*/
.style1{
color: antiquewhite;
}
.style2{
color: blue;
}
</style>
</head>
<body>
<h1 class="style1">标题1</h1>
<h1 class="style2">标题2</h1>
<h1 class="style1">标题3</h1>
</body>
</html>
3.id选择器
全局唯一 #id名{}
/*id选择器 : id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 : id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
#id1{
color: antiquewhite;
}
</style>
</head>
<body>
<h1 id="id1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
2.2 层次选择器
1.后代选择器
在某个元素的后面
/*后代选择器*/body ul{ background: antiquewhite;}
2.子选择器
一代
/*子选择器*/body>p{ background: red;}
3.相邻兄弟选择器
同辈
/*相邻兄弟选择器: 只有一个，相邻（向下）*/.active + p{ background: red;}
4.通用选择器
/*!*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*!*//*.active ~ p{*//* background: red;*//*}*/
2.3 结构伪类选择器
伪类：伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izEO2FNH-1626771276079)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708111258978.png)]
2.4 属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nsG05G9r-1626771276081)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708141338796.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fodTRqMD-1626771276083)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708141403926.png)]
3. 美化网页元素
3.1 为什么要美化网页
1.有效的传递页面信息
2.美化网页，页面漂亮，才能吸引用户
3.凸显页面的主题
4.提高用户的体验
span标签：重点要突出的字，使用span套起来
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GhdTqTe-1626771276084)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708143239866.png)]
3.2 字体样式
<!--font-family：字体font-size:字体大小font-weight:字体粗细color:字体颜色px:像素--><style> body{ font-family: Arial; color: antiquewhite; } h1{ font-size: 50px; } .p1{ font-weight: bold; }</style>
3.3 文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align = center
3.首行缩进 text-indent: 2em
4.行高 line-height 单行文字上下居中line-height = height
5.装饰（下划线）
text-decoration: underline; 下划线
text-decoration: line-through; 中
text-decoration: overline; 下
text-decoration: none; 超链接去下划线
6.文本图片水平对齐 vertical-align:middle
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- text-align:排版 text-indent: 2em 首行缩进 height: 300px; line-height: 300px; 行高和 块的高度一致，就可以上下居中 text-decoration: underline; 下划线 text-decoration: line-through; 中 ext-decoration: overline; 下 --> <style> h1{ color: aquamarine; text-align: center; } p{ text-indent: 2em; } .p1{ background: bisque; height: 300px; line-height: 300px; text-decoration: underline; text-decoration: line-through; text-decoration: overline; } </style></head><body><p>123456789</p><h1>最新疫情</h1><p > 中新网7月8日电 据云南卫健委官方微信消息，7月7日0时至24时，云南省新增本土确诊病例2例(为7月6日无症状感染者转为确诊病例)。新增境外输入无症状感染者1例。</p><p class="p1"> 截至7月7日24时，云南省现有确诊病例92例(本土23例，境外输入69例)，无症状感染者15例(境外输入)，均在定点医疗机构隔离治疗和医学观察。</p></body></html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NuHmAaS8-1626771276085)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708151008563.png)]
3.4 超链接伪类
a:hover
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮的状态*/ a:hover{ color: blue; font-size: 30px; } /*鼠标按住未释放的状态*/ a:active{ color: aquamarine; } /*a:visited{*/ /* color: brown;*/ /*}*/ /*text-shadow: 水平偏移，垂直便宜，阴影半径*/ .style1{ text-shadow: 5px 5px 5px #FF0000; } </style></head><body><a href="#"> <img src="../4.超链接伪类/images/a.png" alt="amy" width="400px" height="200px"></a><p> <a href="#">明日方舟</a></p><p> <a href="#">amy</a></p><p class="style1"> 123456</p></body></html>
3.5 阴影
/*text-shadow: 水平偏移，垂直便宜，阴影半径*/.style1{ text-shadow: 5px 5px 5px #FF0000;}
3.6 列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../5.列表/css/style.css"></head><body><div id="nav"><h2 class="title">全部商品分类</h2><ul> <li> <a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li> <li> <a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a> </li> <li> <a href="#">电脑</a> <a href="#">办公</a> </li> <li> <a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a> </li> <li> <a href="#">服饰鞋帽</a> <a href="#">个性化妆</a> </li> <li> <a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a> </li> <li> <a href="#">食品饮料</a> <a href="#">保健食品</a> </li> <li> <a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a> </li> </ul></div></body></html>
#nav{ width: 300px; background: burlywood;}.title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; background: antiquewhite;}/*ul li*//*list-style: none:去掉圆点 circle:空心圆 decimal:数字 square:正方形*/ul{ background: burlywood;}ul li{ line-height: 35px; list-style: none; text-indent: 1em;}a{ text-decoration: none; font-size: 20px; color: black;}a:hover{ color: aquamarine; text-decoration: underline;}
3.7 背景
背景颜色
背景图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("../6.背景/image/a.png"); /* 默认是全部平铺的 repeat */ } .div1{ /* repeat-x 水平平铺 repeat-y 垂直平铺 no-repeat 不平铺 */ background-repeat: no-repeat; } </style></head><body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div></body></html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eWo1e9xh-1626771276085)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210708165452462.png)]
3.8 渐变
https://www.grabient.com/
background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4. 盒子模型
4.1 什么是盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TqdwodMm-1626771276086)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709084815746.png)]
margin：外边距
padding：内边距
border：边框
4.2 边框
1.边框的粗细
2.边框的样式
3.边框的颜色
/border:粗细 样式 颜色/
#box{
border: 1px solid red;
}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*body总有一个默认的外边距margin：0,常见操作 h1,ul,li,a,body{ margin: 0; padding: 0; text-decoration: none; } */ h1,ul,li,a,body{ margin: 0; padding: 0; text-decoration: none; } /*border:粗细 样式 颜色*/ #box{ width: 300px; border: 1px solid red; } h2{ font-size: 16px; background: antiquewhite; line-height: ; } form{ background: #FFCC70; } div:nth-of-type(1)>input{ border: 3px solid black; } div:nth-of-type(2)>input{ border: 3px dashed fuchsia; } div:nth-of-type(3)>input{ border: 3px solid aquamarine; } </style></head><body><div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form></div></body></html>
4.3 内外边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gd0OZdom-1626771276086)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709093341281.png)]
盒子的计算方式：
margin+border+padding+内容宽度
4.4 圆角边框
4个角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JpYfrKeP-1626771276087)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709105141404.png)]
4.5 盒子阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sWuBTWk3-1626771276087)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709105015455.png)]
5. 浮动
5.1 标准文档流
块级元素：独占一行
h1-h6 p div 列表
行内元素：不独占一行
span a img strong
行内元素 可以被包含在 块级元素中，反之不可以
5.2 display
<!--block 块元素inline 行内元素inline-block 是块元素，但是可以内联，在一行none --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>
这个也是实现行内元素排列的方式，但是我们很多情况都是用float
5.3 Float
左右浮动 float
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLueB9vl-1626771276088)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709143338919.png)]
5.4 父级边框塌陷的问题
clear
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZmk4JQm-1626771276088)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709144454072.png)]
解决方案：
1. 增加父级元素的高度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OoXjp30r-1626771276089)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709145110039.png)]
2. 增加一个空的div
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ES3XIyzi-1626771276089)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709145143220.png)]
3. overflow
在父级元素中增加一个overflow:hidden;
4. 在父类添加一个伪类 after
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3wbvi7cI-1626771276089)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210709150928510.png)]
5.小结
1.浮动元素增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用！
5.5 对比
display
方向不可控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6. 定位
6.1 相对定位
<!DOCTYPE html><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; } #father{ border: 1px solid #666; } #first{ background-color: #FFCC70; border: 1px dashed #db2c2c; position: relative; /*相对定位：上下左右*/ top: -20px; left: 20px; } #second{ background-color: #FFCC69; border: 1px solid rebeccapurple; } #third{ background-color: #FFCC68; border: 1px solid aquamarine; position: relative; buttom: -10px; right: 20px; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
相对定位：position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
top: -20px;left: 20px;buttom: -10px;right: 20px;
练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 2px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: #C850C0; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: #4158D0; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; } </style></head><body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div></body></html>
6.2 绝对定位
定位：基于xxx定位，上下左右
1没有父级元素定位的前提下，相对于浏览器定位
2假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它仍然在标准文档流中，原来的位置不会被保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; position: relative; } #father{ border: 1px solid #666; } #first{ background-color: #FFCC70; border: 1px dashed #db2c2c; } #second{ background-color: #FFCC69; border: 1px solid rebeccapurple; position: absolute; left: 100px; } #third{ background-color: #FFCC68; border: 1px solid aquamarine; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
6.3 固定定位
<!DOCTYPE html><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: red; position: absolute; right: 0; buttom: 0; } div:nth-of-type(2){/*fixed,固定定位*/ width: 50px; height: 50px; background: yellow; position: fixed; } </style></head><body><div>div1</div><div>div2</div></body></html>
6.4 z-index
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"></head><body> <div id="content"> <ul> <li> <img src="images/1.jpg" alt=""> </li> <li class="tipText"> 激情悍匪,在线蹦迪 </li> <li class="tipBg"> </li> <li> 时间：2021-7-9 </li> <li> 地点：zkwx </li> </ul> </div></body></html>
opacity: 0.5;/*透明度*/
#content{ width: 280px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid black;}ul,li{ padding: 0px; margin: 0px; list-style: none;}/*父级元素相对定位*/#content ul{ position: relative;}.tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top: 260px;}.tipText{ z-index: 999; color: aqua;}.tipBg{ background: black; opacity: 0.5;/*透明度*/ /*filter: alpha(opacity=0.5);*//*透明度 过时了*/}
7. 动画（待补充）
不做重点
canvans模板
8. CSS3总结
Extra1.自学视频教程链接
https://www.bilibili.com/video/BV1YJ411a7dy
Extra2.修改及备注
21.7.12 1.重新排版
21.7.16 1.增加rel 属性描述
21.7.20 1.增加了【Writing In The Front】的描述 2.增加Extra章
3590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
