讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100633880

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

经过这段时间的学习,我们对CSS有了初步的了解和入门。在此基础之上,我们来了解CSS的特性。

CSS的层叠性

所谓层叠性是指CSS样式的叠加。例如,当使用内嵌式CSS样式表定义p标签的字号大小为18px,并使用行内式定义p标签的颜色为绿色;那么,p标签中的文本最终显示为18px绿色。

示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠性</title>
		<style type="text/css">
			p {
				font-size: 18px;
				font-family: "微软雅黑";
			}

			.poem {
				font-style: italic;
			}

			#secondLine {
				color: green;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p>朱雀桥边野草花,乌衣巷口夕阳斜。</p>
		<p class="poem" id="secondLine">旧时王谢堂前燕,飞入寻常百姓家。</p>
	</body>
</html>

效果如下:
在这里插入图片描述

CSS的继承性

CSS的继承性是指:子标签会继承父标签的某些样式,比如,文本颜色和文字大小。例如:假若定义body文本颜色为黑色,那么页面中所有文本都将显示为黑色。这是因为其它标签均嵌套在body标签中,它们均是body的子标签。

CSS的优先级

CSS为每一种基础选择器都分配了相应的权重。其中,标签选择器的权重为1,类选择器的权重为10,id选择器的权重为100。复合选择器(除并集选择器以外)的权重为基础选择器权重的叠加。当发生样式冲突时,则显示权重值最大的样式。

注意事项:

  • 行内样式优先。即行内样式的权重非常高,具有很高的优先级
  • 权重相同时,CSS样式遵循就近原则
  • ! important 具有最高优先级;无论其权重和样式位置! important都具有最大优先级
展开阅读全文

没有更多推荐了,返回首页