CSS温故知新

最新推荐文章于 2024-11-08 16:59:14 发布

Huangruxia

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量964

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/huang_ruxia/article/details/10527179

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一季 CSS

本人属于进化慢的类型，接触CSS已经半年了，虽然也写了几十个简单的静态网页，但是代码的质量还是不高，写得不够简练。我想应该是对于一些属性还不够了解，认识不够。所以本着能温故知新的愿望又重看了一下相关资料。没想到还真有用，确实能在往昔的大意中再找回些新的东西。闲话不说了，这就进入正题。

1．继承性

_*CSS的继承规则是“外部的元素样式会保留下来继承给这个元素所包含的其他元素。（注：上边界属性值是不会继承的。）

_*当CSS样式表继承遇到冲突时，总是以最后定义样式为准。

之前有遇到过消除继承的问题，就是用重新定义的方法，但由于重新定义时对元素定义不够精确以至于还保留着父元素的属性达不到预期的效果，所以当我们在重新定义的时候得注意了。注：重新定义的这个样式文件，一定要根据其父端属性一一对应，不要以为是空的就是取消了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例1</title>
</head>
<style type="text/css">
.father{ color:red; background:#0FC;}
.father .son{ color:#FF0;}
.son{ color:#000;}
.father p{ color:#30F;}
.son .father{ background:none;}</style>
<body>
<div class="father">这是father</div>
<div class="son">这是son</div>
<div class="father"><p>这是father中的p</p></div>
<div class=" father"><div class="son">这是father中的son</div></div>
<div class="son"><div class="father">这是son 中的father</div></div>
</body>
</html>

这个继承性应该很明白了吧。