1.CSS简介
CSS(Cascading Style Sheets)层叠样式表，是用来为结构化文档（HTML、XML等应用）添加样式,比如字体、颜色、大小、间距的计算机语言。CSS目前已经发展到了CSS3.0了。
2.CSS导入方式
CSS有三种导入方式：
1.行内样式：直接在标签元素中编写style属性，在其中编写样式即可：
<p style="color: paleturquoise">你好，这是CSS</p>2.内部样式：在头部head标签中，我们写上<style>标签，然后就可以在其中写入CSS样式了：
<style>p{color: paleturquoise;font-size: 20px;}</style>3.外部样式：外部样式就是新建一个.css文件，在其中编写css样式然后引入html文件之中，引入方式有两种：
连接式:
<link type="text/css" rel="stylesheet" href="first.css">
导入式：
<style>@import url("first.css");
</style>3.选择器
可以选择页面中的某一个或者某一类元素，然后设置它们的样式：
3.1. 基本选择器
1.标签选择器：选择一类标签：标签{xxx样式}，比如：
/*标签选择器*/
h1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
p{color: pink;background-color: #eeeeee;font-family: 楷体;
}2.类选择器：可以选择class一致的标签，在class名前面加上一个小点 .className {xxx样式}
/*类选择器*/
.font1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
.font2{color: pink;background-color: #eeeeee;font-family: 楷体;
}3.Id选择器：这是全局唯一的样式，指定某个id，设置样式，在id名字前加上井号，如：#idName{xxx样式}
/*Id选择器*/
#demo1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
#demo2{color: pink;background-color: #eeeeee;font-family: 楷体;
}优先级对比：
前面三个的优先级对比：id > class > 标签
3.2.层次选择器：
1.后代选择器：选中某个元素内的元素
/*后代选择器*/
body p{background-color: pink;
}
2.子选择器：只选择一代
/*后代选择器*/
body>p{background-color: pink;
}
3. 同辈选择器：选择相邻的兄弟选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.d1+.d2{background-color: #aaaaaa;}</style></head><body><div class="d1">你好</div><div class="d2">hello</div></body>
</html>
4.通用选择器：选择这个元素向下的所有同辈元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.d1~div{background-color: #aaaaaa;}</style></head><body><div class="d1">你好</div><div class="d2">hello</div><div class="d3">oook</div></body>
</html>
3.3. 结构伪类选择器
（上图引用至：CSS结构伪类选择器-CSDN博客）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--避免使用，class，id选择器--><style>/*ul的第一个子元素*/ul li:first-child{background: firebrick;}/*ul的最后一个子元素*/ul li:last-child{background: darkcyan;}/*选中p1：定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个子元素为p的按顺序*/p:nth-child(2){background: salmon;}/*选中父元素下的p元素的第二个，按类型*/p:nth-of-type(1){background: gold;}p:nth-child(3){background-color: whitesmoke;}a:hover{background: violet;}</style></head><body><!--<h1>h1</h1>--><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul><a href="">链接标签</a></body>
</html>
4.CSS样式
css能够设计出多种多样的样式，现在我们详细的介绍这些样式。
4.1. 背景：
CSS可以定义的背景效果：
- background-color 背景颜色。
- background-image 背景图片。
- background-repeat 背景图像是否重复。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-position 设置背景图像的起始位置。
- background 属性简写，包含上面的几种写法。
.div1 {width: 600px;height: 208px;background-image: url("../20231115/button.png");background-repeat: no-repeat;background-size: cover;
}4.2. 文本
文本的属性：
| 属性 | 描述 |
| color | 设置文字颜色 |
| direction | 文本方向 |
| letter-spacing | 字符间距 |
| line-height | 行高 |
| text-align | 对齐方式 |
| text-decoration | 设置划线的位置 |
| text-indent | 缩进 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| vertical-align | 垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
写个代码试一试：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>p{color: rebeccapurple;direction: initial;letter-spacing: 10px;line-height: 20px;text-decoration: line-through;text-shadow: darkolivegreen;word-spacing: 50px;}</style></head><body><p>hello world</p></body>
</html>4.3. 字体
CSS提供了多种属性修改字体的样式：
| 属性 | 描述 |
| font-family | 文本的字体系列 |
| font-size | 字体大小 |
| font- style | 字体样式 |
| font-variant | 以小型大型显示文本 |
| font-weight | 字体粗细 |
4.4. 链接
CSS可以修改连接的状态样式：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
4.5. 显示状态
CSS中可以使用display和visibility来设置元素的显示与隐藏
visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display中的inline和block分别会把元素设置为内联元素和块元素。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.hidden {visibility: hidden;}.none {display: none;}</style></head><body><p>hello world</p><p class="none">hello world</p><p>hello world</p><p class="hidden">hello world</p><p>hello world</p></body>
</html>
4.6. 定位 Position
CSS定位Position拥有五个值：static、relative、fixed、absolute、sticky
详细介绍见代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>定位</title></head><style>.sta{ /*静态定位---默认 静态定位的元素不会受到 top, bottom, left, right影响。*/position: static;border: 2px solid red;}.fix{ /*固定位置 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：*/position: fixed;top: 30px;left: 50px;}.rel{ /* 相对定位 相对定位元素的定位是相对其正常位置*/position: relative;left: -30px;}.abs{ /* 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */position: absolute;left: 100px;top: 100px;z-index: -1;}.sti{ /* 粘性定位 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。*/position: -webkit-sticky;width: 300px;height: 50px;background-color: whitesmoke;position: sticky;top: 0;}</style><body><p class="sta">静态定位</p><p class="rel">相对定位</p><p class="fix">页面固定位置</p><p class="abs">绝对位置</p><div class="sti"></div><p>666666666666666666666666</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p><p>777777777777777777777777</p></body>
</html>4.7.布局--Overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
代码展示了这几种情况：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.all{display: flex;flex-direction: row;}#visible {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: visible;border: 1px solid #ccc;}#hidden{background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: hidden;border: 1px solid #ccc;}#scroll {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: scroll;border: 1px solid #ccc;}#auto {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: auto;border: 1px solid #ccc;}</style></head><body><div class="all"><div id="visible"><p>第一种: visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p></div><div id="hidden"><p>第二种: hidden</p><p>hidden</p><p>hidden</p><p>hidden</p><p>hidden</p><p>hidden</p><p>hidden</p><p>hidden</p><p>hidden</p></div><div id="scroll"><p>第三种：scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p></div><div id="auto"><p>第四种：auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p></div></div></body>
</html>
如图所示，会溢出来。
4.8. 浮动 --- Float
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.image{float: left;width: 300px;height: 300px;}</style></head><body><h2>图片库</h2><p>调整串口试一试</p><div><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"><img src="dog.jpg" class="image"></div></body>
</html>
4.9. 居中方式
手打了一遍代码，详细的介绍了多种方式，也写清注释了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>居中方式</title><style>*{margin: 0;padding: 0;}h4{margin: 10px 0 10px 0;}.all{width: auto;height: 100vh;background-color: whitesmoke;display: flex;flex-direction: row;justify-content: space-around;}.shuiping, .chuizhi, .shuipingcuizhi{height: 100%;width: 30%;}.content{width: 300px;height: 100px;background-color: salmon;border: 1px solid black;}.item{background-color: #4CAF50;width: 100px;height: 100px;}/* ===============1===============*//* 使用 margin:auto 实现居中 */.margin-center{margin: auto;}/* ===============2=============== */.content2{text-align: center;/* 这里的text-align：center子元素会继承该属性 *//* 我们的目的是将元素居中而不是文本居中 */}.block-center{display: inline-block;}/* ================3================ */.content3{position: relative;}.absolute-center{position: absolute;left: 50%;transform: translateX(-50%);}/* ==================4=================== */.content4{display: flex;justify-content: center;}/* ======================垂直居中=======================*/.Ccontent{width: 300px;height: 100px;background-color: olive;border: 1px solid black;}.item2{width: 300px;height: 30px;background-color: gold;}/* ========== 1 =========*/.Ccontent1{display: table-cell;vertical-align: middle;}/* =============2=================*/.Ccontent2{line-height: 100px;}.vertical-center{display: inline-block;vertical-align: middle;}/* ==========3===================*/.Ccontent3{display: flex;align-items: center;}/* =========4================= */.Ccontent4{position: relative;}.abs-center{position: absolute;top: 50%;transform: translateY(-50%);}/* ==============================水平垂直居中====================*/.SCcontent{background-color: paleturquoise;width: 100px;height: 100px;}.item3{background-color: lightgoldenrodyellow;width: 50px;height: 50px;}/* ===================1 =================*/.SCcontent1{position: relative;}.abso-center{position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);}/* ====================2==================*/.SCcontent2{display: flex;justify-content: center;align-items: center;}/*================ 3 ========================*/.SCcontent3{text-align: center;line-height: 100px;}.SCitem3{display: inline-block;vertical-align: middle;}/* ===================== 4 =========================*/.SCcontent4{display: table-cell;text-align: center;vertical-align: middle;}.SCitem4{display: inline-block;}</style></head><body><div class="all"><div class="shuiping"><h3>水平居中方式：</h3><h4>第一种方式： margin:auto</h4><div class="content"><div class="margin-center item"></div></div><h4>第二种方式： 使用inline-block 和 text-align实现 </h4><div class="content content2"><div class="item block-center"></div></div><h4>第三种方式： 使用绝对定位 实现 </h4><div class="content content3"><div class="item absolute-center"></div></div><h4>第四种方式： 使用flex布局 实现 </h4><div class="content content4"><div class="item"></div></div></div><div class="chuizhi"><h3>垂直居中方式：</h3><h4>第一种方式：使用display：table-cell来实现</h4><div class="Ccontent Ccontent1"><div class="item2"></div></div><h4>第二种方式：使用line-height、 inline-block 来实现</h4><div class="Ccontent Ccontent2"><div class="item2 vertical-center"></div></div><h4>第三种方式：使用flex布局 来实现</h4><div class="Ccontent Ccontent3"><div class="item2"></div></div><h4>第四种方式：使用 绝对定位 来实现</h4><div class="Ccontent Ccontent4"><div class="item2 abs-center"></div></div></div><div class="shuipingcuizhi"><h3>水平 + 垂直居中方式：</h3><h4>第一种方式：使用absolute绝对定位 来实现</h4><div class="SCcontent SCcontent1 "><div class="item3 abso-center"></div></div><h4>第二种方式：使用flex布局来实现</h4><div class="SCcontent SCcontent2 "><div class="item3"></div></div><h4>第三种方式：用inline-block.text-align和vertical-align来实现</h4><div class="SCcontent SCcontent3 "><div class="item3 SCitem3"></div></div><h4>第四种方式：table-cell+display: inline-block来实现</h4><div class="SCcontent SCcontent4 "><div class="item3 SCitem4"></div></div></div></div></body>
</html>
4.10.提示框
实现一个提示框，练练手
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>.main{position: relative;display: inline-block;}.main:hover .jian{visibility: visible;}.jian{color: white;text-align: center;visibility: hidden;top: -5px;left: 120%;padding-top: 5px;background-color: black;border-radius: 6px;width: 200px;height: 30px;position: absolute;}.jian::after{position: absolute;content: "";top: 50%;right: 100%;transform: translateY(-50%);z-index: 1;border-width: 5px;border-style: solid;border-color: transparent black transparent transparent;}</style><body><h1>提示框</h1><div class="main">显示我<div class="jian">提示框成功了</div></div></body>
</html>
5. 盒子模型 Box Model
我们可以把每一个标签元素看成一个盒子，盒子中包括了边距、边框、填充和实际内容，盒子模型允许在盒子周围的空间放置其他元素。
6. CSS3
CSS3是CSS的技术新版本，拥有很多新的特性，下面是新的特性介绍：
6.1. CSS3边框
由三个新的边框属性：border-radius、box-shadow、border-image
border-radius：圆角
使用border-radius:10px 就可以轻易实现圆角了，值越大圆角的弧度越大。
box-shadow:阴影：使用它就可以实现阴影效果。
border-image：边界图片
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>css3边框</title><style>.css3-border{/*width: 400px;*//*height: 400px;*//*background-color: #4CAF50;*//*border-radius: 100px;*/border: 15px solid transparent;border-image: url(border.png) 30 30 stretch;/*box-shadow: 10px 10px 30px #4CAF50;*/}</style></head><body><div class="css3-border" >你好</div></body>
</html>6.2. 渐变
CSS3提供了新的渐变属性：linear-gradient
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.jianBian1{width: 300px;height: 100px;/*上到下*/background-image: linear-gradient(to bottom, black , pink);}.jianBian2{width: 300px;height: 100px;/*从右到左*/background-image: linear-gradient(to left, orange , blue);}.jianBian3{width: 300px;height: 100px;/*对角线*/background-image: linear-gradient(to bottom right, blanchedalmond , purple);}.jianBian4{width: 300px;height: 100px;/* 使用角度 */background-image: linear-gradient(-30deg, lawngreen , palegoldenrod);}</style></head><body><div class="jianBian1"></div><div class="jianBian2"></div><div class="jianBian3"></div><div class="jianBian4"></div></body>
</html>6.3. 文本效果
1.文本阴影：text-shadow
2. 文本溢出属性：text-overflow
3. text-outline
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>文本效果</title><style>p{width: 200px;overflow: hidden;white-space: nowrap;text-shadow: 10px 10px 5px red;}.ellipsis{/*添加省略号*/text-overflow: ellipsis;}.clip{/*直接断开*/text-overflow: clip;}</style></head><body><p class="ellipsis"> 你好，如果超出的话会怎么样呢？？？ </p><p class="clip"> 你好，如果超出的话会怎么样呢？？？ </p></body>
</html>6.4. 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
使用transition: 变化的属性 时间
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>过渡</title><style>.transition{width: 100px;height: 100px;background-color: #4CAF50;transition: background-color 2s, width 2s, height 2s, transform 2s;}.transition:hover{width: 200px;height: 200px;background-color: purple;transform: rotate(90deg);}</style></head><body><div class="transition">哥们你好</div></body>
</html>6.5.动画
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.animation{width: 100px;height: 100px;background-color: red;position: relative;/*动画名称*/animation-name: move;/*动画运行时间*/animation-duration: 5s;/*速度曲线*/animation-timing-function: linear;/*动画何时开始*/animation-delay: 2s;/*动画运行次数*/animation-iteration-count: infinite;/*动画再下一个周期是否逆向运行*/animation-direction: alternate;/*规定是否运行*/animation-play-state: running;}/*设置动画*/@keyframes move {0% {background-color: red; left: 0px; top: 0px;}25% {background-color: yellow; left: 200px; top: 0px;}50% {background-color: blue; left: 200px; top: 200px;}75% {background-color: green; left: 0px; top: 200px;}100% {background-color: red; left: 0px; top: 0px;}}</style></head><body><div class="animation"></div></body>
</html>6.6. CSS3图片
CSS3对图片样式有了新的属性：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.yuan{/* 圆形图片 */width: 100px;border: solid black;border-radius: 50%;}/*如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：*/.xiangYing{max-width: 100%;height: auto;}/* 卡片式图片*/div.polaroid{width: 200px;background-color: white;box-shadow: 0 4px 8px 0 gray, 0 10px 20px 0 lightgray;margin-bottom: 25px;}img.dog:hover{opacity: 0.7;}div.container{text-align: center;padding: 5px 10px;}</style></head><body><a href="../20231118/dog.jpg"><img src="../20231118/dog.jpg" class="yuan" /></a><h1>响应式图片</h1><img src="../20231118/border.png" class="xiangYing"><h1>这是响应式卡片</h1><div class="polaroid"><img src="../20231118/dog.jpg" alt="Norway" class="dog" style="width:100%;"><div class="container"><p>The Troll's tongue in Hardanger, Norway</p></div></div></body>
</html>
7. 总结
通过对CSS的学习，我们可以使得html页面变得更加好看了，接下来我们就要开始学习JavaScript来操控页面元素了。
