css高级形式 | 易学教程

在这里插入图片描述
一CSS层叠性和继承性

1.层叠性
层叠性指多种CSS样式的叠加。
2.继承性
继承性指书写CSS样式表时，子标记会继承父标记的某种样式。
注：并不是所有CSS属性都可以继承，如
边框属性，外边距属性，内边距属性，背景记属性，定位属性，布局属性，元素宽高属性

二、.CSS优先级
其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有100.
特殊情况：
1.继承式的权重为0
2.行内样式优先
3.权重相同时，遵循就近原则
4.CSS定义了一个！important命令，该命令被赋予最大的优先级
图像示例：
在这里插入图片描述
三、1.标签指定式选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
2.后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后边，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
3.并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器来实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新浪</title>
		<style type="text/css">
			.h2{font: 24px 黑体;
			color: #FF0000;
			text-align: left;
			text-decoration: underline;}
			.bule{color: blue;}
			.red{color: #FF0000;}
			.p{font: 14px 楷体;
			color: black;
			text-align: left;}
			.green{color: darkgreen;}
			.black{font: 14px 宋体;
			color: #000000;
			text-decoration: underline;}
		</style>
	</head>
	<body>
		<h2 class="h2">新浪<em class="bule">博客首页——</em>新浪网</h2>
		<p class="p"><em class="red">新浪网</em>博客频道是全中国最主流，最具人气的博客频道。<br>
		拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。</p>
		<p><em class="green">blog.sina.com.cn/2014-07-07</em><em class="black">-百度快照-评价</em></p>
	</body>
</html>