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

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
  • 复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

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


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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

粒子群优化双向深度学习!PSO-BiTCN-BiGRU-Attention多输入单输出回归预测

粒子群优化双向深度学习!PSO-BiTCN-BiGRU-Attention多输入单输出回归预测 目录 粒子群优化双向深度学习!PSO-BiTCN-BiGRU-Attention多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现PSO-BiTCN-BiGRU-Attention粒子…

Unity引擎智能座舱解决方案

作为全球领先的 3D 引擎之一,Unity引擎为车载3D HMI提供全栈支持。即为从概念设计到量产部署的整个 HMI 工作流程提供创意咨询、性能调优、项目开发等解决方案,从而为车载信息娱乐系统和智能驾驶座舱打造令人惊叹的交互式体验。 专为中国车企打造的HMI引…

ctfshow(316,317,318)--XSS漏洞--反射性XSS

反射型XSS相关知识 Web316 进入界面: 审计 显示是关于反射性XSS的题目。 思路 首先想到利用XSS平台解题,看其他师傅的wp提示flag是在cookie中。 当前页面的cookie是flagyou%20are%20not%20admin%20no%20flag。 但是这里我使用XSS平台,…

python 爬虫 入门 六、Selenium

Selenium本来是一个自动测试工具,用于模拟用户对网站进行操作。在爬虫领域也有其用处。 一、下载安装Selenium及附属插件 pip install Selenium 安装完成后还需要安装一个浏览器驱动,来让python能启动浏览器。 如果是Edge或者其他基于Chromium的浏览器…

Linux环境基础和基础开发工具使用

文章目录 一、yum软件管理器1、包管理器2、yum3、apt4、安装源 二、编辑器vim1、各种模式2、打开时直接让光标定位到指定号3、!加命令字符 三、命令模式1、i 进入插入模式2、**Shift :** 进入底行模式3、光标定位4、ZZ(大写)保存并退出vim5、…

java设计——日历可视化

设计目标 设计的这个日历既可以捕捉当天的日期&#xff0c;并且使用红色圆圈圈起来以及实时具体时间&#xff0c;而且将月份和年份设计了下拉框&#xff0c;可以自行选择具体的月份年份&#xff0c;也可以通过<和>两个按键实现对月份的转变&#xff0c;同时年份和月份的…

校园官网练习---web

HTML&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>西安工商学院</title><…

【数据结构实战】从零开始打造你的专属链表

&#x1f3dd;️专栏&#xff1a;【数据结构实战篇】 &#x1f305;主页&#xff1a;f狐o狸x 目录 一、链表的概念及结构 二、链表的分类 2.1 单向的或双向的 2.2 带头的或不带头的 2.3 循环或非循环 三、链表的实现 3.1 打印和动态申请一个结点 3.2 尾插一个数 3.3 头插一个…

Axure PR 9 多级下拉选择器 设计交互

​ 大家好&#xff0c;我是大明同学。 Axure选择器是一种在交互设计中常用的组件&#xff0c;这期内容&#xff0c;我们来探讨Axure中多级下拉选择器设计与交互技巧。 下拉列表选择输入框元件 创建选择输入框所需的元件 1.在元件库中拖出一个矩形元件。 2.选中矩形元件&…

HiveSQL 中判断字段是否包含某个值的方法

HiveSQL 中判断字段是否包含某个值的方法 在 HiveSQL 中&#xff0c;有时我们需要判断一个字段是否包含某个特定的值。下面将介绍几种常用的方法来实现这个功能。 一、创建示例表并插入数据 首先&#xff0c;我们创建一个名为employee的表&#xff0c;并插入一些示例数据&am…

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…

jmeter常用配置元件介绍总结之jsr223执行python脚本

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之jsr223执行python脚本 1.安装jsr223执行python插件2.基础语法介绍2.1.log2.2.parameters向脚本传参与接参2.3.vars2.4.props2.5.prev 3.常用脚本3.1.MD5加密单个参数&#xff1a;3.2.MD5加密多个参数&#xff1a;3.3.URLe…

【数据结构】插入排序——直接插入排序 和 希尔排序

直接插入排序 和 希尔排序 一、直接插入排序二、直接插入排序的弊端三、希尔排序&#xff08;1&#xff09;对插入排序的联想&#xff08;2&#xff09;希尔排序的思路 四、直接插入排序和希尔排序效率对比1>随机生成10000个数2>我们随机生成100000个数3>我们随机生成…

基于Tkinter的深度学习图像处理界面开发(二)

现在很多搞算法的人&#xff0c;跑跑代码&#xff0c;比如训练和测试代码搞得飞溜&#xff0c;但想把算法代码打包成一个软件&#xff0c;比如给它包装一个界面&#xff0c;就不会了&#xff0c;有些人会推荐用qt做界面&#xff0c;但qt的上手难度还是比较高&#xff0c;如果我…

【设计模式】结构型模式(四):组合模式、享元模式

《设计模式之结构型模式》系列&#xff0c;共包含以下文章&#xff1a; 结构型模式&#xff08;一&#xff09;&#xff1a;适配器模式、装饰器模式结构型模式&#xff08;二&#xff09;&#xff1a;代理模式结构型模式&#xff08;三&#xff09;&#xff1a;桥接模式、外观…

Scala 中 set 的实战应用 :图书管理系统

1. 创建书籍集合 首先&#xff0c;我们创建一个可变的书籍集合&#xff0c;用于存储图书馆中的书籍信息。在Scala中&#xff0c;mutable.Set可以用来创建一个可变的集合。 val books mutable.Set("朝花惜拾", "活着") 2. 添加书籍 我们可以使用操作符…

Flink安装和Flink CDC实现数据同步

一&#xff0c;Flink 和Flink CDC 1&#xff0c; Flink Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。 中文文档 Apache Flink Documentation | Apache Flink 官方文档 &#xff1a;https://flink.apache.org Flink 中文社区…

有什么初学算法的书籍推荐?

对于初学算法的读者&#xff0c;以下是一些值得推荐的书籍&#xff1a; 1、算法超简单&#xff1a;趣味游戏带你轻松入门与实践 作者&#xff1a;童晶 著 推荐理由&#xff1a;本书把趣味游戏应用于算法教学&#xff0c;提升读者的学习兴趣&#xff0c;并通过可视化的图解和动…

【数据结构】堆和二叉树(2)

文章目录 前言一、建堆和堆排序1.堆排序 二、二叉树链式结构的实现1.二叉树的遍历 三、链式二叉树的功能函数1.二叉树结点个数2.二叉树叶子结点个数3.二叉树的高度4.二叉树第k层结点个数5. 二叉树查找值为x的结点6.二叉树销毁 总结 前言 接着上一篇博客&#xff0c;我们继续分…

Ubuntu24.04网络异常与应对方案记录

PS: 参加过408改卷的ZJU ghsongzju.edu.cn 开启嘲讽: 你们知道408有多简单吗&#xff0c;操作系统真实水平自己知道就行&#xff5e;&#xff5e; Requested credits of master in UWSC30&#xff0c;in ZJU24&#xff0c;domestic master is too simple dmesg dmesg 是一个用…