CSS的三大特性
时间:2019-11-04
本文章向大家介绍CSS的三大特性,主要包括CSS的三大特性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CSS的三大特性
层叠性
- 相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突样式。层叠性主要解决样式冲突问题
- 层叠性原则
- 样式冲突,遵循的原则是就近原则,哪个样式里结构近,就执行那个样式
- 样式不冲突,不会层叠
继承性
- CSS中的继承性:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
body{ font:12px/1.5 Microsoft YaHei; }
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高1.5
- 此时子元素的行高:当前子元素的文字大小*1.5
- body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
当给同一个元素指定多个选择器,就会有优先级的产生
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
选择器 选择器权重 继承 或者* 0,0,0,0 元素选择器 0,0,0,1 类选择器。伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式 1,0,0,0 !important 重要的 无穷大
优先级注意点:
- 权重是有4组数字组成,但是不会有进位
- 类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推
- 从左到右依次比较,相同则比较下一位
- 继承的权重为0
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重
- div ul li ——>0,0,0,3
- .nav ul li ——>0,0,1,2
- a:hover——>0,0,1,1
- .nav a——>0,0,1,1
原文地址:https://www.cnblogs.com/SSPOFA/p/11795248.html
- ACM竞赛之输入输出(以C与C++为例)
- 能让程序做的事情坚决不用人来做——批量修复markdownlint MD034警告
- swift demo1 tableview
- Swift Alamofire
- 给Ocelot做一个Docker 镜像
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十)
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](九)
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](八)
- 第二届ZCTF逆向题分析(一)
- 渗透测试时,需要注意浏览器选项
- 渗透测试时,需要注意浏览器选项
- 码云 Android apk 在线构建功能上线啦
- addslashes防注入的绕过案例(AFSRC获奖白帽子情痴)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例