【web前端(八)】html_样式的层叠性、继承性和特殊性

最新推荐文章于 2022-08-21 09:32:43 发布

原创最新推荐文章于 2022-08-21 09:32:43 发布 · 219 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Java 专栏收录该内容

118 篇文章

订阅专栏

本文深入探讨CSS层叠样式表的基本概念，包括层叠性、背景标签、行内块标签、继承性、特殊性及权重计算原则。通过具体实例，讲解如何解决样式冲突，理解ID选择器、伪类选择器的优先级，以及如何利用这些特性进行网页布局设计。

<!DOCTYPE html>

<html>

<head>

<style>

/**

* 层叠性：

* 这里写了两个div块，

* 但是这个明显是冲突的。

* 那么，后面的块里对应的属性，

* 就会将前面块里面的属性覆盖掉。

div{height:100px;

width:100px;

background-color: #f00;

text-align:center;

* inline叫内联，

*即将块标签转换成行内标签。

display:inline;

}

div{

background-color:#008000;

}

/**

* 背景标签：

*（这里我们要注意的是，

* 不换行的标签叫行内标签。

* 换行的叫块标签。）

span{background-color: #0ff;

width:100px;

height:100px;

/*span不是块标签，

* 我们可以用下面的方式，

* 将其转换成块标签

display:block;}

/**

* 行内块标签：

* 可以改变块与块之间的间距，

* 或在期间做一些装饰，

* 但是并不换行。

a{background-color: #0f0;

color:black;

* 加none 就没有下划线了。

text-decoration:none;

width:100px;

height:100px;

* 对齐

text-align:center;

/*inline-block是行内块，这里不换行。*/

display:inline-block;

}

/**

*继承性；

*没有给标签设相对应的属性，

*那么，它就会默认继承body的里面定义的属性。

color: red;

display: block;

}

/**

* 特殊性：

* 衡量css值优先级的标准

* /

/*import权重：无穷大*/

* id选择器

#abc{

background-color: blue;

}

* 伪类选择器

.ttt{

background-color: red;

}

/*块标签权重:一级权重（0001）*/

body{

color:#00FF00;

}

/*普通标签权重：一级权重（0001）*/

ul{

color: #000000;

}

* 权重计算不进位，

* 即一级权重之间的加和，

* 怎么叠加也不会高于二级权重。

* 但是，不同等级权重之间可以相加，】

* 只是二级、三级对应的加和位置分别在十位和百位。

* 同等位权重叠加：0002

ul li{

color: #BA2BE2;

}

</style>

</head>

<body>

<!--

id选择器优先器权重：三级权重（0100）

-->

<!--

这里要注意style为行内样式属性，

其权重为四级权重（1000）

-->

<!--

伪类选择器权重；二级权重（0010）

因为ttt伪类的级别比body高，

所以执行的结果与前三个不同,

即块的颜色为红色。

-->

<span>dkdfst</span><br/>

<div>

<ul>

<li>zxcvb</li>

</ul>

</div>

<!--

继承性；

尽管p块里没有写红颜色，

但是p里面的字体颜色继承了b块的字体颜色。。

-->

<b>asdfg<p>dkdfst</p></b>

</body>

</html>