CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
CSS 所有属性都有三个共同的属性值:
- initial:初始值。
- inherit:继承。
- unset:如果属性可以继承等同于
inherit
,不能继承等同于initial
。
$$tip
unset
最常用的场景是取消一个存在定义的属性值,还可以使用 all 来设置所有的属性。
$$
$$tip
有关样式是否可以继承可以参考 w3c 的属性表格。
$$
<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/wvPRwVg?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
应用实战
initial
某些样式如果想让它回归到初始值就可以使用 initial
,比如以下继承来的颜色就可以设置回初始值。
<nav class="navigation">
<p>三眼鸭</p>
<p class="initial">三眼牛牛</p>
</nav>
<style>
.navigation {
color: teal;
}
.initial {
color: initial;
}
</style>
$$demo
<nav class="navigation"> <p>三眼鸭</p> <p class="initial">三眼牛牛</p> </nav> <style> .navigation { color: teal; }
.initial {
color: initial;
}
</style>
$$
inherit
inherit
可以使本不继承的属性继承自父元素,实现一些特殊的效果。比如 a
元素的颜色和修饰线样式本身是不继承的,这里设置为 inherit
,直接可以设置父元素的颜色统一修改所有文本的颜色。
<nav class="navigation">
<h1>三眼鸭的编程教室</h1>
<a href="#">三眼鸭</a>
<a class="inherit" href="#">三眼牛</a>
<a class="inherit" href="#">三眼鸡</a>
</nav>
<style>
.navigation {
/* 修改这里的颜色就可以统一修改 */
color: teal;
}
.inherit {
color: inherit;
text-decoration: inherit;
}
</style>
$$demo
<nav class="navigation"> <h1>三眼鸭的编程教室</h1> <a href="#">三眼鸭</a> <a class="inherit" href="#">三眼牛</a> <a class="inherit" href="#">三眼鸡</a> </nav> <style> .navigation { /* 修改这里的颜色就可以统一修改 */ color: teal; }
.inherit {
color: inherit;
text-decoration: inherit;
}
</style>
$$
又比如 margin-left
默认是不可继承的,这里显式地将 .container
下的所有 div
的 margin-left
继承自父元素,实现了一种层叠的效果。
<div class="container">
<p>三眼鸭</p>
<div>
<p>三眼牛</p>
<p>三眼鸡</p>
<div>
<p>三眼猫</p>
<p>三眼狗</p>
</div>
</div>
</div>
<style>
.container {
margin-left: 2em;
}
.container div {
margin-left: inherit;
}
</style>
$$demo
<div class="container"> <p>三眼鸭</p> <div> <p>三眼牛</p> <p>三眼鸡</p> <div> <p>三眼猫</p> <p>三眼狗</p> </div> </div> </div> <style> .container { margin-left: 2em; }
.container div {
margin-left: inherit;
}
</style>
$$
unset
unset
通常用来清除当前定义的样式。
<nav class="navigation">
<p>三眼鸭</p>
<p class="name">三眼牛牛</p>
<p class="name unset">三眼猫猫</p>
</nav>
<style>
.navigation {
color: teal;
}
.name {
/* 你同事写的样式 */
/* 你觉得太丑了想清除掉 */
color: red;
font-size: 24px;
}
.unset {
/* 清除颜色、字体大小样式 */
/* 如果样式可以继承则继承自父元素 */
/* 否则设置为初始值 */
color: unset;
font-size: unset;
}
</style>
$$demo
<nav class="navigation"> <p>三眼鸭</p> <p class="name">三眼牛牛</p> <p class="name unset">三眼猫猫</p> </nav> <style> .navigation { color: teal; }
.name {
color: red;
font-size: 24px;
}
.unset {
color: unset;
font-size: unset;
}
</style>
$$