css的引入方式和选择器

抱小猫

已于 2022-08-01 19:51:18 修改

阅读量474

点赞数 1

分类专栏： css 文章标签： css

于 2021-05-31 10:18:18 首次发布

本文链接：https://blog.csdn.net/qq_52016943/article/details/117398579

版权

1.css介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.css的引入方式

行内样式	<h3 style="color:#784599" > 这是一个标签 </h2>
内嵌样式	<head> <style type="text/css"> h3{ color:#783399; } </style> </head>
外联样式	<head> <link rel="stylesheet" type="text/css" href="css01.css"> </head>
导入样式	<head> <style type="text/css"> @import url("css01.css"); </style> </head>

四种引入方式的优先级:

在一般情况下：行内>内嵌>外联>导入
就近原则：离修饰的标签就近则优先级越高

<head>
	<meta charset="UTF-8">
	<title>css标签介绍</title>
	<style type="text/css">
	h2{
		color: #892277;
	}
	@import url("csso3.css");
	</style>
	<link rel="stylesheet" type="text/css" href="css02.css">
</head>
<body>
<p><h1 style="color:#674499">再美好也经不住遗忘，再悲伤也抵不过时间。
</h1></p>
<p><h2>闲看花开，静待花落，冷暖自知，干净如始。
</h2></p>
<p><h3>就算世界再荒芜，也总会有一个人是你的信徒。</h3></p>
<p><h4>借时光之手，暖一束花开，借一方晴空，拥抱一缕阳光。</h4></p>
</body>

h4{
	color: #000000;
}

h3{
	color: #891002;
}

效果展示：

3.css的元素选择器

1.基本选择器

ID选择器	只作用于HTML元素的id属性，ID选择器的使用是在id号前面加上#号。	#first{color: yellow;}
类选择器	类选择器能够将规则与一个或多个包含class属性的元素相匹配，class属性的值匹配类选择器中指定的值。	.name{color: #000000;}</

最低0.47元/天解锁文章

抱小猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css的引入方式和选择器

1.css介绍层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。2.css的引入方式......
复制链接

扫一扫

专栏目录