css的引用和css中的选择器_css 多次引用的样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43090158/article/details/82317798

<!--
css:层叠样式表---作用：控制HTML的样式
使用：1.内联<style="样式名1：样式值1;样式名2：样式值2;....">    控制当前标签
	  2.外联:在head标签里面，通过style标签     控制当前页面对应选择器的样式
	       <style type="text/css">
		     选择器{
				 样式1：样式值1;
				 ...
			 }
		   </style>
	  3.外部引用<link rel="stylesheet" href="" type="text/css"/>
	    外部文件定义样式：
		1）文件必须以.css
		2）选择器{
			样式名1:样式值1;
			}
			
	1.内联的优先级最高
	2.外联和外部引用同时存在----就近原则（一般来说：内联>外联>外部引用）
-->
<!-- 
 1.标签选择器----作用：根据标签来选择
 定义方式： 标签名{
	   样式1：样式值1;
	 }
 2.ID选择器----作用：根据id来选择对应ID的标签 -----id更多控制动作（js）---一个页面的id一般是唯一的
 <标签名 id="id名">
 #标签名{
	 样式1：样式值1;
 }
 3.类选择器---作用：根据类名来选择对应类名的标签----类选择器更多的是控制样式
 <标签名 class="类名">
 .类名{
     样式1：样式值1;
 }
 ----------------------------
 4.子选择器
  定义方式：选择器 选择器 选择器...{
 	 样式1：样式值1;
 
  }
 5.属性选择器
 6.组合选择器----多个样式重合的时候
 定义方式：选择器,选择器,选择器...{
	 样式1：样式值1;

 }
 
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			hr{
				background-color: blue;
				height: 50px;
			}
			.pcss{
				color: antiquewhite;
				font-size: 20px;
			}
			ul li{
				
			}
		</style>
	</head>
	<body>
	
	  <hr  style="background-color: red; height: 50px;"/>
	  
	  <hr />
	  <p class="pcss">春天来了<span>阳光明媚</span>四处芳菲</p>
	  <ul>
	  	<li>苏州</li>
		<li>杭州</li>
		<li>扬州</li>
	  </ul>
	  
	</body>
</html>