详细介绍CSS样式权值

内联样式表(inline style)>内部样式表(internal style sheet)>外部样式表(external style sheet)

例外:但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;

1,内联样式表权值为1000;

2,ID选择器的权值为100;

3,Class类选择器的权值为10;

立即学习“前端免费学习笔记(深入)”;

4,HTML标签选择器的权值为1;

具体代码如下:

        CSS样式权值            body{               font-size: 20px;               font-weight: 900;            }           h3{               color: yellow;           }           #redP p{               /*权值100+1=101*/               color: #f00;               /*红色*/           }           #redP p.red em{               /*权值100+1+10+1=112*/               color: #00f;               /*蓝色*/           }           #redP .red em{               /*权值100+10+1=111*/               color: #0ff;               /*亮蓝色*/           }           #redP p span em{               /*权值100+1+1+1=103*/               color: #ff0;               /*黄色*/           }               

例外:外部样式表>内部样式表

emred

red

以上这篇浅谈CSS样式权值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多详细介绍CSS样式权值相关文章请关注PHP中文网!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1607627.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 20:57:04
下一篇 2025年12月23日 20:57:13

相关推荐

  • CSS样式覆盖规则的详细介绍

    大家都知道css的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”。样式覆盖(这种叫法更大众化些)遵循一定的规则,之前我对这个规则一直似懂非懂的,…

    好文分享 2025年12月23日
    000
  • CSS实现三角效果的实例详解

    方法一:使用border来设置边框,元素有高度和宽度 .triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-colo…

    2025年12月23日
    000
  • CSS之关于clearfix清除浮动方法

    一,什么是.clearfix 你只要到Google或者Baidu随便一搜”css清除浮动”,就会发现很多网站都讲到”盒子清除内部浮动时可以用到.clearfix”。 .clearfix:after { content: ” “; display: bl…

    好文分享 2025年12月23日
    000
  • css常用属性之颜色和单位

    在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚。 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般常用英文颜色名或者十六进制颜色值来设置颜色,但是css中还有一些其他较为复杂的写法。 RGB颜色 计…

    好文分享 2025年12月23日
    000
  • css盒子边框样式介绍

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: css边框样式 #p1{ background: yellowgreen; border:4px dotted rebeccapurple; border-radius: 20px; …

    好文分享 2025年12月23日
    000
  • css文本样式及控制文本的大小写方法

    常用文本样式如下: text文本样式 h3{ /*text-indent:首行缩进*/ text-indent: -2em; padding-left:2em; /*text-shadow:必需。水平阴影的位置。允许负值。 必需。垂直阴影的位置。允许负值。 可选。模糊距离 可选。阴影颜色*/ tex…

    好文分享 2025年12月23日
    000
  • CSS重要属性之 margin 属性知识大合集介绍

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄。所以写成以下文章,一是供自己整理思路;二是把知识分享出来,避免各位对margin属性的误解。内容可能会有点多,但都是精华,希望大家耐心学习。 以下的分享会分为如下内容: 1.margin 属性的简单介…

    2025年12月23日 好文分享
    000
  • css 常用样式详细介绍

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:’宋体’,’黑体’,’Arial’; } font-size 设置字体大小 length 用长度值指定文字大小,不允许负值 立即学习“前端免费学习笔记(深入)”;…

    好文分享 2025年12月23日
    000
  • css核心基础的总结

    今日这篇是整合前面的css补充知识的。 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下。 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。 层叠可以简单地理解为冲突的解决方案。 立即学习“前端免费学习笔记(深入)”; 什么是冲突? 就是同个元素在使用不同的选…

    好文分享 2025年12月23日
    000
  • 最全的CSS hack方式一览(兼容多浏览器)

    为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方…

    2025年12月23日
    000
  • 浅谈css处理水平居中

    下面小编就为大家带来一篇浅谈css处理水平居中的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦 1、水平居中设置-行内元素 通过父元素设置 1 text-align:center; ,让父元素的内容居中 2、水平居中设置-定宽块状元素 块状元素的…

    好文分享 2025年12月23日
    000
  • 浅谈css和@import区别及用法详解

    下面小编就为大家带来一篇浅谈css和@import区别及用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法。 一、用法 (1)link: 立即学习“前端免费学习笔记(深入)”; (2)@import: 方法一(html中…

    好文分享 2025年12月23日
    000
  • 剖析CSS Position定位

           当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们。   一旦你更深入…

    2025年12月23日
    000
  • CSS的技巧

    有些经典的css技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的css技巧: 1、在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就…

    好文分享 2025年12月23日
    000
  • css中px、em和rem的区别

    前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。 em 和 rem 的相同点 使用 em 和 r…

    好文分享 2025年12月23日
    000
  • rem — 低调的css单位

    rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么? rem(font size of the root element)是指相对于…

    2025年12月23日 好文分享
    000
  • 用CSS实现带箭头的流程进度条

    本文介绍的是利用纯css的带箭头流程进度条,兼容到ie8,需要的朋友们下面来一起学习学习。 首先写出一个基本的样式。 .cssNav li{ padding: 0px 20px; line-height: 40px; background: #50abe4; display: inline-bloc…

    2025年12月23日 好文分享
    000
  • CSS与HTML使用误区

    误区一.多p症  Home About Concact 上述使用使用多余的p标签现状,就称为“多p症”,理应简化成下 Home About Concact误区二.多类class症  注意点class可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目 立即学习“前端免费学习笔记(深入)”…

    2025年12月23日
    000
  • CSS属性transparent实现各种三角形示例

    效果图如下 示例代码 *{ margin: 0; padding: 0; } .box{ margin: 40px auto; width: 60px; background-color: #f0ac6b; } .t1{ margin: 40px auto; width: 0px; height: …

    2025年12月23日
    000
  • CSS实现书签效果实例

    这篇文章通过纯css代码写了个书签效果,实现后的书签效果很漂亮,文中给出了完整的示例代码,实现的代码也很简单,很方便大家理解和学习,有需要的朋友们可以参考学习,下面来一起学习学习吧。 实现的效果图如下: 示例代码如下: border制作书签(图形) .p2:before { /*做一个书签效果*/ …

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信