前端基础学习-了解CSS3的all属性

一、兼容性
如下图:

兼容性还行, 除了IE不支持,其他浏览器基本上都绿油油,目前自娱自乐,内网项目什么的都是可以用用的。

二、all是干嘛用的

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。

为什么会有这个CSS属性呢?

我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!

我们CSS reset输入框的时候,是不是有类似这样的代码(实际可能是具体值,作用类似):

input, textarea {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

因为这类输入控件自身有内置的大小和字体,需要重置。

此时,大家就会发现,这些属性值都是inherit, 要是可以合并就好了!

CSS all属性就是用来合并的。

input, textarea {
   all: inherit;
}

这里仅仅是展示作用,实际上是不会这么用的,因为,all:inherit会让背景色什么的,都继承父级,相信这不是你希望看到的。

三、语法和区别

语法如下:

all: initial;
all: inherit;
all: unset;

/* CSS4特性,无视之 */
all: revert;

默认的HTML和CSS是这样的,一个传统的标签内容,有标题有列表:

<article>
    <h6>标题</h6>
    <p>p变文字</p>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <textarea>文本域</textarea>
</article>
article {
    background-color: #f0f3f9;
    color: green;
}
article > textarea {
    border: 1px solid #34538b;
    background-color: #ffffe0;
    color: red;
}

如你所见:

颜色,间距,以及文本域状态都是我们认为的样子显示。

现在,点击demo的下拉,选择对应的all属性值,实现下面CSS效果:

.initial > * {
    all: initial;
}
.inherit > * {
    all: inherit;
}
.unset > * {
    all: unset;
}

结果:

initial是初始值的意思,也就是,article元素下面所有的第一级子元素都除了unicode-bidi和direction以外的CSS都使用初始值。

例如,<h6>, <p>元素浏览器内置的display:block直接拜拜了,都变成了inline元素,因此在一行显示:

font-size也使用了浏览器软件本身设置的大小16px,color颜色也变成了浏览器软件本身的黑色。例如,在浏览器设置中改变字号,从中变成大:

会看到显示的文字内容也变大了:

由于我们只是对相邻层级子元素进行了initial设置,因此,<li>元素不受影响,但是,由于在父元素不明的情况下,<li>元素的默认是打点,因此,这里从数字变成了点,list-style-type和list-style-position都变化了。

inherit是继承的意思,也就是,article元素下面所有的相邻子元素都除了unicode-bidi和direction以外的CSS都继承了<article>元素的CSS。

因此,<h6>, <p>元素还是块状的,background-color都是<article>元素的背景色,color颜色也跟<article>一样,是绿色(文本域的红色被干掉了)。

不仅上面这些CSS,padding/margin也都继承了,只是默认是0, 看不出来,我们稍微修改下,例如给<article>元素来个margin值:

结果,那些子元素都开花了:

unset

unset是取消设置的意思,也就是,article元素下面所有的相邻子元素除了unicode-bidi和direction以外的CSS都干掉都不要,不要了那用什么呢?unset值的特性如下,当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color, 则使用继承值;如果是没有继承特性的CSS属性,如background-color, 则使用初始值。

因此,<h6>, <p>元素的display属性值使用了initial初始值,因此变成了inline元素,两个同一行显示了;而这些元素的color颜色使用了inherit继承值,因此都是绿色,<textarea>的背景色background-color不具有继承特性,因此使用的是initial初始值,也就是transparent透明,因此,就是截图所示效果。

原文地址:https://blog.51cto.com/14284898/2381514

时间: 2024-10-31 16:47:40

前端基础学习-了解CSS3的all属性的相关文章

HTML&CSS基础学习笔记2-Html的全局属性

HTML元素都有属性,下面的这些全局属性是所有的HTML元素都可以使用的. 常见的有: HTML元素也有一些本身自己独特的属性,我们以后的笔记中有机会,会再为大家介绍哦. 下面是代码测验,更多体验学习,可前往码芽网哦http://www.mayacoder.com/lesson/index HTML&CSS基础学习笔记2-Html的全局属性

前端基础学习分享

用a标签制作一个按钮为主线,然后围绕这个按钮,做一些效果样式等操作.附件中可以下载CSS参考手册. 一.工具 工欲善其事必先利其器.我们首先需要准备好调试工具,这里我就简单介绍几种,firefox.chrome以及IE. 1.firefox 我们用到的是firebug,非常好用,工具->附加组件.这里有一篇firebug教程. 安装好后按F12就可以直接调试了: 2.chrome chrome的调试工具默认就是自带的,也是按F12就可以出来,但这个调试工具还带了个手机的模拟器,可以用来调试手机页

前端基础学习--CSS3创建简单的网页动画 – 实现弹跳球动

基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px * 100px,背景色为橘×××. CSS 代码: body { display: flex; /* 使用Flex布局 */ justify-content: center; /* 水平居中 */ } .ball { width: 100px;

前端基础之html5\css3

由于前段时间的颓废所以断更了,学习也搁浅了好长时间,两个月吧,经过两个月的时间考虑,我还是决定学习自己专业的内容,找一份自己专业相关的工作,因为跨行真的太难了,毕竟需要花大量的时间和精力去,我刚毕业,养活自己才是重中之重,其他的以后再说吧.前端学习这次是我的第三次启动学习计划,这次计划跟以往的不一样.本次计划我打算闭关一个月,全身心的去学习,一切都放在脑后.为了这次计划我已经把朋友圈都关闭了,抖音卸载,因为之前我每天都花很多时间去看这些内容,直接导致我的时间白白浪费掉,而且学习效率大大折扣.这次

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

前端基础学习一

一.html学习 web通信的本质就是浏览器作为客户端发送请求,服务端通过socket对象接受请求并相应的过程 例子: #!/usr/bin/python # --*-- coding:utf-8 --*-- import socket def main():     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)     sock.bind(('127.0.0.1', 8081))     sock.listen(5)     

Bigger-Mai 养成计划,前端基础学习之HTML

HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: 写Html文件(充当模板的作用)@@@@ 数据库获取数据,然后替换到html文件的指定位置(web框架) 3.本地测试 找到文件路径,直接浏览器打开 pycharm打开测试 4.编写Html文件 doctype对应关系 html标签,标签内部可以写属性 注释:  <!-- 注释的内容 --> 20个标签 原文地址:https://www.cnblogs.com/mm-jj/p/10283700.html

前端基础学习-css实现波浪线及立方体

这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html <div class="card-list"> <div class="wave-container"> <div class="wave"></div> <!-- 实现波浪线的div --> <div cla

前端基础学习-CSS表头固定

纯CSS实现表头固定之所以难,主要在两点.一是占有最大市场份额的IE6不支持position:fixed.另一个,是人们想破头都想在一起表格中实现这种效果.不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks--我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了.碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了. 我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗.因此前些狂热鼓吹D