专栏首页菜鸟计划CSS基础语法(三) CSS的6种特性

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性)

1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元格元素td和类c1可以使用相同样式:

 p,td,.c1{font-size:12pt;font-family:黑体;color:red}

2.样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承。(但注意有一些css样式是不具有继承性的。如border:1px solid red;)

继承时会一直向上找,如果在父级找到了就继承父的样式,如果父级没找到会去祖级去找,找到后会继承祖级的样式。

div{color:red;}   <span>标签会继承<div>标签的样式

<div>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</div>

3.样式表的关联性:

样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。

 div>span{font-size:12pt;font-family:黑体;color:red}

4.样式的权值性:

p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

5.层叠性:

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

p{color:red;}

p{color:green;}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

6.重要性:

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

p{color:red!important;}

p{color:green;}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自己简写一个redux(redux源码简写)

    柴小智
  • css渲染(一) 字体

    一、字体属性 1.默认字体系列   chrome/opera:"宋体"   firefox:"微软雅黑"   safari/IE:Times,"宋体" 2.字体...

    柴小智
  • CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元...

    柴小智
  • CSS继承特殊

    继承 CSS的某些样式具有继承性。 继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代    如:在p中的所有字体都为红色     ...

    用户1624346
  • Using XPaths in Message Assignment[转]

    Microsoft BizTalk Server 2004 Using XPaths in Message Assignment You can use the...

    阿新
  • css抖动特效

    用户4344670
  • jQuery第十四篇 属性和属性节点

    用户7873631
  • 考考你的电机知识基本功

    前段时间因线上培训课程需要,出了十道有关电机基础知识的题目,作为一个小游戏让宝宝们玩了一把。这十道题看似简单,但却能大概考察出宝宝们对电机知识的...

    标准答案
  • Pentaho图表开发指南

    注:1、设置每种图时注意该图表的特性(合理装载指标和维度)2,设置维度时可在查询语句中利用连接查询该维度名(即类型名)

    ZhangXianSheng
  • CSS 3.0实现会发光加载中特效

    越陌度阡

扫码关注云+社区

领取腾讯云代金券