第二章 CSS——控制网页的样式与布局
文章目录
一、什么是 CSS？
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
二、引入CSS
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 4.引入外部CSS文件，标签与样式分离，易于观看，适合大文件，项目级别的 -->
<link rel="stylesheet" href="./测试.css">
<!-- 3.当前文件嵌入CSS代码，标签与样式分离，易于观看，但只适合小类型文件，大型文件操作也很麻烦 -->
<style>
/* 要给哪个元素设置样式，就要先选中哪个元素 */
span{
/* 字号 */
font-size: 20px;
/* 文本类型，可以设置电脑上已经安装的字体，没有安装的字体包显示不出来，字体包可以到网上下载，但多数时候需要收费 */
font-family: "楷体";
/* 文本加粗，可以通过数值控制，100-900，数值越大字体越粗，如果想明显的看到加粗效果，那么值最少是600 */
font-weight: 600;
/* 文本颜色 */
color: blue;
/* 背景颜色 */
background-color: lightgray;
/* 字符间距 */
letter-spacing: 20px;
/* 添加下(上)划线→删除线，也可以设置下划线的样式，实线、虚线、双实线 */
text-decoration: line-through dashed;
}
</style>
</head>
<body>
<!-- 1.早期的CSS书写方法，现在基本不用 -->
<img src="../publicImages/景色/icon1.webp" width="300px" height="160px">
<!-- 2.内联样式，把style写在标签里，能直观的看到当前标签的样式，但是书写比较麻烦，也不易于观看 -->
<img src="../publicImages/景色/icon2.webp" style="width: 300px; height: 160px;">
<br>
<span>CSS学习</span>
<div>欢迎学习CSS</div>
</body>
</html>
三、选择器
选择器的语法结构：
选择器名{
属性名1:属性值;
属性名2:属性值;
.......
属性名n:属性值;
1.基本选择器
| 类型 | 用法 | 说明 |
|---|---|---|
| 标签选择器 | p{ } | 使同一标签的元素拥有相同的样式 |
| 类选择器 | .class{ } | 使不同的网页元素拥有相同的样式 |
| id选择器 | #id{ } | 精确控制某个元素的具体样式 |
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 元素选择器可以选中页面中所有相同的元素 */
div{
/* 字号默认是16px */
font-size: 10px;
}
/* 类选择器可以选中页面中具有相同类名的元素，类选择器前面要加. */
.container{
color: red;
}
.fonts{
font-family: "隶书";
}
/* id选择器可以选中页面中具有相同id的元素，id选择器前面要加# */
#import{
letter-spacing: 3px;
}
/* 一个元素只能有1个id，多设置会使其他的样式失效 */
#ceshi{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="import">基本选择器包括标签（元素）选择器、类选择器、id选择器</div>
<!-- 类名，id名设置的要有意义，不要用a,b,c这些单一的字母 -->
<!-- 一个元素可以有多个类名，每个类名中间用空格分隔 -->
<div class="container fonts">选择器是使用CSS语法设置元素样式的重要工具，通过选择器可以选中body里面的任意一个或一组元素</div>
<span class="container" id="import">CSS选择器与JS的dom和JQ选择器是一样的，所以选择器的使用贯穿整个前端的语法</span>
</body>
</html>
2.复合选择器
并集选择器语法结构:
选择器1,选择器2,...{
属性:属性值;
}
并集选择器之间用逗号(,)连接
交集选择器语法结构:
选择器1选择器2...{
属性:属性值;
}
交集选择器之间没有任何连接符号
后代选择器语法结构:
选择器1 选择器2 ...{
属性:属性值;
}
后代选择器是一种多个用空格分隔的选择器，别称包含选择器。
子代选择器语法结构:
选择器1 > 选择器2{
属性:属性值;
}
子代选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。
后代选择器与子代选择器的区别： 子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。 而后代选择器是作用于所有子后代元素。 后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
理解：后代选择器选择的是儿子，孙子，…父亲以下的后代都会被选中；子代选择器选择的只有父亲的儿子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通配符选择器，可以选中页面中所有的标签，优先级比较低 */
*{
font-family: "楷体";
}
/* 并集选择器，可以组合多个不同元素统一设置样式，中间用逗号分隔 */
/* 组合并集选择器的元素可以是其他任意单一的选择器 */
h1,
h2,
h3,
h4,
.font_red,
#font_red {
color: red;
}
ul {
/* 取消无序列表前面的圆点 */
list-style: none;
}
/* 交集选择器，可以选中同一元素且具有相同属性及属性值的标签 */
/* 两部分组成，左边是元素，右边是类或者id，两部分限制，使元素选择的更加精确 */
li.font_big {
font-size: 20px;
}
/* 后代选择器 */
/* 1.以空格连接后代选择器，会选中父元素下面的所有层级里相同的标签 */
ul li {
width: 180px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: lavenderblush;
}
/* 2.以逗号连接后代选择器，只会选中子元素里相同的标签 */
/* 这里没有选中123，会加粗是因为继承了父元素的样式 */
ul>li {
font-weight: 600;
}
</style>
</head>
<body>
<h1>蒹葭苍苍，</h1>
<h2>白露为霜。</h2>
<h3>所谓伊人，</h3>
<h4>在水一方。</h4>
<span class="font_red">溯洄从之，</span>
<br>
<b id="font_red">道阻且长。</b>
<br>
<span>溯游从之，</span>
<br>
<b class="font_big">宛在水中央。</b>
<br>
<ul>
<li class="font_big">蒹葭萋萋，<li>123</li></li>
<li>白露未晞。</li>
<li class="font_big">所谓伊人，</li>
<li>在水之湄。</li>
</ul>
</body>
</html>
3.伪类选择器
伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。它指定了元素的某种状态。
| 伪类名 | 用途 |
|---|---|
| a:link | 设置超链接未被访问时的样式 |
| a:active | 设置超链接被用户激活(在鼠标点击与释放之间)时的样式 |
| a:visited | 设置超链接被访问后的样式 |
| a:hover | 设置将鼠标指针移到超链接上时的样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪类状态有4种，多数标签都可以设置伪类状态，常用：滑过 */
/* 默认状态 */
a:link{
color: blue;
}
/* 鼠标滑过 */
a:hover{
color: rgb(244, 10, 10);
}
/* 点击时的状态 */
a:active{
color: yellowgreen;
font-size: 24px;
}
/* 被访问后的状态 */
a:visited{
color: tomato;
}
div{
width: 200px;
height: 200px;
background-color: lavender;
}
div:hover{
background-color: rgb(160, 160, 245);
/* 鼠标变手 */
cursor: pointer;
}
</style>
</head>
<body>
<a href="复合选择器.html">求点击</a>
<div></div>
</body>
</html>
4.通用选择器
通用选择器是一种特殊类型的选择器，它用星号(*)来表示选择器的名称，可以定义所有网页元素的显示格式。通用选择器涉及范围较广，一般用于清除页面中元素的边距。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style>
*{
/* 内边距 */
padding: 0;
/* 外边距 */
margin: 0;
}
</style>
<head>
<body>
</body>
</html>
5.选择器的优先级
选择器的优先级是指当有多个选择器作用于同一HTML文档的同一元素时，即多个选择器的作用范围发生重叠时，CSS的处理方式。
CSS规定选择器的优先级从高到低为： 行内样式 > id选择器 > 类选择器 > 标签选择器
CSS样式文件的选择器优先级别为： 行内样式表 > 内嵌样式表 > 链接样式表 > 导入样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 元素选择器 */
div{
width: 300px;
height: 300px;
/* 可以用!important提升优先级，也叫权重 */
background-color: red !important;
}
/* 类选择器 */
.bg_color{
background-color: blue;
}
/* id选择器 */
#bg_color{
background-color: green;
}
</style>
</head>
<body>
<!-- !important可以提升权重 -->
<!-- 内联样式 > id选择器 > 类选择器 > 元素选择器 -->
<div class="bg_color" id="bg_color" style="background-color: pink;"></div>
</body>
</html>
四、常用符号
| 符号 | HTML代码 |
|---|---|
| " | "； |
| ' | &apos； |
| & | &； |
| < | <； |
| > | >； |
| ¥ | ¥； |
| © | ©； |
| ® | ®； |
| 空格 |  ； |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符实体</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- 代码里的空格在网页里只会显示一个，所以要想增大两个字之间的距离，就需要使用到字符实体 -->
<!-- 英文空格 -->
<p>人的眼睛 看到的颜色有两种</p>
<!-- 中文空格 　 -->
<p>人的眼睛　　看到的颜色有两种　　</p>
<!-- 浏览器会自动解析HTML标签，解析后所显示的只有内容，要想看到标签，只能使用字符实体，一般用于展示核心代码 -->
<!--
ctrl + f 弹出查找框
1.输入要替换的值
2.输出替换后的值
3.根据需求进行单个替换或全部替换
-->
<p>
<br>
<span>毕竟西湖六月中，</span>
<br>
<i>风光不与四时同。</i>
<br>
<b>接天莲叶无穷碧，</b>
<br>
<s>映日荷花别样红。</s>
<br>
</p>
</body>
</html>
五、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在网页当中，列表一般用来显示同一级别的信息 -->
<!-- 常用的列表有两种：无序列表，有序列表；除此之外，还有定义列表 -->
<!-- 无序列表，每个li标签最前面默认显示一个圆点，如果不想显示圆点，可以改变type的属性值 -->
<!-- square 方块 circle 空心圆 -->
<ul type="circle">
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>品牌闪购</li>
<!-- 标签是可以嵌套使用的，但是要注意层级，通常外围标签是容器类，里层标签视情况而定 -->
<li><a href="https://auction.jd.com/home.html">更多</a></li>
</ul>
<!-- 有序列表，默认会给所有li进行排序，显示其数字顺序，可以通过改变type的值来改变排序规则，也可以改变初始数值 -->
<!-- start的值只能设置数字，表示依据type的排序规则，从第几个开始计数 -->
<ol type="A" start="3">
<li>京东家电</li>
<li>京东超市</li>
<li>京东生鲜</li>
</ol>
<!-- 定义列表，一般显示磁盘上的空间 -->
<dl>
<dt>C盘</dt>
<dd>Windows</dd>
<dd>user</dd>
<dt>D盘</dt>
<dd>game</dd>
<dd>music</dd>
</dl>
</body>
</html>
六、元素
1.元素转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 18px;
color: blue;
width: 260px;
height: 150px;
background-color: red;
/* 把当前元素转换成块元素 */
/* display: block; */
/* 把当前元素转换成行内块元素 */
display: inline-block;
}
div{
width: 260px;
height: 150px;
background-color: lawngreen;
/* 把当前元素转换成行元素 */
/* display: inline; */
/* 把当前元素转换成行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<span>昨夜斗回北，</span>
<span>今朝岁起东。</span>
<div>11</div>
<div>11</div>
</body>
</html>
2.元素隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color: red;
/* 隐藏当前元素，在当前页面直接删除该元素，其原本的位置会被其他元素占据 */
/* display: none; */
/* 透明度，取值范围：0-1，值越大越清晰，越小越模糊 */
/* 当透明度为0时也能隐藏元素，但元素还依然占据原本的位置，不会被其他元素顶替 */
opacity: 0;
}
</style>
</head>
<body>
<div></div>
<span>我年已强仕，无禄尚忧农。</span>
</body>
</html>
七、内容点缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div::before{
/* content表示添加文本内容，要用引号引起来 */
content: '这个是前缀';
/* 在这里设置的样式都是针对于添加的前缀设置的 */
color: red;
font-size: 12px;
}
div::after{
/* content表示添加文本内容，要用引号引起来 */
content: '这个是后缀';
/* 在这里设置的样式都是针对于添加的后缀设置的 */
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<!--
为什么使用点缀？
1.首先点缀不是内容，如果把点缀的信息写在内容里，会污染内容，会导致百度、搜狗等搜索引擎在提取网页关键字或其他关键内容时受到干扰
2.如果是服务器生成的文档或其他HTML标签，不方便修改标签内容，那我们就可以通过点缀来添加新的信息
3.点缀的信息是可以单独控制其样式的，所以设置一些特殊内容的时候，会很便捷
-->
<div>桑野就耕父，荷锄随牧童。</div>
</body>
</html>
八、背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 900px;
height: 500px;
/* 设置背景图片 */
background-image: url(../publicImages/景色/bg_icon1.webp);
/* 设置背景图片不重复显示 */
background-repeat: no-repeat;
/* 背景图片的尺寸 */
/* 1个参数时表示横向竖向都占有固定的比例 */
/* 2个参数时第一个参数表示水平方向的占比，第二个参数表示垂直方向的占比 */
background-size: 100% 100%;
/* 背景图片的偏移，第一个参数为横向偏移量，第二个参数为纵向偏移量 */
/* background-position: 50% 50%; */
}
span{
font-size: 22px;
line-height: 30px;
font-family: "楷体";
color: rgb(154, 205, 222);
font-weight: 600;
}
p{
/* 首行缩进 */
text-indent: 50px;
}
</style>
</head>
<body>
<!-- 使用背景图片需要一个装在背景图的容器 -->
<div>
<!-- 背景图片是虚体，所以可以在容器内放置其他的元素，虚体不占实体字符 -->
<span>田家占气候，共说此年丰。</span>
</div>
<p>十年陪伴,无限热爱!风靡全球的MOBA经典之作——《英雄联盟》正版手游预约正式开启!真正的5V5公平竞技对战,传承端游纯正体验
。人气英雄,经典还原;公平竞技,实力至上;峡谷传说,掌心再现。</p>
</body>
</html>
九、溢出处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 20px;
width: 300px;
height: 200px;
background-color: rgb(174, 208, 238);
/* 1.删除溢出容器的文本 */
/* overflow: hidden; */
/* 2.给容器加一个上下的滚动条，来显示所有的文本 */
overflow: scroll;
}
</style>
</head>
<body>
<div>同时从另一个回答中我们看出，S23 Ultra很有可能会搭载目前传的沸沸扬扬的UFS4.0闪存，也就是说新三件套将会直接在S23 Ultra系列上作为标配产出。</div>
</body>
</html>
总结
了解什么是css，记住常用的三种引入css方法，三种基本选择器，常用的符号代码，熟练运用三种列表
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
