提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

WebHTML前端 样式 层叠
2023-09-11 14:20:37 时间

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<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的里面定义的属性。

 */

b{

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>

 

<!--div块的权重：一级权重(0001)-->

<div>醒啦</div>

<div>醒啦</div>

 

 

<!--

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

        -->

        <!--

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

         其权重为四级权重（1000）

        -->

<div id="abc" style="background-color: #fff;">醒啦</div>

 

 

<!--

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

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

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

即块的颜色为红色。

 -->

<div class="ttt">醒啦</div>

 

 

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

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

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

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

 

 

<div>

<ul>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

<li>zxcvb</li>

</ul>

</div>

 

 

<a href="#">行内块</a>

<a href="#">行内块</a>

<a href="#">行内块</a>

<a href="#">行内块</a>

 

 

<!--

继承性；

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

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

-->

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

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

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

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

 

</body>

</html>

 

 

相关文章