理解css属性的继承和覆盖
首先,我们梳理一下哪些属性会被继承
文本
- color 颜色,a元素除外
- direction 方向
- font 字体
- font-family 字体系列
- font-style 字体风格
- font-size 字体大小
- font-weight 字体粗细
- letter-spacing 字母间距
- line-height 行高
- text-align 对齐方式
- text-indent 首行缩进量
- text-transform 大小写修改
- visibility 可见性
- white-space 指定如何处理表格
- word-spacing 字符间距
列表
- list-style 列表样式
- list-style-image 列表指定样式图片
- list-style-position 列表标记的位置
- list-style-type 列表标记的样式
表格
- border-collapse 控制单元格内边距是否存在
- border-spacing 指定表格边距之间的空隙大小
- caption-siede 指定表格标题的位置
- empty-cells 指定是否显示i表格中的空单元格
页面设置
- orphans 指定当元素内部发生分页时在页面底部需要保留的最小行数
- page-break-inside 设置元素内部的分页形式
- windows 设置当元素内部发生分页是在页面顶部需要保留的最少行数
其他
- cursor 鼠标指针
- quotes 指定引号样式
然后我们讨论一下,当规则发生冲突时:如何处理‘层叠’问题
先考虑选择器优先级
- 标签选择器1
- 类选择器10
- id选择器100
- 复合选择器以最后的部分为主
再寻找是否存在'! important'
如果为了避免其他属性的覆盖和影响,可以声明一条特殊的规则来覆盖一切,具体方法是这样的:如 p{ color:orange !important;}这样 这个属性将凌驾于一切而在页面上显示出来。
理解css属性的继承和覆盖的更多相关文章
- css中属性值继承小解
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
随机推荐
- Mysql列属性
列属性又称之为字段属性在mysql中一共有6个属性:null,默认值(default),列描述(comment),主键(primary key),唯一键(unique key)和自动增长 修改数据库字 ...
- 前端日期时间处理建议使用Momen
使用方法 下载: http://momentjs.cn/downloads/moment.js 多语言版本:http://momentjs.cn/downloads/moment-with-local ...
- 虚拟化KVM之优化(三)
KVM的优化 1.1 cpu的优化 inter的cpu的运行级别,(Ring2和Ring1暂时没什么用)Ring3为用户态,Ring0为内核态 Ring3的用户态是没有权限管理硬件的,需要切换到内核态 ...
- 使用IBM Blockchain Platform extension开发你的第一个fabric智能合约
文章目录 安装IBM Blockchain Platform extension for VS Code 创建一个智能合约项目 理解智能合约 打包智能合约 Local Fabric Ops 安装智能合 ...
- js 实现对象的混合与克隆效果,带完整版解析代码[helpers.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 对象混合 ...
- 浅析 JS 中的作用域链
作用域链的形成 在 JS 中每个函数都有自己的执行环境,而每个执行环境都有一个与之对应的变量对象.例如: var a = 2 function fn () { var a = 1 console.lo ...
- Red 编程语言 2019 开发计划:全速前进!
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> Red 编程语言开发团队昨日发布了一篇 "Full steam ahead" 的文章,对其 2 ...
- Nginx重写请求后将url?后的参数去除
2019独角兽企业重金招聘Python工程师标准>>> 使用?结尾 注意,关键点就在于"?"这个尾缀.重定向的目标地址结尾处如果加了?号,则不会再转发传递 ...
- spring security learning(spring in action)
1.使用Spring Security配置命名空间 spring securtiy 提供了安全性相关的命名空间,我们可以将spring security的命名空间声明添加到spring公用的配置xml ...
- 图论--最小环--Floyd模板
#include <iostream> #include <algorithm> #include <cstdio> #include <cstring> ...