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

最新推荐文章于 2024-04-28 20:02:49 发布

这名没人用吧

最新推荐文章于 2024-04-28 20:02:49 发布

阅读量3.4k

点赞数 17

分类专栏： css基础知识文章标签： css

本文链接：https://blog.csdn.net/weixin_43866830/article/details/114755809

版权

本文介绍了CSS的基础知识，包括CSS的定义、基础语法、选择器类型（如标签选择器、类选择器、ID选择器等）、CSS的继承和优先级、字体样式（如color、font-size、font-family等）以及文本样式。通过实例展示了各种选择器的用法和优先级计算，帮助初学者理解CSS的工作原理。

摘要由CSDN通过智能技术生成

一、什么是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

最低0.47元/天解锁文章

这名没人用吧

关注

17
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
17
评论
前端学习（初识CSS 上）——选择器、优先级和字体样式

前端学习之初识CSS一、什么是CSS？二、CSS基础语法1.代码结构2.CSS的引用方法（1）内联式（2）嵌入式（3）链接式（4）导入式三、CSS选择器1.标签选择器2.类选择器3.ID选择器4.群组选择器5.通配符（全局）选择器6.后代选择器7.子选择器8.伪类选择器（1）链接伪类（2）伪类选择器的其他用法9.属性选择器10.选择器的优先级以及权重11.!important用法一、什么是CSS？1.CSS 指层叠样式表 (Cascading Style Sheets)。2.样式定义如何显示 HTML
复制链接

扫一扫