前端技巧CSS属性继承(inherit)的简单用法举例

CSS属性继承(inherit)的简单用法举例

CSS中可以通过inherit这个词来定义继承,比如color:inherit则表示设置与父元素相同的文字颜色。任何一个CSS属性要么是默认继承的,要么是默认不继承的,默认继承的属性有下面这些:

所有元素:visibility(规定是否可见)和cursor(鼠标样式);

内联元素:letter-spacing(字母间距),word-spacing(字间距),white-space(处理空白),line-height(行距),color(颜色),font(字体类、字号等字体相关属性),text-decoration(文本装饰),text-transform(字母大小写),direction(文本方向);

块状元素:text-indent(文字缩进)和text-align(文本水平对齐);

列表元素:list-style(列表样式相关属性);

表格元素:border-collapse(表格边框合并)…

也就是说,父元素如果设置了上述的某个属性,其子元素也会继承这个属性,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.wrap {margin:20px;width:300px;color:blue;}
</style>
</head>
<body>
<div class="wrap">
<p>欢迎访问全球最大的搜索引擎<a href="http://www.google.com/">Google</a></p>
</div>
</body>
</html>

这里给wrap这个div设置了文本颜色为蓝色,它的子元素p和a内的文字也都显示为蓝色,这里color属性是默认继承的。

CSS继承1.png

再如,我给wrap这个div设置一个橙色的边框,给p元素边框设置为继承:

.wrap {padding:10px;border:2px solid orange;}
p {border:inherit}

这时候p元素也出现了和父元素一样的边框,如下图:

CSS继承2.png

再如下面的网页给文本链接的颜色定义了蓝色,网页底部版权信息栏设计为黑底白字,这样的话,底部栏中的文字是白色,可文字如果出现链接的话,还是继承为蓝色:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
a {color:blue;}
#footer {background-color:#111;color:#fff;}
</style>
</head>
<body>
<div class="wrap">
<p>欢迎访问全球最大的搜索引擎<a href="http://www.google.com/">Google</a></p>
</div>
<div id="footer">
XXX 版权所有 本站服务器由<a href="#">阿里云</a>赞助
</div>
</body>
</html>

CSS继承3.png

此时,一般需要给footer中的链接定义为白色才能正常显示:

#footer a {color:#fff;}

这种情况如果使用继承来定义,会更灵活,如果底部文本颜色做了修改,底部链接文字颜色也会随着变化:

#footer a {color:inherit;}

灵活的使用继承这个定义,可以实现一些有趣的效果,例如下图所示的镜像效果:

CSS镜像.png

该效果实现的方法是给某div设置一个背景图片,然后给该div加一个伪元素,定义它的背景继承父元素,并沿Y轴旋转180度,即可实现镜像效果了,总体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.baby {
width:320px;
height:400px;
background:url(baby.png) no-repeat;
position:relative;
}
.baby:after {
content:" ";
background:inherit;
position:absolute;
top:0;
left:320px;
right:-320px;
bottom:0;
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="baby"></div>
</div>
</body>
</html>

同样的道理,还可以配合透明度或滤镜等属性,给某图片模拟一个倒影的效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.baby {
width:200px;
height:200px;
/*-这里使用了一张透明的png图片-*/
background:#000 url(apple.png) no-repeat bottom center;
position:relative;
}
.baby:after {
content:" ";
background:inherit;
position:absolute;
top:200px;
left:0;
right:0;
bottom:-200px;
transform:rotateX(180deg);
/*-这里使用滤镜属性-*/
filter:brightness(40%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="baby"></div>
</div>
</body>
</html>

实现的倒影效果如下图:

apple CSS倒影.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/122.html