【CSS in Depth2精译】1.1.1 样式表来源

您添加到网页的样式表并非浏览器呈现样式的唯一来源。样式表有三种不同的类型或来源。您添加到页面的样式称为 作者样式(author styles);此外还有 用户样式(user styles),即终端用户设置的自定义样式;以及 用户代理样式(user-agent styles),即浏览器默认样式。用户代理样式的优先级较低,因此会被您的样式所覆盖。而用户样式很少见,即便存在,其优先级也介于用户代理样式和作者样式之间。

注意

用户样式表只能在个别浏览器中定义,或者需要额外安装浏览器扩展程序。由于不常用且往往不受开发者控制,设计页面样式时通常不必担心用户样式表。

用户代理样式在不同浏览器之间略有不同,但通常执行的操作都相同:标题(<h1><h6>)和段落(<p>)会给定一个上、下外边距,列表(<ol><ul>)会给到一个左内边距,链接的颜色和默认字体大小也会被设置。

用户代理样式

再来看看示例页面(如图 1.4 所示),标题因为您设置的样式变成了无衬线(sans-serif)字体;其他的样式则交给了浏览器默认设置,比如:列表元素的左侧内边距;由 list-style-type 控制的列表项符号被设为了 disc(小黑点);链接设为蓝色并带下划线;标题和列表都给了上下外边距并且标题的字号还要大一些。

图 1.4 用户代理样式为网页标题设置默认值
图 1.4 用户代理样式为网页标题设置默认值

浏览器在应用了用户代理样式后才会应用您的样式,即作者样式表。这样您的样式声明才能覆盖用户代理的样式。对于 HTML 关联的多个样式表,其来源都一样,都来自作者样式表。

用户代理样式通常设置的都是用户普遍接受的通用样式,因此大多数情况下不会太突兀。这些默认样式还会在目前主流浏览器的近期版本中保持一致。如果不喜欢,大可在自己的样式表改成想要的效果。说干就干,下面对照图 1.5 将您不需要的默认样式直接覆盖掉:

图 1.5 作者样式因其具有更高的优先级而覆盖了用户代理样式

图 1.5 作者样式因其具有更高的优先级而覆盖了用户代理样式

以下代码已经删除了前面示例中存在冲突的字体系列,并添加了新的样式声明来设置颜色、覆盖用户代理的外边距、列表项的内边距以及圆点项目符号。编辑您的样式表来匹配这些变更吧。

代码清单 1.3 覆盖用户代理样式

h1 {color: #2f4f4f;margin-bottom: 10px;
}
#main-nav {/* 减少外边距 */margin-top: 10px;/* 删除列表的用户代理样式 */list-style: none;padding-left: 0;
}
#main-nav li {/* 让列表项水平排列,而非纵向堆叠 */display: inline-block;
}
#main-nav a {/* 为导航链接提供类似按钮的外观 */color: white;background-color: #13a4a4;padding: 5px;border-radius: 2px;text-decoration: none;
}

如果长期接触 CSS,您大概已经习惯了覆盖用户代理样式。这种做法本质上就是利用了层叠的样式表来源规则。正因为来源不同,您书写的作者样式始终会覆盖掉用户代理样式。

注意

您可能注意到了我在代码中用的是 ID 选择器,但应该避免这样用,原因稍后解释。

重要声明

样式表来源规则还有个例外情况:标记为 重要(important) 的声明。在样式声明的末尾、分号的前面加注 !important 字样,该样式就会被标记为重要声明:

color: red !important;

标记了 !important 的声明在来源上享有更高的优先级,因此会始终覆盖任一普通(非重要)来源的样式。汇总整理一下,各类样式可按优先级从大到小降序排列如下:

  1. 重要用户代理(Important user-agent)
  2. 重要用户(Important user)
  3. 重要作者(Important author)
  4. 普通作者(Normal author)
  5. 普通用户(Normal user)
  6. 普通用户代理(Normal user-agent)

上述列表中来源靠前的样式声明,其优先级始终高于靠后的声明。此外还应该注意到,标记为 重要 的几个来源,其优先级顺序刚好与普通来源是反的——到第 8 章讲层叠图层(cascade layers)时我们还会提到样式表来源这一概念。

注意

过渡(Transitions)和关键帧动画(keyframe animations)(后续章节会介绍)还会引入两个额外的样式表来源——这些动画效果为动态变更样式值创建了一套“虚拟”的层叠规则,需要单拎出来特殊对待,以确保样式的可预测性。

层叠规则在解决页面上每个元素、每个属性的样式冲突时,依旧可以保持样式间的独立性。举个例子,给某个段落设置一个加粗的字体,从用户代理样式设置的上下外边距仍然有效,不受字体加粗的影响。!important 注解是 CSS 中一个很奇葩(interesting quirk)的特性,稍后再加以解释。

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

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

相关文章

configure: error: library ‘crypto‘ is required for OpenSSL

1、执行命令&#xff1a;./configure --prefix/opt/app/postgresql --with-openssl 报错&#xff1a; 2、解决办法 执行命令&#xff1a;yum install openssl-devel 重新执行 ./configure --prefix/opt/app/postgresql --with-openssl

Ubuntu服务器的GitLab部署

AI应用开发相关目录 本专栏包括AI应用开发相关内容分享&#xff0c;包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧 适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…

充电学习—3、Uevent机制和其在android层的实现

sysfs 是 Linux userspace 和 kernel 进行交互的一个媒介。通过 sysfs&#xff0c;userspace 可以主动去读写 kernel 的一些数据&#xff0c;同样的&#xff0c; kernel 也可以主动将一些“变化”告知给 userspace。也就是说&#xff0c;通过sysfs&#xff0c;userspace 和 ker…

探索序列到序列模型:了解编码器和解码器架构的强大功能

目录 一、说明 二、什么是顺序数据&#xff1f; 三、编码器解码器架构的高级概述&#xff1a; 3.1 编码器和解码器架构的简要概述&#xff1a; 3.2 训练机制&#xff1a;编码器和解码器架构中的前向和后向传播&#xff1a; 四、编码器解码器架构的改进&#xff1a; 4.1.…

一道session文件包含题

目录 环境说明 session文件包含getshell 审计源码 session包含 base64在session中的解码分析 题目&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Q0BN08b8gWiVE4tOnirpTA?pwdcate 提取码&#xff1a;cate 环境说明 这里我用的是linux&#xff0c;也可以用p…

【论文阅读】-- DeepVisualInsight: 深度分类训练时空因果关系的时间旅行可视化

中文标题 摘要引言动机举例相关工作时间旅行可视化的属性符号定义邻居保护属性边界距离保持属性逆投影保持属性暂时保存属性 方法 δ \delta δ-边界估计(k)-BAVR综合体建设逆投影保持时间连续性 评估案例分析结论参考文献 摘要 了解深度学习模型的预测在训练过程中是如何形成…

[WTL/Win32]_[中级]_[MVP架构在实际项目中应用的地方]

场景 在开发Windows和macOS的界面软件时&#xff0c;Windows用的是WTL/Win32技术&#xff0c;而macOS用的是Cocoa技术。而两种技术的本地语言一个主打是C,另一个却是Object-c。界面软件的源码随着项目功能增多而增多&#xff0c;这就会给同步Windows和macOS的功能造成很大负担…

Linux-远程访问及控制

一、SSH远程管理 SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;主要用来实现字符界面的远程登录、远程复制等功能。SSH 协议对通信双方的数据传输进行了加密处理&#xff0c;其中包括用户登录时输入的用户口令。与早期的 Telent&#xff08;远程登录…

【Spine学习11】之 战士攻击动作 思路总结(手动调整贝塞尔曲线实现前快后慢)

拿到一份psd文件先观察检查一下图片顺序有没有问题&#xff0c; 重点看一下人物的腿部分层&#xff0c;&#xff08;如果是大小腿分开画的就网格可打可不打&#xff0c;如果是连在一起画的&#xff0c;那必须打网格&#xff09; 拿着剑的时候剑和手的层级有没有错位&#xff0c…

js下拉框选择筛选数据数据联动

在JavaScript中&#xff0c;可以通过事件监听和DOM操作来实现下拉框选择筛选数据的联动。 首先&#xff0c;在HTML中创建两个下拉框&#xff0c;分别为"select1"和"select2"&#xff1a; <select id"select1"><option value"opt…

Android SDK是什么?

在深入探讨Android SDK之前&#xff0c;我们首先需要明确其定义和重要性。Android SDK&#xff0c;全称Android Software Development Kit&#xff0c;是Android应用开发的核心工具集。它提供了一系列开发Android应用所需的工具、库和文档&#xff0c;使开发者能够利用这些资源…

P3391 【模板】文艺平衡树(@无旋Treap,* *)

【模板】文艺平衡树 - 洛谷 题目描述 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一个有序数列。 其中需要提供以下操作&#xff1a;翻转一个区间&#xff0c;例如原有序序列是 5 4 3 2 1&#xff0c;翻转区间是 [2,4] 的话&#xff0c;…

HCS-华为云Stack-容器网络

HCS-华为云Stack-容器网络 容器隧道overlay VPC网络

第〇篇:深入Docker的世界系列博客介绍

深入Docker的世界系列博客介绍 欢迎来到“深入Docker的世界”系列博客&#xff0c;这是一次旨在全面探索Docker容器化技术的冒险之旅。从基础原理到高级应用&#xff0c;再到实践案例分析&#xff0c;我们将深入挖掘Docker的每一个角落&#xff0c;帮助你不仅掌握这项技术的实…

Mariadb/MySQL挂了且重启失败

今天发现线上服务挂了&#xff0c;排查发现是MySQL服务停了且重启失败&#xff0c;排查日志&#xff1a; 1&#xff09;vim /var/log/mariadb/mariadb.log发现出现了Out of memory 240617 17:02:17 mysqld_safe mysqld from pid file /var/run/mariadb/mariadb.pid ended 240…

FreeRtos-09事件组的使用

1. 事件组的理论讲解 事件组:就是通过一个整数的bit位来代表一个事件,几个事件的or和and的结果是输出 #define configUSE_16_BIT_TICKS 0 //configUSE_16_BIT_TICKS用1表示16位,用0表示32位 1.1 事件组适用于哪些场景 某个事件若干个事件中的某个事件若干个事件中的所有事…

第10章 文件和异常

第10章 文件和异常 10.1 从文件中读取数据10.1.1 读取整个文件10.1.2 文件路径10.1.3 逐行读取10.1.4 创建一个包含文件各行内容的列表10.1.5 使用文件的内容10.1.6 包含一百万位的大型文件10.1.7 圆周率值中包含你的生日吗 10.2 写入文件10.2.1 写入文件10.2.2 写入多行10.2.3…

matplotlib`进行绘图时

当使用matplotlib进行绘图时&#xff0c;如果中文显示失败&#xff0c;通常是因为字体设置的问题。matplotlib默认使用的字体可能不包含中文字符集。为了解决这个问题&#xff0c;你可以尝试以下几个步骤&#xff1a; 设置字体属性&#xff1a; 在绘图代码中&#xff0c;你可以…

MyBatisPlus基础学习

一、简介 二、集成MP 三、入门HelloWorld 四、条件构造器EntityWrapper 五、ActiveRecord(活动记录 ) 六、代码生成器 七、插件扩展 八、自定义全局操作 九、公共字段自动填充 十、Oracle主键Sequence 十一、Idea快速开发插件 十二、mybatis-plus实践及架构原理

C#聊天室客户端完整③

窗体 进入聊天室界面(panel里面,label,textbox,button): 聊天界面(flowLayoutPanel(聊天面板))&#xff1a; 文档大纲(panel设置顶层(登录界面),聊天界面在底层) 步骤&#xff1a;设置进入聊天室→输入聊天→右边自己发送的消息→左边别人发的消息 MyClient.cs(进入聊天室类) …