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 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

2336
来自专栏搞前端的李蚊子

使用canvas实现一个圆球的触壁反弹

HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

2895
来自专栏Linux驱动

31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient

1223
来自专栏柠檬先生

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形, 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在htm...

2229
来自专栏封碎

Android画图之Matrix(一) 博客分类: Android AndroidBlog

Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。

912
来自专栏进击的君君的前端之路

CSS理解之border

1663
来自专栏糊一笑

CSS Grid 新手入门

另外,下面一段话摘自A Complete Guide to Grid,对于CSS Grid会有更加清楚地释义

1806
来自专栏河湾欢儿的专栏

文本

font-size 文字大小 font-weight 文字加粗(bold加粗/normal正常) font-style 文字倾斜(italic倾斜/norm...

1023
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(五)transform

transform 字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:移动 translate,缩放scale,旋转rotate,翻转...

1342
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

2012

扫码关注云+社区

领取腾讯云代金券