机制和原理——样式的值

值和单位

CSS中的值有以下几种类型:

  • 颜色值 颜色值的应用场合有:背景颜色,边框颜色,字体颜色等
  • 长度值 长度值的应用场合有:元素的大小,边框颜色,字体颜色等
  • 时间值
  • 角度值

颜色值——颜色取值

CSS中颜色取值主要由以下几种方法: CSS命名颜色。在CSS2.1中,CSS规范定义了17个颜色名。\ 用RGB指定颜色。可以使用0~255取值或者0%~100%。

长度值

长度值的单位有绝对单位和相对单位两种:

  • 绝对单位
    • in 英寸,
    • cm 厘米
    • mm 毫米
    • pt 磅,1pt等于1/72 英寸
    • pc 派卡,印刷术语
  • 相对单位
    • em 1em等于当前的字体尺寸。如果某元素以12pt显示,那2em的设定值就等同于24pt。em非常适合于需要对用户所使用字体大小进行自动适应的场合。
    • ex
    • px 像素
    • % 百分比

继承

继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

优先级

有的时候同一个元素同时被设置了多个不同的CSS样式代码,那最终是哪一个CSS样式有效呢?我们来看一下面的代码:

CSS: 
p {color:red;} 
.hudao {color:green;} 
#hello {color:yellow;} 

HTML: 
<p id= "hello" class="hudao">您好,这里是互道科技</p>

对<p>中的文本,有三个样式分别定义了三种不同的颜色,red(红色),green(绿色)和yellow(黄色),但文本会显示成yellow(黄色)。 这是因为CSS样式是有优先级的,按照CSS的优先级规则,通过ID指定的样式最终获得胜出。 下面对CSS样式优先级计算时的三大要素:权值,特殊性和层叠分别进行说明:

权值

CSS样式的优先级首先是通过权值来实现的,权值高的样式将被浏览器优先采用。 权值被分为以下四个等级:

  • 等级1 内联样式(如:style=””)属于第1等级,权值是1000。
  • 等级2 ID选择器(如:#id1)属于第2等级,权值为100。
  • 等级3 类,伪类和属性选择器(如:.cls1)属于第3等级,权值为10。
  • 等级4 元素和伪元素选择器(如:.div)属于第4等级,权值为1。

特殊性

通过!important关键字可以将样式的权值人为提升到最高级。

层叠

层叠就是同一个元素,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用。

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法与编程之美

前端|如何用HTML打印一个六边形

六边形在我们网页的制作中,运用得并不是特别广泛。但在一些制作精美,要求创新的一些网页上,我们还是不难看到六边形的身影,如下图1.1所示。用六边形组合的蜂窝状图形...

9720
来自专栏老码农的一亩三分地

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

3710
来自专栏全栈者

渲染树的形成原理你真的很懂吗?

看了上面的概念好像太“官方”,解释就是 DOM 是对 HTML 文档结构化的表述,后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引...

11730
来自专栏数据分析1480

Pandas中文官档~基础用法3

不管是为 pandas 对象应用自定义函数,还是应用其它第三方函数,都离不开以下三种方法。用哪种方法取决于操作的对象是 DataFrame 或 Series ,...

6230
来自专栏算法与编程之美

网页|CSS继承性

为了使我们的网页能够以更加有效的方式设置为网页格式,我们添加CSS,但我们不可能重复的添加相同的样式,这样太浪费时间,因此CSS增加了继承。继承是指包含在内部样...

5810
来自专栏前端之旅

《JavaScript 高级程序设计》阅读笔记 1:最佳实践

6510
来自专栏蚂蚁开源社区

前端开发,CSS3动画代码高频知识点

如上面的例子可知animation-name是可以任意名称。这个名称用关键帧来定义

6230
来自专栏DotNet程序园

造轮子了!NETCore跨平台UI框架,CPF

CPF(暂时命名)(Cross platform framework),模仿WPF的框架,支持NETCore的跨平台UI框架,暂时不够完善,只用于测试,暂时只支...

6310
来自专栏编程微刊

从零开始学习React-属性绑定(三)

前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

4220
来自专栏移动大前端

前端框架汇总

6010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励