css的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * 
			 标签名选择器
			 给页面所有同名的标签定义样式的选择器
			 语法  标签名{样式}
			 * */
			span{
				background-color: skyblue;
				font-size: 40px;
				font-family: "楷体";
				color: orangered;
			}
			/*
			 id选择器
			 一般body中的任何一个标签都有id属性
			 id属性的值一般在同一个网页上是不允许有重复值
			 id属性一般用于帮助我们定位到页面上唯一的一个标签
			 id属性值命名有规则
			 不能有空格和一些特殊符号 
			 特殊符号中仅可以使用_   不推荐 $ 会和jquery命名冲突 
			 不能以数字为开头
			 推荐写法  应为字母开头 数字放在后面
			 语法: #id值{样式}
			 */
			#p1{
				border: 1px dotted blue;
				background-color: gray;
				color: red;
				width: 100px;
				height: 100px;
			}
			
			/*
			 类选择器
			 一般body中的所有标签都有class属性
			 多个不同的标签可以有相同的class属性值
			 通过标签的class属性确定样式的作用范围
			 语法  .class属性值{样式}
			 */
			.c1{
				background-color: cadetblue;
				font-size: 50px;
				font-family: "微软雅黑";
				color: black;
				text-decoration: none;
			}
			
			
		</style>
	</head>
	<body>
		<span id="s1">今天是2020年3月5日</span>
		<br />
		<span id="s2">今天是2020年3月5日</span>
		
		
		<p id="p1">今天是2020年3月5日</p>
		<p id="p2">今天是2020年3月5日</p>
		<p id="p3" class="c1">今天是2020年3月5日</p>
		<h1 id="ha" class="c1">今天是2020年3月5日</h1>
		<a href="#" class="c1">百度</a>
		
		
	</body>
</html>

  

posted @ 2021-01-13 12:21  巧克力曲奇  阅读(83)  评论(0编辑  收藏  举报