There are times where you need to reset a an element’s styles. Instead of overwriting it with even more style declarations, you can simply reset them.

/* Styles go here */

body {
color: #d200ff;
} button {
color: white;
font-size: 14px;
background: lightgreen;
text-align: center;
border: none;
padding: 10px 20px;
} section {
font-size: 16px;
}
section button {
color: unset; /*since section doesn't have color set, will use body color*/
font-size: unset; /*use section font-size*/
}

[CSS] Easily Reset Styles With a Single CSS value的更多相关文章

  1. [转载]CSS Tools: Reset CSS

    http://meyerweb.com/eric/tools/css/reset/ The goal of a reset stylesheet is to reduce browser incons ...

  2. Normalize.css 与 reset.css

    Normalize.css 与 reset.css都是初始化页面样式 不同点在于 reset.css更加粗暴,直接把所有的样式全部初始化了: Normalize.css还剩点良心,还保留了一些浏览器默 ...

  3. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. 深入理解CSS系列(一):理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  7. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  8. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  9. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

随机推荐

  1. AIX中经常使用的SMIT 的使用

    AIX中经常使用的SMIT 的使用 1.  smit 的日志文件 (1)$HOME/smit.log      记录了所訪问的全部菜单.对话内容,所运行的命令和输出结果 在 SMIT 会话中出现的全部 ...

  2. values-dimen 不同分辨率资源实现引用

    今天遇到了一种情况,就是在不同分辨率下面出现了需要设定不同的距离,当时第一反映就是重新定义一个layout.但是,仅仅为了更改一个数值就复制那么多的代码,明显不合里.后来就想到干脆在不同的分辨率下创建 ...

  3. Spring中的AOP注解方式和XML方式

    应掌握内容:1. AOP的全名2. AOP的实现原理[静态代理和动态代理]3. 注解方式的配置4. 通知类型     A. 每种通知的特点和使用方式    B. 获取各种数据,方便日后操作5. 执行表 ...

  4. jQuery UI:邮箱自动补全函数

    $('#email').autocomplete({ delay:0, autoFocus:true, source:function(request,response){ var hosts = [ ...

  5. scroolspy滚动监听插件

    <nav id="nav" class="navbar navbar-default"> <a href="#" clas ...

  6. c#的中英文混合字符串截取 public static string SubString(string inputString, int byteLength)

    /// <summary>        /// c#的中英文混合字符串截取(区分中英文)        /// </summary>        /// <param ...

  7. echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

    项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化. 先附代码: formatter: function(params) { var result = '' params. ...

  8. $routeParams 实现路由指定参数

    [摘要]后台管理系统权限控制到按钮级别,将每一个资源的key绑定在url中,渲染页面的时候去根据key来获取当前页面的按钮列表. router.js angular.module("app. ...

  9. 一、Docker安装

    原文:一.Docker安装 如果没有特殊要求关闭selinux!关闭selinux!关闭selinux!重要事情说三遍.这个坑活活让我重装了3.4遍系统才发现问题 本系列基于Centos系统安装,包括 ...

  10. 洛谷——P1056 排座椅

    https://www.luogu.org/problem/show?pid=1056#sub 题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主 ...