二、CSS学习笔记（CSS层叠样式表一）

CodeDog1024

已于 2024-03-14 21:32:02 修改

阅读量267

点赞数 6

分类专栏： CSS 前端文章标签：笔记

于 2024-03-11 15:38:20 首次发布

本文链接：https://blog.csdn.net/weixin_46108997/article/details/136625620

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

title: 二、CSS学习笔记（CSS层叠样式表一）
date: 2024/02/05

Emmet 语法

Emmet 语法的前身是 Zen Coding，它可以通过一些简单的缩写命令来快速编写 HTML 和 CSS 代码

快速生成 HTML 标签

输入 div 然后按下 tab，快速生成 <div></div>
输入 div * 10 快速生成 10 个 div
输入 ul > li 快速生成嵌套标签 <ul><li></li></ul>
输入 div + p 快速生成并列标签 <div></div><p></p>
输入 div.nav 快速生成带类属性的 <div class="nav"></div>
输入 div#nav 快速生成带 id 属性的 <div id="nav"></div>
输入 div{123} 快速生成 <div>123</div>

快速生成 CSS 样式

输入首字母 tac 快速生成 text-align: center;

代码格式化

设置 --> 文本编辑器 --> Format On Save

CSS 的复合选择器

什么是复合选择器

在 CSS 中，可以根据选择器的种类分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，是基础选择器组合而成的

后代选择器
子选择器
并集选择器
伪类选择器

后代选择器

后代选择器又称包含选择器，可以选择指定元素中的后代元素，不论是子元素还是孙子元素

/* 使用空格隔开 */
元素1 元素1的后代元素 {
	样式
}

03-后代选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>后代选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/* 把 ol 中的儿子 li 标签文本改为红色 */
		ol li {
			color: red;
		}
		/* 把 ol 中的孙子 a 标签文本改为红色 */
		ul a {
			color: red;
		}
		/* 不仅可以使用标签选择器，还可以使用其他选择器 */
		.food li {
			color: pink;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">榴莲</a></li>
		<li>臭豆腐</li>
		<li>鲱鱼罐头</li>
	</ul>
	<ol>
		<li>榴莲</li>
		<li>臭豆腐</li>
		<li>鲱鱼罐头</li>
	</ol>
	<ol class="food">
		<li>榴莲</li>
		<li>臭豆腐</li>
		<li>鲱鱼罐头</li>
	</ol>
</body>
</html>

子选择器

子选择器可以选择指定元素的儿子元素，相比与后代选择器只能选择儿子、

/* 使用大于号连接 */
元素1 > 元素1的儿子元素 {
	样式
}

04-子选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>后代选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/* 只选择 div 的儿子 ，孙子不会变颜色*/
		div > a {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">我是 div 的儿子</a>
		<p>
			<a href="#">我是 div 的孙子</a>
		</p>
	</div>
</body>
</html>

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，多用于集体声明

/* 使用逗号连接 */
元素1 , 元素二，元素三...... {
	样式
}

05-并集选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>并集选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/* 1. 同时选择 div 和 p 标签*/
		div, a {
			color: red;
		}
		/* 2. 同时选择 div 和 p 还有 li 标签 */
		div, a, ul > li {
			color: pink;
		}
	</style>
</head>
<body>
	<div>熊大</div>
	<p>熊二</p>
	<a href=“#”>光头强</a>
	<ul>
		<li>小猪佩奇</li>
		<li>猪爸爸</li>
		<li>猪妈妈</li>
	</ul>
</body>
</html>

伪类选择器

伪类选择器用于向指定标签添加一些特殊效果，使用 : 表示

链接伪类选择器

选择器	描述
a:link	选择`未被访问`的 a 标签
a:visited	选择`已被访问`的 a 标签
a:hover	选择`被鼠标选中`的 a 标签
a:active	选择`活跃状态`的 a 标签（鼠标按下未弹起）

06-链接伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>链接伪类选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/* 未访问时，a 标签内文本是黑色，并且没有下划线 */
		a:link {
			color: black;
			text-decoration: none;
		}
		/* 已被访问过的链接变为橘色 */
		a:visited {
			color: orange;
		}
		/* 鼠标经过标签，文本变为红色 */
		a:hover {
			color: red;
		}
		/* 鼠标按下未弹起时，文本变为绿色 */
		a:active {
			color: green;
		}
	</style>
</head>
<body>
	<a href="#">链接伪类选择器</a>
</body>
</html>

链接伪类选择器注意事项

编写时要按照：link、vistied、hover、active 的顺序编写
a 标签具有默认样式，所以在修改样式时，要直接选择 a 标签，父元素样式对 a 标签样式不生效
开发中常用写法：单独给 a 标签设置样式，再设置 a:hover 样式即可

:focus 伪类选择器

:focus伪类选择器用于选择获取焦点的表单标签

input:focus {
	background-color: red;
}

07-:focus 伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>:focus 伪类选择器</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		/* 当 input 标签获得焦点时，背景变为粉色 */
		input:focus {
			background-color: pink;
		}
	</style>
</head>
<body>
	<input type="text" />
	<input type="text" />
	<input type="text" />
</body>
</html>

CSS 的元素显示模式

什么是元素的显示模式

元素的显示模式就是元素是以什么形式展示的，比如 div 标签自己独占一行，而 span 标签可以多个共处一行，我们管这种独占一行的元素称为块元素，而可以多个元素共处一行的成为行内元素

元素显示模式的分类

块元素

<div>、<h1> ~ <h6>、<p>、<ul>、<ol>、<li>......其中 div 是最经典的块元素

独占一行
宽度、高度、内外边距可以控制
宽度默认是父元素的 100%
块元素不能存在与文字类元素内，比如人<p><div></div></p>，这是错误的

行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>......其中 span 是最经典的行内元素

一行内可以显示多个行内元素
不能直接设置宽度和高度
元素宽度等于内容的宽度，其本身是没有宽度的，是内容将其撑开的
行内元素只能容纳行内元素，a 标签除外（转换显示模式）

行内快元素（特殊）

<img>、<input>、<td>......这些标签同时具备快元素和行内元素的特点，称之为行内块元素

可以多个元素共处一行，但是会有间隙存在
高度、宽度和内外边距可以设置
自身存在默认宽度

元素显示模式的切换

为了让某个标签具备其他模式的特性，可以将其转化为对应的模式，比如 a 标签是行内元素，不能设置宽度和高度，但是如果我们需要这么做，我们可以把它转为块元素，就可以设置宽高了

a {
	display: block;
}

属性值	描述
block	块元素
inline	行内元素
inline-block	行内块元素

12-显示模式转换.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>显示模式转换</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		a {
			/*行内元素转为块元素*/
			display: block;
			background-color: red;
			/*宽度和高度会生效，但是不可以共处一行*/
			width: 200px;
			height: 50px;
		}
		div {
			/*块元素转为行内元素*/
			display: inline;
			background-color: red;
			/*宽度和高度会失效*/
			width: 200px;
			height: 50px;
		}
		span {
			/*行内元素转为行内块元素*/
			display: inline-blok;
			background-color: red;
			/*宽度和高度会生效，并且仍可以共处一行*/
			width: 200px;
			height: 50px;
		}
	</style>
</head>
<body>
	<a href="#">行内元素转为块元素</a>
	<a href="#">行内元素转为块元素</a>
	<div>块元素转为行内元素</div>
	<div>块元素转为行内元素</div>
	<span>行内元素转为行内块元素</span>
	<span>行内元素转为行内块元素</span>
</body>
</html>

小工具 snipaste

略

课堂案例

14-简单小米侧边栏.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatiable" content="ie=edge">
		<title>简单小米侧边栏</title>
		<style>
			a {
				display: block;
				background-color: #55585a;
				width: 200px;
				height: 40px;
				text-decoration: none;
				color: white;
				/* 垂直居中小技巧，让文字高度等于父元素高度 */
				line-height: 40px;
				/* 增加左边的内边距，将文字向右顶 30px */
				padding-left: 30px;
			}
			a:hover {
				background-color: #ff6700;
			}
			ul li {
				/* 取消列表前边的小圆点 */
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">手机 电话卡</a></li>
			<li><a href="#">电视 盒子</a></li>
			<li><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>
	</body>
	</html>

CSS 的背景

通过 CSS 背景属性，可以给制定元素设置背景样式，其中包括背景颜色、背景图片、背景平铺、背景图片固定等

背景颜色

body {
	background-color: red; /* 默认是 transparent(透明) */
}

15-背景颜色.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景颜色</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		div {
			background-color: red;
			width: 200px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div>背景颜色</div>
</body>
</html>

在背景颜色中，不同与其他的颜色设置，除了颜色单词、十六进制、rgb 之外，还可以使用 rgba 来设置颜色，相比与普通的 rgb 它拥有第四个参数，取值范围0 ～ 1，可以设置颜色的透明度，如 rgba(255, 0, 0, 0.3)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景颜色</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		div {
			/* 透明度为 0.3 的黑色 */
			background-color: rgba(0, 0, 0, 0.3);
			width: 200px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div>背景颜色</div>
</body>
</html>

背景图片

background-image 可以给指定元素设置一张图片作为背景，在实际开发中，多用于图片的展示，相比与 <img> 标签，更便于控制图片的显示位置

div {
	background-image: url(‘图片路径’)； /* 默认是 none(无图片) */
}

16-背景图片.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景图片</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		div {
			background-image: url(‘./img.jpg’);
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>背景图片</div>
</body>
</html>

背景平铺

当标签的大小大于背景图片的大小时，浏览器会将图片重复显示，以此来铺满整个标签，我们可以通过 background-repeat 来设置图片平铺的样式

属性值	描述
repeat	平铺`(默认值)`
no-repeat	不平铺
repeat-x	沿着 x 轴平铺
repeat-y	沿着 y 轴平铺

17-背景平铺.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景平铺</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		div {
			background-image: url(‘./img.jpg’);
			background-repeat: no-repeat;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>背景平铺</div>
</body>
</html>

背景图片位置

利用 background-position 属性修改背景图片在元素内的位置

div {
	background-position: x y;
}

属性值	说明
length	百分数/长度值
position	top、center、bottom、left、right

18-背景图片位置.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景图片位置</title>
	<!-- CSS 代码写在 style 标签中，style 标签嵌套在 head 标签中-->
	<style>
		div {
			background-image: url(‘./img.jpg’);
			background-repeat: no-repeat;
			/* 使用精确值 */
			background-position: 10px 20px;
			/* 使用方位名词 */
			/* background-position: rightcenter; */
			/* 混合使用 */
			/* background-position: 10px center; */
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>背景图片位置</div>
</body>
</html>

背景固定

当内面内容过多时，页面右侧会出现滚动条，当用户向下滑动页面时，由于背景图片随着页面的滑动而移动，就会导致页面下半部分的白色背景显示出来（因为背景图片小），我们可以通过 background-attachment 属性设置背景图片是否随着页面的滚动而滚动

属性值	作用
scroll	滚动
fixed	固定

19-背景固定.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>背景固定</title>
	<style>
		div {
			background-image: url(‘./img.jpg’);
			background-repeat: no-repeat;
			background-position: 10px 20px;
			background-attachment: fixed;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>
		<p>背景图片位置</p>
		<p>背景图片位置</p>
		<p>背景图片位置</p>
		......
	</div>
</body>
</html>

背景属性的复合写法

background: 背景颜色北京图片地址背景平铺背景固定背景图片位置;

课堂案例

略

CSS 的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级

层叠性

当给同一个元素分别设置了相同属性不同值的时候，两者就会产生冲突，而层叠性就是用来解决冲突的，后边的样式会将前边的样式覆盖掉

01-层叠性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>层叠性</title>
	<style>
/* 分别给 div 内的文本颜色设置为红色和粉色，粉色效果会将红色效果覆盖，但是文字大小不受影响 */
		div {
			color: red;
			font-size: 16px;
		}
		div {
			color: pink;
		}
	</style>
</head>
<body>
	<div>层叠性</div>
</body>
</html>

继承性

在为父元素设置样式的时候，一些样式会被它的后代元素继承，后代元素也会呈现该样式

02-继承性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>继承性</title>
	<style>
		/* 给 div 标签设置样式，p 标签会继承 div 标签的样式 */
		div {
			color: red;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div>
		<p>继承性</p>
	</div>
</body>
</html>

优先级

CSS 在给元素设置样式的时候，对于不同选择器相同属性的时候，是由优先级的，优先级高的选择器设置的样式会覆盖掉优先级低的选择器设置的样式

若选择器相同，则按层叠性处理
若选择器不同，要根据对应选择器的权重去判断，权重大的会覆盖掉权重小的样式

选择器	权重
继承样式，通用选择器(*)	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式(style属性)	1,0,0,0
!important	∞ 无穷大

03-优先级.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>优先级</title>
	<style>
		/* 0. 使用标签选择器将文本颜色改为红色(不加 !important) */
		div {
			/*5. 添加 !important 增加权重无穷大 */
			color: red !important;
		}
		/* 1.类选择器权重比元素选择器高，会将其样式覆盖 */
		.red {
			color: pink;
		}
		/* 2.ID 选择器权重又比类选择器高，会将其样式覆盖 */
		#red {
			color: green;
		}
		/* 注意，虽然 div 的样式权重很高，但是对于 p 来说，这些样式是通过继承得来的 */
		/* 继承样式的权重就是 0 ，所以元素选择器的样式会将其覆盖掉*/
		p {
			color: orange;
		}
	</style>
</head>
<body>
	<!-- 3. 行内样式权重更高 -->
	<div class="red" id=“red” style="color: blue;">
		优先级
		<p>优先级</p>
	</div>
</body>
</html>

在使用复合选择器的时候，多个基础选择器的权重会进行叠加

04-权重的叠加.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatiable" content="ie=edge">
	<title>权重的叠加</title>
	<style>
		/* 0. 使用标签选择器将文本颜色改为红色，权重为 0,0,0,1 */
		p {
			color: red;
		}
		/* 1. 使用复合选择器将文本颜色改为绿色，两者权重叠加，优先级大于标签选择器 */
		/* 0,0,0,1 + 0,0,0,1 = 0,0,0,2 > 0,0,0,1 */
		div p {
			color: green;
		}
		/* 2. 使用复合选择器将文本颜色改为粉色，两者权重叠加，权重更大 */
		/* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 > 0,0,0,2 */
		.pink p {
			color: pink;
		}
		/* 3. 权重可以多个叠加 */
		/* 0,0,0,1 + 0,0,1,0 + 0,0,0,1 = 0,0,1,2 > 0,0,1,1 */
		body .pink p {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="pink">
		<p>权重的叠加</p>
	</div>
</body>
</html>