1. CSS的三大特性

这篇具有很好参考价值的文章主要介绍了1. CSS的三大特性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS有三个非常重要的三个特性:层叠性、继承性、优先级

4.1层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突
的问题
层叠性原则:
●样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
●样式不冲突,不会层叠
如下图,上面一个color:red;会被覆盖,但font-size:18px;不会
1. CSS的三大特性

4.2继承性

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。
简单理解就是:子承父业
1. CSS的三大特性
●恰当地使用继承可以简化代码,降低CSS样式的复杂性
●元素可以继承父元素的样式( text- , font- , line这些元素开头的可以继承,以及color属性),
但高度和内外边距等不能继承

行高的继承性

body {
font: 12px/ 1.5 Microsoft YaHei ;
}

●行高可以跟单位也可以不跟单位
●如果子元素没有设置行高,则会继承父元素的行高为1.5
●此时子元素的行高是:当前子元素的文字大小* 1.5
●body行高1.5这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高

4.3优先级

(1)当同一个元素指定多个选择器,就会有优先级的产生。
●选择器相同,则执行层叠性
●选择器不同 ,则根据选择器权重执行
选择器权重如下表:
1. CSS的三大特性

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .test {
            color: red;
        }
        /* id选择器 */
        #exp {
            color: blueviolet;
        }
        /* 元素选择器 */
        div {
            /* !important 权重最高 */
            color: pink!important;
        }
    </style>
</head>
<body>
    <div class="test" id="exp" style="color: dodgerblue;">你笑起来真好看</div>
</body>
</html>

结果为粉色:
1. CSS的三大特性

(2)优先级注意点:
1.权重由4组数字组成,但是不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推…
3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。
4.简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!important无穷大.
5.继承的权重是0 ,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
6.a链接浏览器默认定制了一个样式:蓝色 有下划线
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父亲的权重为 100 */
        #f {
            color: pink;
        }
        /* p继承的权重为 0 */
        /* 所有以后我们看标签到底执行哪个样式就看它有没有被直接选中 */
        p {
            color: blueviolet;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认定制了一个样式:蓝色 有下划线 */
    </style>
</head>
<body>
    <div id="f">
        <p>你很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>

1. CSS的三大特性

(3)权重叠加:
如果是复合选择器,则会有权重叠加,需要计算权重。
●div ul li ------ > 0,0,0,3
●.nav ul li------>0,0,1,2
●a:hover------ > 0,0,1,1
●.nav a------ > 0,0,1,1
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* ul li 的权重是 0,0,0,1 + 0,0,0,1 =0,0,0,2    2 */
        ul li {
            color: green;
        }
        /* li 的权重是0,0,0,1     1*/
        li {
            color: red;
        }
        /* .na li 的权重是 0,0,1,0 + 0,0,0,1 =0,0,1,1    11*/
        .nav li {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
</body>
</html>

结果显示为紫色文章来源地址https://www.toymoban.com/news/detail-489581.html

到了这里,关于1. CSS的三大特性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css2的三大特性

    例子

    2024年02月19日
    浏览(35)
  • 21.2 CSS 三大特性与页面布局

    2.1 层叠性 2.2 继承性 2.3 优先级 3.1 div页面布局 3.2 span局部更改样式 3.3 结构错误 4.1 块级元素 4.2 行内元素 4.3 行内块级元素 5.1 块级元素转行内元素 5.2 行级元素转块级元素 5.3 转为行内块级标签

    2024年02月11日
    浏览(37)
  • CSS_三大特性下_优先级

    CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) 1特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式 2优先级公式: 继承通配符选择器标签选择器类选择器id选择器行内样式!important 3注意点:

    2024年02月08日
    浏览(60)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)
  • CSS(层叠样式表)

    目录 一、CSS是什么? 二、基本语法规范 三、引入方式  3.1、内部样式表  3.2、行内样式表  3.3、外部样式  四、样式格式  五、选择器  选择器功能  选择器的种类  基础选择器  标签选择器  类选择器  id 选择器  通配符选择器  基础选择器小结  复合选择器  后代选择

    2024年02月15日
    浏览(47)
  • 优化CSS重置过程:探索CSS层叠技术的应用与优势

    目录 下面是正文~~ CSS重置方法 方法的结合 合并方法的问题 通用移除样式 顺序很重要 CSS 优先级 我们的CSS特异性冲突 CSS Layers 来拯救 Sass 预处理器支持 浏览器支持 总结 这篇文章介绍了一种名为 CSS 层叠的技术,用于优化CSS重置过程。它解释了 CSS 重置的概念,即通过删除浏

    2024年02月16日
    浏览(42)
  • 【css】z-index与层叠上下文

    z-index属性用来设置元素的堆叠顺序,使用z-index有一个大的前提:z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个,否则z-index无效。 层叠上下文 MDN讲解 我们给元素设置的z-index都是有一定规则的,层叠性都是在它有定位的父元素起作

    2024年02月09日
    浏览(36)
  • 【软考:网工】协议篇(非常重要)

    还是来自summer老师的,B站可以搜“summer”课堂,看相关视频哦~ 协议分类 (1)以太网:一般用于局域网 以太网帧结构: (2)帧中继:一种广域网技术 例题:下列分组父换网络中,米用的交换技术与其他3个不同的是( )网。 A.IP B.X.25 C.帧中继 D.ATM (3)HDLC (1)ipv4 TTL经过一

    2024年02月08日
    浏览(29)
  • 私域流量分发渠道的三个重要选择原则

    私域流量在当今的营销领域扮演着至关重要的角色。与传统的广告推广相比,私域流量更加注重与用户的关系建立和维护,通过精细化的营销策略实现更高的转化率和用户忠诚度。在选择私域流量分发渠道时,有三个重要的选择原则需要考虑。 首先,用户活跃度是选择渠道的

    2024年02月12日
    浏览(42)
  • kafka 02——三个重要的kafka客户端

    请参考下面的文章: Kafka 01——Kafka的安装及简单入门使用. AdminClient API: 允许管理和检测Topic、Broker以及其他Kafka对象。 Producer API: 发布消息到一个或多个API。 Consumer API: 订阅一个或多个Topic,并处理产生的消息。 如下: 完整的pom 关于配置,可参考官网: https://kafka.apa

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包