CSS的特性与简便写法

2024-01-08 11:40:44

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8" />

? ? <title>CSS的三大特性</title>

? ? <style>

? ? ? ? /* 子级继承父级的 继承性*/

? ? ? ? body{

? ? ? ? ? ? font-size: 50px;

? ? ? ? ? ? color: red;

? ? ? ? }

? ? ? ? /* 层叠性 ?*/

? ? ? ? /* 前面的红色会被后面的蓝色覆盖,但大小和宽度都会生效 */

? ? ? ? .box1{

? ? ? ? ? ? color: red;

? ? ? ? ? ? font-weight: 800;

? ? ? ? }

? ? ? ? .box1{

? ? ? ? ? ? color: blue;

? ? ? ? ? ? font-size: 80px;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <!-- 1.继承性:子级默认继承父级的文字控制属性 -->

? ? <div>div标签</div>

? ? <p>p标签</p>

? ? <span>span标签</span>

? ? <!-- 子级自己有属性就不会继承父级的该属性 -->

? ? <a href="#">a标签</a>

? ? <!-- a标签自己默认是蓝色的,所以不会继承父级body的红色,

? ? ? ? 但a标签自己没有字体大小,所以会继承父级body的字体大小 -->

? ? <!-- 2.层叠性

? ? ? ? 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性

? ? ? ? 不同的属性会叠加:不同的CSS属性都生效

? ? -->

? ? <div class="box1">div1</div>

? ? <div class="box1">div2</div>

? ? <!-- /* 层叠性 ?*/

? ? ? ? /* 前面的红色会被后面的蓝色覆盖,但大小和加粗都会生效 */

? ? ? ? .box1{

? ? ? ? ? ? color: red;

? ? ? ? ? ? font-weight: 800;

? ? ? ? }

? ? ? ? .box1{

? ? ? ? ? ? color: blue;

? ? ? ? ? ? font-size: 80px;

? ? ? ? } -->

? ? ? ? <!-- 3.选择器的优先级

? ? ? ? 优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则

? ? ? ? 规则:选择器优先级高的样式生效

? ? ? ? 公式:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

? ? ? ? (选中的标签范围越大,优先级越低)

? ? ? ? !important:提权功能,提高权重/优先级到最高,慎用

? ? ? ? 写法:

? ? ? ? *{

? ? ? ? ? ? color:red !important;

? ? ? ? ?}

? ? ? ? -->

? ? ? ? <!-- 优先级 —— 权重计算规则

? ? ? ? 叠加计算:如果是复合选择器,则需要权重叠加计算

? ? ? ? 公式:每一级之间不存在进位

? ? ? ? (行内样式,id选择器个数,类选择器个数,标签选择器个数)

? ? ? ? 规则:

? ? ? ? 1.从左到右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较

? ? ? ? 2.!important 权重最高

? ? ? ? 3.继承 权重最低

? ? ? ? -->

? ? ? ? <!-- html与css的简便写法:Emmet写法:代码的简写方式,输入缩写VScode会自动生成对应的代码

? ? ? ? HTML:

? ? ? ? 类选择器:标签名.类名:<div class="box"></div>

? ? ? ? id选择器:标签名#id名:<div id="box"></div>

? ? ? ? 同级选择器:div+p:<div></div><p></p>

? ? ? ? 父子级选择器:div>P:

? ? ? ? <div>

? ? ? ? ? ? <p></p>

? ? ? ? </div>

? ? ? ? 多个相同标签:span*3:<span></span><span></span><span></span>

? ? ? ? 有内容的标签:div{内容}:<div>text</div> -->

? ? ? ?

</body>

</html>

文章来源:https://blog.csdn.net/m0_59745705/article/details/135396440
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。