这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
一、本堂课重点内容：
1.CSS的基本结构
2.CSS工作原理
3.1.行内引入
使用style标签进行引入
<span style="font-size: 20px;color: darkmagenta;background: #000;">内容</span>
2.内嵌式
将css样式代码抽取出来 ，使用一对style标签定义css样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{ ------span选择器也可以是h1、td、body等等
font-size: 20px;color: darkmagenta;background: #000;
}
</style>
</head>
<body>
<span >1我申请</span>
</body>
</html>
3.链接式
行内式的作用范围只有一行
内嵌式作用域为本业面内选择器所选择的标签
链接式可作用于其他页面
.css
span{
font-size: 20px;color: darkmagenta;background: #000;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<span >1我申请</span>
</body>
</html>
2.选择器
1.三大选择器
1.标签名选择器
标签{}
2.id选择器
#id{} 定位到页面上的唯一标签 id定义不能有空格和特殊符号 不能以数字为开头
3.类选择器
.class{} 一般body中的所有标签都有class属性值，不同标签可以有相同属性值
2.其他选择器
1.层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span p{
font-size: 20px;color: darkmagenta;background: #000;
}
</style>
</head>
<body>
<span >今日全国新冠确诊143</span>
<span><p>广东新增1</p></span>
</body>
</html>
2.属性选择器
标签[属性]{…}
inputn[password]{
width: 30px;
color: aliceblue;
}
<input type="password"/>
3.分组选择器
.class，#id，标签，….{}
3.伪类选择器
a:hove——————–鼠标移动到链接上
a:link——————–未访问
a:visited——————–已访问
a:active——————–选定的链接----按住
<style>
a{text-decoration: none;}
a:hover{
color: pink;
}
a:link{
color: coral;
}
a:visited{
color: cornflowerblue;
}
a:active{
color: darkkhaki;
}
</style>
<a href="http://www.bilibili.com">bili</a>
4.选择器组合
5.选择器特异度
选择器越特殊优先级越高
6.布局（Layout）
1.常规流
盒模型
注：高度值height用百分比表示时，容器有指定的高度时才会生效
盒模型值的顺序：上下左右（两个值）、上右下左（顺时针）
三角形技巧：盒子宽高为0时设置边框，任意边框组合或单独一边的边框
块级元素和行级元素的区别
行级元素的排版
块级元素的排版
Flex Box
<div>
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
.container {
display: flex;
border: 2px solid #966;
}
.a, .b, .c{
text-align: center;
padding: 1em;
}
.a{
background: #CAC9FB;
}
.b{
background: #CAC9FB;
}
.c{
background: #CAC9FB;
}
</style>
flex布局的主轴与侧轴
主轴方向分布justify-content（水平）
侧轴方向分布align-items（垂直）
弹性布局flex-grow（可以理解为权值）
flex
Grid布局
2.浮动float
现在大多数情况下都是使用flex或grid,float一般用于图片环绕。
3.绝对定位position
relative
absolute(相对最近的非static（relative\absolute\fixed）祖先定位)
fixed类似于absolute但是相对的是窗口
二、自行补充知识点：
1.css优先级
第一优先级：无条件优先的属性只需要在属性后面使用 ！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl} 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;} 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；} 第六优先级：通配选择器，如 *{marigin:6px;}
！important > 内联 > id选择器 > class选择器 > 类型选择器 > 通用选择器（）*
2.通过css达到节流效果
实现如下
下面定义一个关于pointer-events的动画，就叫做 throttle 吧
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
复制代码
很简单吧，就是从禁用到可点击的变化。
接下来，将这个动画绑定在按钮上，这里为了方便测试，将动画设置成了2s
button{
animation: throttle 2s step-end forwards;
}
注意，这里动画的缓动函数设置成了阶梯曲线，step-end，它可以很方便的控制pointer-events的变化时间点。
有兴趣的可以参考这篇文章：CSS3 animation属性中的steps功能符深入介绍 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
pointer-events在0~2秒内的值都是none，一旦到达2秒，就立刻变成了all，由于是forwards，会一直保持all的状态
在完成点击后将动画设置为none
button:active{
animation: none;
}
地址：还在用 JS 做节流吗？CSS 也可以防止按钮重复点击 - 掘金 (juejin.cn)
三、实践练习例子：
自写12306静态网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
/* border: 1px solid red; */
margin: 0px;
border: 0px;
}
.introduce{
width: 390px;
height: 300px;
border: 1px solid pink;
}
h3{
height: 30px;
background-color: cornflowerblue;
text-align: center;
color: aliceblue;
font: optional;
line-height: 30px;
}
ul{
margin-left: 48px;
font-size: small;
}
.introduce a{
text-decoration: none;
color: darkslategrey;
}
.introduce li{
height: 40px;
list-style: square;
}
.introduce a:hover{
color: black;
}
.introduce a:visited{
color: blueviolet;
}
.outerintroduce{
width: 1980px;
height: 300px;
margin-left: 0px auto;
}
#div1,#div2,#div3{
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="outerintroduce">
<div id="div1" class="introduce">
<h3>最新发布</h3>
<ul>
<li style="margin-top: 40px;"><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
</ul>
</div>
<div id="div2" class="introduce">
<h3>最新发布</h3>
<ul>
<li style="margin-top: 40px;"><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
</ul>
</div>
<div id="div3" class="introduce">
<h3>最新发布</h3>
<ul>
<li style="margin-top: 40px;"><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
<li><a href="#">关于优化电子客票退票流程公告</a></li>
</ul>
</div>
</div>
</body>
</html>
四、课后个人总结：
本节课主要是对CSS的深入讲解，学习了很多以前不知道到技巧，特别是对布局的理解更加深刻了，之前对Flex的很多疑惑通通过这节课解开了。
