CSS教程(三)- CSS 三大特性

news2024/11/13 10:45:36

1. 层叠性

  • 介绍

    • 多组CSS样式共同作用于一个元素,就会出现 覆盖(层叠) 另一个冲突的样式。
  • 层叠原则

    • 样式冲突:遵循就近原则(哪个样式离结构近,就执行哪个样式)

    • 样式不冲突,就不会重叠

      在这里插入图片描述

  • 示例
    在这里插入图片描述

2. 继承性

  • 后代元素可以继承祖先元素中的某些样式(子承父业),如文本颜色和字号。

    • 例 : 大部分的文本属性都可以被继承
  • 说明

    • 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
    • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
  • 拓展

    • 行高的继承

      • 如果子元素没有设置行高,则会继承父元素的行高为 1.5,此时子元素的行高是:当前子元素的文字大小 * 1.5

      在这里插入图片描述

  • 示例
    在这里插入图片描述

3. 优先级

  • 优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。

    • 行内样式的优先级最高。
    • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
    • 浏览器默认样式和继承样式优先级较低

  • 总结

    • 页面中的所有样式将按照以下规则 “层叠” 为新的 “虚拟” 样式表,其中第一优先级最高:

      1. 行内样式(在 HTML 元素中)
      2. 外部和内部样式表(在 head 部分)
      3. 浏览器默认样式
    • 行内样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认样式。

4. 选择器的优先级

  • 使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

    选择器权重
    继承 或 *0
    标签选择器1
    (伪)类选择器10
    id选择器100
    行内样式1000
  • 复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

  • 群组选择器权重以每个选择器单独的权重为准,不进行相加计算


  • 示例
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237799.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CyclicBarrier使用详解及遇到的坑

上一篇文章讲的是关于是使用CountDownLatch实现生成年底报告遇到的问题,这个计数器和CyclicBarrier也有类似功能,但是应用场景不同。 一、应用场景 CountDownLatch: 有ABCD四个任务,ABC是并行执行,等ABC三个任务都执行完…

Java-I/O框架14:Properties集合及使用

视频链接:16.32 Properties使用(2)_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Tz4y1X7H7?spm_id_from333.788.player.switch&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p32 1.Properties集合 特性: 存储…

Windows下mysql数据库备份策略

Windows下mysql的增量备份和全量备份,并利用schtasks设置定时任务执行bat脚本。 一、备份要求 序号 备份类型 备份频次 备份时间 1 增量备份 每周一-每周六各一次 18:00:00 2 全量备份 每周日一次 18:00:00 二、备份方法 2.1增量备份 2.1.1准备工作…

架构师备考-概念背诵(软件工程)

软件工程 软件开发生命周期: 软件定义时期:包括可行性研究和详细需求分析过程,任务是确定软件开发工程必须完成的总目标,具体可分成问题定义、可行性研究、需求分析等。软件开发时期:就是软件的设计与实现,可分成概要设计、详细设计、编码、测试等。软件运行和维护:就是…

【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销

一、Linux 概述 1. 应用领域 服务器领域 linux在服务器领域是最强的,因为它免费、开源、稳定。 嵌入式领域 它的内核最小可以达到几百KB, 可根据需求对软件剪裁,近些年在嵌入式领域得到了很大的应用。 主要应用:机顶盒、数字电视、网络…

【Java项目】基于SpringBoot的【生鲜交易系统】

技术简介: 系统软件架构选择B/S模式、java技术和MySQL数据库等,总体功能模块运用自顶向下的分层思想。 系统简介: 考虑到实际生活中在生鲜交易方面的需要以及对该系统认真的分析,将系统权限按管理员,用户这两类涉及用户划分。 (…

AI Weekly『11月4-10日』: Anthropic发布Claude 3.5 Haiku,腾讯开源混元-Large模型!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,专注于分享AI全维度知识,包括但不限于AI科普,AI工…

贪心算法day3(最长递增序列问题)

目录 1.最长递增三元子序列 2.最长连续递增序列 1.最长递增三元子序列 题目链接:. - 力扣(LeetCode) 思路:我们只需要设置两个数进行比较就好。设a为nums[0],b 为一个无穷大的数,只要有比a小的数字就赋值…

vue实现图片无限滚动播放

本人vue新手菜鸡,文章为自己在项目中遇到问题的记录,如有不足还请大佬指正 文章目录 实现效果代码展示总结 因为刚接触vue,本想着看看能不能用一些element的组件实现图片的轮播效果,尝试使用过element-UI里的走马灯Carouse&#x…

[ 内网渗透实战篇-2 ] 父域子域架构的搭建与安装域环境判断域控定位组策略域森林架构配置信任关系

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

Follow软件的使用入门教程

开篇 看到很多兄弟还不知道怎么用这个当下爆火的浏览器!在这里简单给需要入门的小伙伴一些建议: 介绍 简单解释一下,RSS 意思是简易信息聚合,用户可以通过 RSS 阅读器或聚合工具自主订阅并浏览各个平台的内容源,不用…

esp32学习:用虫洞ESP32开发板,快速实现无线图传

我们的虫洞ESP32-S3-EYE开发板,能够完美运行esp who AI代码,所以实现无线图传那是非常容易的,我们先看看esp who代码库中examples目录: 里面有比较多的web例程,在这些例程下,稍作修改,就可以快速…

最新三维视觉下的扩散模型综述——Diffusion Models in 3D Vision: A Survey

目录 摘要 一、引言 二、扩散模型简介 A.扩散模型的介绍 B.扩散模型的数学基础 C.扩散模型的变体 D.三维视觉中的生成过程 三、三维视觉基础 A.三维表示 B.三维视觉中的深度学习方法 C.3D视觉中的挑战 四、三维扩散生成任务 A.无条件生成 B.图像到三维 C.文本到…

JavaSE:运算符 (学习笔记)

目录 一,算术运算符 【1】 共同点: 【2】 不同点: 二,关系运算符 三,逻辑运算符 2,&和&&的区别和联系 { |和||的区别和联系 }---两题类似 四,赋值运算符 五,拓展…

strtok函数详解

strtok函数 strtok 函数是一个字符串分割函数,用于将字符串分割成一系列的标记。这个函数通过一组分隔符字符来确定标记的边界,每次调用都会返回字符串中的下一个标记,并且将原始字符串中的分隔符替换为空字符‘\0’,从而实际上是…

题目练习之二叉树那些事儿(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…

【入门篇】确定字符串是否包含唯一字符——多语言版本

题目跳转:确定字符串是否包含唯一字符 题目解析 这个问题要求我们判断一个字符串中的字符是否唯一(忽略字母的大小写),并输出相应的结果。如果字符串中所有的字符都是唯一的,输出 YES;否则,输…

ConcurrentModificationException:检测到并发修改完美解决方法

🚦 ConcurrentModificationException:检测到并发修改完美解决方法 💡 🚦 ConcurrentModificationException:检测到并发修改完美解决方法 💡摘要1. 什么是ConcurrentModificationException?&…

并查集 How many tables(hdu 1213) How many answers are wrong(hdu 3038)

目录 前言 并查集 并查集的初始化 并查集的合并 并查集合并的优化,路径压缩 How many tables(hdu 1213) 问题描述 输入 输出 问题分析 代码 带权并查集 How many answers are wrong(hdu 3038) 问题描述 输入 输出 问题分析 代码 前言 感觉并查集总共有两个应…

JavaScript day01 笔记

一、引入方式 JavaScript 程序不能独立运行&#xff0c;它需要被嵌入 HTML 中&#xff0c;然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中 1️⃣内部 通过 script 标签包裹 JavaScript 代码&#xff08;一般就写在</script>的…