前端---CSS篇（详解CSS）

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>