CSS选择器

最新推荐文章于 2022-04-20 22:46:44 发布

BlizCp

最新推荐文章于 2022-04-20 22:46:44 发布

阅读量1.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/BlizCp/article/details/110070864

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、标记选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标记选择器</title>
	<!--
		标记选择器为页面某一类标记指定统一的CSS样式
		标记选择器语法格式：
					<style type="text/css">
					标记名{属性1：属性值1；属性2：属性值2......}
					</style>
		该语法中所有HTML标记名都可以作为标记选择器,例如body/h1/p/strong等

		标记选择器最大的优点时能快速为页面中同类型的标记统一样式,同时这也是它的缺点,即不能设计差异化样式
	-->
	<style type="text/css">
		p{ font -size:12px; color:#666;font-family:"微软雅黑";}
	</style>
</head>
<body>
</body>
</html>

2、类选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
	<!--
		type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析.
		在所有选择器中在<head>位置中必须添加<style type="text/css">才可以继续选择器的操作
		大多数HTML元素都可以定义class属性，并且类选择器最大的优势是可以为元素对象定义单独或相同的样式
	-->
	<style type="text/css">
		.red{color: red;}
		.green{color:green}
		.font22{font-size: 22px}
		p{text-decoration: underline;font-family: "微软雅黑";}
	</style>
</head>

<body>
	<h2 class="red">网页UI设计学院</h2>
	<p class="green font22">前端与移动开发学院</p>
	<p class="red font22">PHP开发学院</p>
	<p>网络营销学院</p>
</body>
</html>

3、id选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
	<!--
	id选择器使用"#"进行标识后面紧跟id名
	id基本语法格式#id名{属性1：属性值1；属性2：属性值2；.....}
	注释：id是唯一属性只能对应文档唯一的一个具体元素
	-->
	<style type="text/css">
		#bold{font-weight: bold; color: red;}
		#font22{font-size: 22px}
	</style>
</head>

<body>
	<p id="bold">段落1：设置字体红色,加粗效果</p>
	<p id="font22">段落2：设置字号为22px</p>
	<p id="font22">段落3：设置字号为22px</p>
	
	<!--语法错误：id选择不支持像类选择器同时定义多个值-->
	<p id="bold font22">段落4：同时设置字体为22px,加粗效果</p>
</body>
</html>

BlizCp

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

1、标记选择器<!doctype html><html><head><meta charset="utf-8"><title>标记选择器</title>  <style type="text/css"
复制链接

扫一扫