网页设计：CSS的选择器和样式

最新推荐文章于 2023-05-12 23:22:31 发布

Lntower

最新推荐文章于 2023-05-12 23:22:31 发布

阅读量277

点赞数

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

本文链接：https://blog.csdn.net/cptower/article/details/118146054

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

选择器

标签选择器、类选择器、ID选择器

标签选择器：直接应用到HTML标签
在这里插入图片描述

类选择器：可以在页面中多次使用
在这里插入图片描述

ID选择器：在同一个页面中只能使用一次
在这里插入图片描述
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
			}
			/*ID选择器*/
			#idName{
				background-color: #55D7E4;
			}
			/*类选择器*/
			.className{
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<p>标签选择器</p>
		<ul id="idName">
			<li >桌面</li>
			<li>控制面板</li>
			<li>我的电脑
				<ul type="circle" class="className">
					<li>本地磁盘C</li>
					<li>本地磁盘D</li>
					<li>本地磁盘E</li>				
				</ul>
			</li>
		</ul>
	</body>
</html>

样式

行内样式、内样样式、外部样式（优先级：行内样式>内样样式>外部样式）

行内样式：
在这里插入图片描述
内部样式：
**外部样式
连接式：

导入式：

Lntower

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
网页设计：CSS的选择器和样式

选择器标签选择器、类选择器、ID选择器标签选择器：直接应用到HTML标签类选择器：可以在页面中多次使用ID选择器：在同一个页面中只能使用一次例如：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red; } /*
复制链接

扫一扫