CSS全局关键字

简介: CSS全局关键字

css的全局关键字有下面几个:

  • inherit : 继承父级属性
  • initial:将元素初始化成css的初始值
  • unset:继承和初始化元素
  • revert:还原到浏览器内置样式
  • all:代指所有css属性

下面分别说说这几个关键字的实际作用


inherit 继承父级属性


inherit可以继承父级属性,可以将某个属性设置为inherit,那么该属性就会继承父级元素属性

<div class="father">父级容器
        <div class="children">子级容器</div>
    </div>
.father{
     color:red;
  }
.children{
     color: blue;  /*被父级覆盖*/
     color:inherit;  /*继承父级属性*/
}

按照执行顺序,color:blue会被覆盖,children下的inherit如果生效,则会继承父级的color属性,字体颜色会变为红色


initial 将元素初始化成css的初始值

<ul class="initial_ul">
    <li>initial部分</li>
    <li>疾风劲草</li>
    <li>东方不败</li>
    <li>西方求败</li>
</ul>
/* initial 将元素初始化成css的初始值 */
.initial_ul{
     font-size: 30px;
}
.initial_ul li:last-of-type{
     font-size: initial;
}

正常情况下,给ul设置字体大小为30px,那么li的字体大小也会继承为30px,这里设置最后一个li还原成css的初始值,下面是显示效果:


unset 关键字

unset关键字有两种情况,如果这个属性有从父级继承的值(这个属性默认可以继承,且父级有定义),则该属性为继承父级属性,如果这个属性没有从父级继承,那么这个属性会被重置为css初始属性。这里以dialog对话框举例,对话框有默认样式,这些样式我们是不想要的,可以使用all:unset进行批量重置。

<dialog open class="dialog_unset">unset对话框</dialog>

默认样式如下:

使用unset关键字重置

.dialog_unset{
       all : unset; /*重置初始属性*/
       /*这里写自定义的属性...*/
}

重置完后的效果:

其实unset就相当于inheritinitial的综合体,在有继承的情况下,类似于inherit;在无继承的情况下,类似于initial

unset可以应用于任何css属性。


revert还原到浏览器内置样式

其实revertinitial有点像,只不过initial == css初始属性,而 revert == 浏览器默认样式

<ul class="revert_ul">
    <li>让子弹飞</li>
    <li>楚门世界</li>
    <li>东方不败</li>
    <li>南辕北辙</li>
</ul>
/* revert关键字 */
.revert_ul{
      list-style-type: none;  /*取消li圆点*/
      list-style-type: revert; /*还原li为浏览器默认样式*/
}

正常情况下,这里设置了list-style-type: none之后,li的圆点应该被取消,但后面li被重置为浏览器默认样式,所以li的圆点会出现。


all 代指所有css属性

all的取值有四种:initialinheritunsetrevert

all属性为css全局关键字的其中之一,all代指当前代码块的所有属性。

需要注意:unicode-bididirection这两个属性不受all影响。

<div class="father_all">父级all
     <div class="children_all">子级all</div>
</div>
/* all关键字 */
.father_all{
     color: red;
     font-size: 30px;
}
.children_all{
     /*color : initial;*/  /*只还原color的初始属性*/
     all : initial; /*还原所有css属性为初始值*/
}

上述代码中,children_all继承了father_all所有属性,所以children_all的字体颜色为红色,字体大小为30px,但由于all : initial重置了children_all的所有属性,所以children_all的属性全部恢复成css的初始值。

上面的color : initial只能还原单个元素,而all为全部元素。

目录
相关文章
|
6月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
20天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
72 6
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)

热门文章

最新文章