前端学习（初识CSS 上）——选择器、优先级和字体样式

最新推荐文章于 2026-01-09 15:25:06 发布
原创 最新推荐文章于 2026-01-09 15:25:06 发布 · 4k 阅读 · 38 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文介绍了CSS的基础知识，包括CSS的定义、基础语法、选择器类型（如标签选择器、类选择器、ID选择器等）、CSS的继承和优先级、字体样式（如color、font-size、font-family等）以及文本样式。通过实例展示了各种选择器的用法和优先级计算，帮助初学者理解CSS的工作原理。

前端学习之初识CSS

一、什么是CSS？

1.CSS 指层叠样式表 (Cascading Style Sheets)。
2.样式定义如何显示 HTML 元素。
3.样式通常存储在样式表中。
4.把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。
5.外部样式表可以极大提高工作效率。
6.外部样式表通常存储在 CSS 文件中。
7.多个样式定义可层叠为一个。

二、CSS基础语法

1.代码结构

CSS代码由“选择器”和“声明”两部分组成。

#choose{
	属性:值;
}
/*#choose就是选择器的名字，#代表的含义在后续选择器中会介绍。
{}里面的就是声明，由各个属性和值组成。*/

CSS代码的注释方法与HTML中的不同，是“/* */”，在两个星号中间写注释内容。

2.CSS的引用方法

CSS一般有三种的引用方法，分别是：

（1）内联式

在起始标签内添加style样式属性，如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 100px; height: 100px; background-color: #f00;">
			123
		</div>
	</body>
</html>

（2）嵌入式

写在style标签里，并且要定义type值为"text/css"，最好放置在head标签里，比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#square1{
				width: 100px;
				height: 100px;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<div id="square1">
			123
		</div>
	</body>
</html>

（3）链接式

把CSS样式写在外部文件中，形如：扩展名.css，需要用到link标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="square.css"/>
		<!--link也要放在head标签里-->
		<title></title>
	</head>
	<body>
		<div id="square1">
			123
		</div>
	</body>
</html>

/*square.css*/
#square1{
	width: 100px;
	height: 100px;
	background-color: #f00;
}

（4）导入式

使用@import引入外部CSS，并且@import需写在style标签里，或者是CSS文件里（相当于是向某一个CSS文件导入另一个CSS文件）。如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			@import "square.css";
			/*也可以写作：@import url("square.css");*/
		</style>
		<title></title>
	</head>
	<body>
		<div id="square1">
			123
		</div>
	</body>
</html>

/*square.css*/
#square1{
	width: 100px;
	height: 100px;
	background-color: #f00;
}

以上四种方法写出来的结果都是一样的：
在这里插入图片描述
四种方法的优劣对比：

类型执行效率可复用性可维护性兼容性
内联式高无法复用低高
嵌入式高无法复用高高
链接式中高高高高
导入式低高高低

三、CSS选择器

1.标签选择器

定义：以html标签作为选择器。如：

h1{
	color: red;
}
p{
	color: black;
	font-size: 50px;
}

这样子的话，html文件里的h1标签和p标签都会相应地改变样式。

2.类选择器

类选择器使用时首先要在html标签里定义class属性，具体使用如下：

/*类选择器的写法*/
.选择器名{
	属性: 值;	
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo1{
				font-size: 30px;/*设置字体大小*/
				color: #f40;
			}
		</style>
	</head>
	<body>
		<div class="demo1">
			这是类选择器的演示
		</div>
	</body>
</html>

效果如图：
在这里插入图片描述
一个标签也可以拥有多个类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.size{
				font-size: 30px;
			}
			.color{
				color: #f40;
			}
		</style>
	</head>
	<body>
		<div class="size color">
			这是类选择器的演示
		</div>
	</body>
</html>

效果和上面是一样的：
在这里插入图片描述
如果要为拥有相同类名的不同标签设置不同的样式，只需在类选择器前加标签即可：
一个标签也可以拥有多个类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div.size{
				font-size: 30px;
			}
			div.color{
				color: #f40;
			}
			p.size{
				font-size: 20px;
			}
			p.color{
				color: #000;
			}
		</style>
	</head>
	<body>
		<div class="size color">
			这是类选择器的演示
		</div>
		<p class="size color">
			这是类选择器的演示
		</p>
	</body>
</html>

虽然class的值相同，但是样式却不是一样的：
在这里插入图片描述

3.ID选择器

ID选择器的用法和类选择器类似，使用前需要给标签加上id属性，但与类选择器不同的是，ID选择器的id是唯一的，不能像class那样子设置多个的选择器，并且id不能与其他的id同名，具体使用如下：

/*ID选择器的写法*/
#选择器名{
	属性: 值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#pa{
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="pa">
			这是ID选择器的演示
		</div>
	</body>
</html>

效果如图：
在这里插入图片描述

4.群组选择器

如果多个选择器拥有相同的样式属性，则可以通过群组选择器来减少代码量，具体使用如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#pa,.demo,div{   /*各个选择器之间用“,“隔开*/
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p id="pa">
			这是ID选择器的演示
		</p>
		<div>
			这是标签选择器的演示
		</div>
		<p class="demo">
			这是类选择器的演示
		</p>
	</body>
</html>

效果如图：
在这里插入图片描述

5.通配符（全局）选择器

在开发时，一般都是先设置全局的一个样式，这时候就需要用到通配符选择器，具体使用如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{  /*通配符选择器就是一个"*"后面跟上声明*/
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			这是通配符选择器的演示
		</div>
		<p>
			这是通配符选择器的演示
		</p>
	</body>
</html>

通配符选择器会为全局的标签设置统一的样式，效果如图：
在这里插入图片描述

6.后代选择器

一般在开发时，标签之间会相互嵌套，但是有些时候要改变嵌套内的标签而不改变其他的标签时，比如：

<div><p>456</p><div>
<p>123</p>

要修改div里面的p标签而不修改外面单独的p标签时，就需要用到后代选择器，具体使用如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div p{ /*两个选择器名之间用空格隔开，表示p嵌套在div里面*/
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是后代选择器的演示</p>
		</div>
		<p>
			这是后代选择器的演示
		</p>
	</body>
</html>

这时候，只有嵌套的p标签发生了样式上的改变：
在这里插入图片描述
后代选择器表示的是只要有嵌套在前一个标签中，都可以生效，不一定和前一个标签是父子关系，比如：

<style type="text/css">
	div p{ 
		color: #f00;
		font-size: 30px;
	}
</style>

<div class="demo1">
	<div>
		<div class="demo2">
			<p></p>
		</div>
	</div>
</div>

这样子代选择器也会生效。

7.子选择器

与子代选择器不同的是，子选择器与前一个选择器必须是父子的关系，并且表示方法也有所不同，具体写法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div>p{ /*子选择器中间要用">"相连，表示div是p的父级*/
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="demo1">
			<div>
				<span>
					<p>这是子选择器的演示</p>
				</span>
			</div>
		</div>
	</body>
</html>

这里的p和div并不是父子关系，所以结果样式没有发生改变：
在这里插入图片描述
将span改为div后，样式就会发生改变。

8.伪类选择器

伪类选择器适用于向某些选择器添加特殊的效果。

（1）链接伪类

链接的四种状态：

伪类名称说明
:link未访问状态
:visited已访问状态
:hover鼠标悬停状态（鼠标经过时）
:active激活时状态（选中还未放开）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{    /*未访问的状态*/
				background-color: green;
			}
			a:visited{    /*已访问的状态*/
				background-color: yellow;
			}
			a:hover{    /*悬停状态*/
				background-color: grey;
			}
			a:active{    /*点击未松开的状态*/
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度首页</a>
	</body>
</html>

演示结果就是，还未点击的时候是绿色的，当光标移上去的时候会变成灰色，点击后未放开的时候是粉色，点击后再返回来看的时候就变成了黄色。
说明：
1.:hover必须放在:link和:visited之后才能生效。
2.:active必须放在:hover之后才能生效。
3.伪类不区分大小写。

（2）伪类选择器的其他用法

伪类选择器还可以用于获取首个子对象。
语法：

选择器:first-child{
	声明
}

具体例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div span:first-child{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<span>
				123
			</span>
			<span>
				456
			</span>
		</div>
	</body>
</html>

结果只有第一个span标签里的字背景颜色发生改变：
在这里插入图片描述

9.属性选择器

所有拥有该属性的标签都会改变样式。
语法：

[属性名]{
	声明	
}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[id]{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="">
			123
		</div>
		<span id="">
			456
		</span>
	</body>
</html>

所有拥有id属性的标签都会改变样式：
在这里插入图片描述
也可以对属性进行限制，比如令id等于某个特定的值，同理，这里就不作演示了。

10.!important用法

语法：

属性:值 !important;

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#demo{
				background-color: red;
			}
			.demo{
				background-color: green !important;
			}
		</style>
	</head>
	<body>
		<div id="demo" class="demo">
			123
		</div>
	</body>
</html>

虽然ID选择器的优先级比类选择器更高，但是由于设置了!important，导致最后结果是绿色：
在这里插入图片描述

四、CSS继承

继承就是子标签可以继承父标签的部分CSS属性。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>123</p>
		</div>
	</body>
</html>

这里只设置了div的样式，没有设置p的样式，但是结果样式依旧发生了改变，p标签继承了div标签的样式：
在这里插入图片描述
但是像border之类的属性就无法继承，如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: red;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

这里border生效的标签只有div：
在这里插入图片描述

一般可以继承的属性就是字体样式等等，不可继承的就是盒子模型属性、定位布局属性等等。
继承的好处：通过继承关系，可以减少CSS的代码量。

五、CSS优先级和权重

因为CSS是层叠样式表，当同一个元素上叠加了多个样式，就会发生一些声明上的冲突，这时候就需要通过优先级来判断哪个样式优先显示。
优先级顺序：
!important > 内联式样式（即在标签后直接跟style）> ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 > 通配符选择器 > 继承样式 > 默认样式
选择器权重表：

选择器权重值
!importantInfinity（正无穷）
内联式样式1000
ID选择器0100
类、属性、伪类0010
标签0001
通配符选择器0000

这里的1、10、100、1000都是二百五十六进制的，不是十进制的。
权重也是用来判断优先级的。
权重计算：

body #demo{
	声明
}
/*这里的权重值就是0001+0100=0101*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#demo{  /*权重为0100*/
				color: red;
			}
			.first .second .third #demo{    
			/*权重为0010+0010+0010+0100=0130*/
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="first">
			<div class="second">
				<p class="third">
					<span id="demo">
						123
					</span>
				</p>
			</div>
		</div>
	</body>
</html>

这里的CSS都是设置的demo的样式，但是由于下面这个权重更高，所以优先显示绿色：
在这里插入图片描述

六、CSS字体样式

常用字体样式属性

属性名称说明
color文字颜色
font-size字体大小
font-family字体
font-weight字体粗细
font-style字体风格

1.color

用途：设置元素的文字颜色。
语法：
color: 颜色名称;
color: #十六进制;(一共是六位，但如果两两一样，可以简写，比如#00ff11可以简写为#0f1)
color: rgb(0-255,0-255,0-255);(三个数字分别代表红绿蓝)
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.color1{
				color: green;
			}
			.color2{
				color: #f40;
			}
			.color3{
				color: rgb(50,50,250);
			}
		</style>
	</head>
	<body>
		<div class="color1">
			这是color1的演示
		</div>
		<div class="color2">
			这是color2的演示
		</div>
		<div class="color3">
			这是color3的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

2.font-size

用途：设置元素的字体大小。
语法：font-size: 字体大小;
单位：px 像素，em/%指的是与当前父标签字体的倍数关系。
浏览器默认字体大小一般就是16px。
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.size1{
				font-size: 16px;
			}
			.size2{
				font-size: 1.5em;
			}
			.size3{
				font-size: 150%;
			}
		</style>
	</head>
	<body>
		<div class="size1">
			这是font-size单位px的演示
		</div>
		<!-- 这里相当于是默认16px*1.5 -->
		<div class="size2">
			这是font-size单位em的演示
		</div>
		<!-- 这里相当于是默认16px*1.5 -->
		<div class="size3">
			这是font-size单位%的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

3.font-family

用途：设置元素的字体。
语法：font-family:[字体1][字体2][,…]
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.family1{
				font-family: "微软雅黑";
			}
			.family2{
				font-family: "宋体";
			}
			.family3{
				font-family: "Arial";
			}
		</style>
	</head>
	<body>
		<div class="family1"> 
			这是font-family的演示
		</div>
		<div class="family2">
			这是font-family宋体的演示
		</div>
		<div class="family3">
			这是font-family Arial的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述
如果在font-family中设置多个字体的话，如：

font-family: "Arial","宋体","微软雅黑";

则浏览器会先识别Arial，若无，则接着往下，如果全没有，则会显示浏览器默认字体。

4.font-weight

用途：设置元素字体的粗细。
语法：font-weight: normal、bold、bolder、lighter、100-900;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.weight1{
				font-weight: normal;
			}
			.weight2{
				font-weight: bold;
			}
			.weight3{
				font-weight: bolder;
			}
			.weight4{
				font-weight: lighter;
			}
			.weight5{
				font-weight: 100;
			}
			.weight6{
				font-weight: 200;
			}
			.weight7{
				font-weight: 300;
			}
			.weight8{
				font-weight: 400;
			}
			.weight9{
				font-weight: 500;
			}
			.weight10{
				font-weight: 600;
			}
			.weight11{
				font-weight: 700;
			}
			.weight12{
				font-weight: 800;
			}
			.weight13{
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<div class="weight1"> 
			这是font-weight的演示
		</div>
		<div class="weight2">
			这是font-weight的演示
		</div>
		<div class="weight3">
			这是font-weight的演示
		</div>
		<div class="weight4">
			这是font-weight的演示
		</div>
		<div class="weight5">
			这是font-weight100的演示
		</div>
		<div class="weight6">
			这是font-weight200的演示
		</div>
		<div class="weight7">
			这是font-weight300的演示
		</div>
		<div class="weight8">
			这是font-weight400的演示
		</div>
		<div class="weight9">
			这是font-weight500的演示
		</div>
		<div class="weight10">
			这是font-weight600的演示
		</div>
		<div class="weight11">
			这是font-weight700的演示
		</div>
		<div class="weight12">
			这是font-weight800的演示
		</div>
		<div class="weight13">
			这是font-weight900的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

5.font-style

用途：设置元素的字体样式。
语法：font-style:normal、italic、oblique;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.style1{
				font-style: normal;
			}
			.style2{
				font-style: italic;  /*斜体*/
			}
			.style3{    
				font-style: oblique; /*文字倾斜*/
			}
		</style>
	</head>
	<body>
		<div class="style1"> 
			这是font-style的演示
		</div>
		<div class="style2">
			这是font-style的演示
		</div>
		<div class="style3">
			这是font-style的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

6.font属性简写方式

语法：font: font-style font-weight font-size/line-height font-family;
注意：
书写的顺序要对；
必须同时设置font-size和font-family；
各项值之间用空格隔开。
演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.font1{
				font: italic bolder 20px "宋体";
			}
		</style>
	</head>
	<body>
		<div class="font1"> 
			这是font的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

七、CSS文本样式

常用文本样式属性

属性名称说明
text-align文本对齐
text-decoration文字加修饰
text-indent文本缩进
line-height文字行高

1.text-align

用途：设置文本水平对齐方式。
语法：text-align:left、right、center、justify;
示例：
注意：只对块级元素有效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.align1{
				text-align: left; /*左对齐*/
			}
			.align2{
				text-align: right;/*右对齐*/
			}
			.align3{
				text-align: center; /*居中*/
			}
			.align4{
				text-align: justify;/*伸展对齐*/
			}
		</style>
	</head>
	<body>
		<div class="align1"> 
			这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示.
			这是text-align的演示这是text-align的演示这是text-align的演示.
		</div>
		<div class="align2">
			这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示.
			这是text-align的演示这是text-align的演示这是text-align的演示.
		</div>
		<div class="align3">
			这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示.
			这是text-align的演示这是text-align的演示这是text-align的演示.
		</div>
		<div class="align4">
			这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示这是text-align的演示.
			这是text-align的演示这是text-align的演示这是text-align的演示.
		</div>
	</body>
</html>

结果：
在这里插入图片描述

2.text-decoration

用途：用来给文本加修饰
语法：text-decoration: underline、overline、line-through、none;
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.decoration1{
				text-decoration: underline;/*下划线*/
			}
			.decoration2{
				text-decoration: overline;/*上划线*/
			}
			.decoration3{
				text-decoration: line-through;/*删除线*/
			}
			.decoration4{
				text-decoration: none;/*无*/
			}
		</style>
	</head>
	<body>
		<div class="decoration1"> 
			这是text-decoration的演示
		</div>
		<div class="decoration2">
			这是text-decoration的演示
		</div>
		<div class="decoration3">
			这是text-decoration的演示
		</div>
		<div class="decoration4">
			这是text-decoration的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述
也可以设置多个text-decoration，语法：text-decoration:underline overline;但如果加了none，则之前设置的都不会生效。

3.text-indent

用途：设置文本的缩进。
语法：text-indent: 缩进距离（单位为px或em）;
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.indent1{
				text-indent: 10px;
			}
			.indent2{
				text-indent: 2em;/*2个文字的缩进*/
			}
			.indent3{
				text-indent: 0;
			}
		</style>
	</head>
	<body>
		<div class="indent1"> 
			这是text-indent的演示
		</div>
		<div class="indent2">
			这是text-indent的演示
		</div>
		<div class="indent3">
			这是text-indent的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述

4.line-height

用途：设置文本的行高。
语法：line-height: 具体数值或百分比;
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.height1{
				line-height: 50px;
			}
			.height2{
				line-height: 100px;
			}
			.height3{
				line-height: 50%;
			}
		</style>
	</head>
	<body>
		<div class="height1"> 
			这是line-height的演示
		</div>
		<div class="height2">
			这是line-height的演示
		</div>
		<div class="height3">
			这是line-height的演示
		</div>
	</body>
</html>

结果：
在这里插入图片描述
在平时开发时，一般line-height都是以em为单位，比如1.5em表示1.5倍的字体大小，因为如果设置的行高比字体大小要小的话，文字会发生重叠，所以一般以em为单位。
这一部分到这里就结束啦，有不足的地方还望大家指正啦，蟹蟹！
在这里插入图片描述

【解决css优先级问题】
m0_67285828的博客
02-17 1765
CSS优先级问题可以通过以下几种方式解决： 1. 适当使用!important 属性：!important 属性可以让一个样式有更高的优先级，它会覆盖同等权重的其他声明。但是在谨慎使用，尽量避免滥用。 2. 给样式指定权重：可以给每个样式指定权重，比如： font-weight: bolder; 或者 font-weight: lighter; 这样也可以让它相对其他样式有更高的优先级。 3. 在结构上解决问题：在结构上进行CSS的定义，这样就可以避免混乱，可以避免权重的冲突，也可以有效的减少不必要的
【前端学习记录4】字体样式和文本样式
aftertasttea的博客
12-07 738
一、字体样式 1、简介：英文“font”前缀开头，是“字体”的意思。“font-size”表示字体大小，“font-weight”表示字体粗细。 2、字体类型：font-family 语法：font-family:字体1，字体2，... ，字体N； 设置一种字体：#div1{font-family:Arial;} 设置多种字体：p{font-family:Arial,Verdana,...
前端——伪类选择器、选择器优先级、css修改文字属性、css背景、css边框、display属性、div、浮动、浮动清除
kdq18486588014的博客
04-26 890
文章目录一、伪类选择器二、选择器优先级三、css修改文字属性四、css背景五、css边框六、display属性七、div1.外边距2.内边距八、浮动 一、伪类选择器 1.修改首个字体样式 p:first-letter { color: red; font-size: 48px; } 2.在文本开头添加内容 p:before { content: 'css开头'; color: blue;
web前端基础 （1） css字体，外观属性，权重优先级规则
u010963053的博客
04-22 1053
1.几个css常用的css属性 box-sizing:border-box; 让组件自动减速box的宽高，写宽高的时候不计算item之间border的宽高，如下： （不加这个属性，就需要计算时减去border的宽度，写成：width:49%） <style lang="scss" scoped > .recommend_wrap { display: flex; f...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
weixin_48650082的博客
04-03 976
一、基础认知 1.1 CSS介绍 CSS：层叠样式表 CSS的作用：给页面中的HTML标签设置样式 2.2 CSS语法规则 • css写在style标签中，style标签一般写在head标签里面，title标签下面 1.3 CSS常见属性 CSS常见属性 作用 color 文字颜色 font-size 字体大小 background-color 背景颜色 width 宽度 height 高度 注意点： （1） CSS 标点符号都是英文状态下的 （2）每一个样式键值对写完
【前端基础系列】CSS篇-选择器的优先级
Web面试那些事儿的博客
01-02 1752
在前端面试中，经常会遇到CSS选择器的问题三连：说一下CSS的选择器有哪些优先级是怎样的权重计算方式我们在上一篇 【前端基础系列】CSS篇-常用选择器介绍[1] 中已经对问题1进行了详细的解答，今天就来给大家介绍选择器的优先级和权重计算方式。
CSS继承，优先级以及字体样式
最新发布
likuoelie的博客
01-09 783
CSS继承、优先级与字体样式解析 CSS通过继承、优先级和层叠机制控制样式应用。继承特性让子元素自动获取父元素的文本、字体等属性，如font-family、color等。优先级则通过选择器权重决定样式覆盖顺序，从高到低依次为!important、内联样式、ID、类、标签选择器等。字体样式作为典型继承属性群，包含font-size、font-weight等可继承属性，可通过简写font属性统一设置。实际应用中，合理利用继承机制能减少重复代码，而掌握优先级规则则能精准控制样式覆盖。常见问题如样式不生效，多因优先
前端 CSS3 字体样式的继承与覆盖
AI架构全栈开发实战笔记
05-18 652
本文旨在全面解析CSS3中字体样式的继承与覆盖机制，帮助前端开发者深入理解CSS样式应用的基本原理，掌握在实际项目中有效控制字体样式的方法。文章将从基础概念入手，逐步深入探讨继承机制、覆盖规则、优先级计算等核心内容，最后通过实际案例和最佳实践总结。继承(Inheritance)：子元素自动获取父元素某些样式属性的机制覆盖(Override)：通过更具体的选择器或更高优先级的规则替换已定义的样式层叠(Cascade)：CSS确定最终应用哪些样式规则的过程可变字体的普及。
前端CSS样式零基础教学总结，UI、前端开发都适用
景天科技苑
03-02 1963
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
前端 CSS 样式书写与选择器 基础知识
2403_89586338的博客
05-12 1643
CSS（层叠样式表）是用于修饰HTML标签样式和排版的技术，通过控制字体、颜色、边距等属性来美化网页。CSS样式可以通过行内样式、内嵌样式和外链样式表三种方式书写，分别通过style属性、<style>标签和外部CSS文件实现。
html+css基础：05、css2的编写位置(行内样式、内部样式、外部样式)及样式表优先级及语法规范及代码风格及基本选择器(通配、元素、类、ID选择器)
狮子座的男孩
12-10 1764
本文介绍了CSS的基础知识，包括三种编写位置（行内样式、内部样式、外部样式）及其优先级规则，展示了不同位置样式的实现代码和效果。详细讲解了CSS语法规范、代码风格（展开/紧凑格式），以及基本选择器（通配选择器、元素选择器、类选择器）的使用方法，通过多个示例代码演示了各选择器的应用场景和实际效果。文章采用代码+效果图的形式直观呈现CSS样式的应用结果。
字节一面：css选择器有哪些？优先级？哪些属性可以继承？
A_D_H_E_R_E的博客
09-08 1087
最近博主在**字节面试**中遇到这样一个面试题，这个问题也是前端面试的高频问题，作为一名前端开发工程师，css是我们的必备技能，熟悉css选择器以及继承是我们写好css的关键，博主在这给大家细细道来。
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
CUFEECR的博客
08-16 3285
CSS常见文本样式包括颜色、大小、字体等，颜色有4种表示形式；列表常见样式包括类型、图片和位置等；背景样式包括颜色、图片、重复方式、位置；浮动主要为了脱离文档流的垂直排列、变为行内元素，存在高度塌陷问题，有3种解决办法。元素选择器是已经存在的标签的元素名称；使用id选择器给某一唯一元素设置格式；给某一类标签设置同一个样式使用类选择器；匹配所有元素使用通配选择器；群组选择器可以抽离相同样式；包含选择器给某元素的子元素设置样式；伪类选择器可以向超链接添加特殊效果；选择器优先级行内样式最高，通配选择器最低。
CSS选择器优先级详解：从基础到实践
你若盛开，清风自来
09-01 1135
本文详细介绍了CSS选择器优先级规则及其应用。文章首先回顾了常见的CSS选择器类型，包括标签选择器、类选择器、ID选择器等。重点讲解了优先级计算规则，将选择器分为行内样式、ID选择器、类/属性/伪类选择器、标签/伪元素选择器等不同层级。通过示例展示了优先级冲突的解决方法，并给出了编写高效CSS的建议：避免过度使用ID选择器、慎用!important、保持选择器简洁性等。理解这些规则有助于开发者编写更高效、可维护的CSS代码，确保样式按预期呈现。
【CSS 面经】CSS选择器及其优先级
lph159的博客
12-08 941
层叠性是CSS的一个重要特性，它允许多个样式规则应用于同一个元素，并决定哪些样式会生效。层叠性基于规则的优先级、选择器的特性以及规则在样式表中的顺序。
【CSS3】初始前端 CSS，选择器，字体文本列表样式
身在边城 心在编程
11-04 627
CSS 优势 1、内容和表现分离 2、网页结构表统一，可以实现复用 3、样式十分丰富 4、建议使用独立的 HTML 的 CSS 文件 5、利用 SEO，容易被搜索引擎收录
03-CSS样式表和选择器
JayYuen的博客
10-06 3244
本文主要内容 CSS概述 CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表 CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器 CSS几种扩展选择器：后代选择器、交集选择器、并集选择器 CSS样式优先级 前言 现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScri...
避免样式冲突：掌握CSS选择器优先级与层叠规则的终极指南
吴师兄大模型的博客
02-07 1694
在前端开发中，CSS选择器是网页样式设计的基础工具，而理解选择器优先级与层叠规则，能够让我们更加精准地掌控样式的应用。无论是复杂的网页布局，还是细节处的样式调整，选择器的优先级和层叠机制都会直接影响最终的视觉效果。掌握这些核心规则不仅能避免样式冲突，还能使代码更加简洁、清晰、易维护。在这篇文章中，我们将深入探讨组合选择器、伪元素与伪类的使用，分析CSS选择器优先级的计算方法，并讨论!important的使用及其局限性。通过对这些技术的理解和运用，你将能够更灵活地控制网页元素的样式，并应对复杂的样式需求。
css:选择器、样式和字体
2301_82101106的博客
11-12 548
在编写CSS时，应尽量使用低优先级的选择器，如类型选择器和类选择器，使CSS代码更加灵活和可维护。：清除浏览器默认的margin和padding，是常见的CSS重置方式。：可被多个文档共享，便于网站整体样式管理和维护，是大型项目的首选方式。：优先级最高，但不利于样式复用和维护，适合临时样式调整。：多个字体作为备选，浏览器会使用第一个支持的字体。：一个元素可以有多个类名，类名之间用空格分隔。：仅作用于当前文档，便于单个文档的样式管理。选择页面上的所有元素，常用于重置样式。符号加类名，可选择多个元素。
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
热门推荐
贝尔摩德苦艾酒
12-22 1万+
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这名没人用吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值