CSS中的三种样式来源:创作人员、读者和用户代理

查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.html

CSS中的样式一共有三种来源:创作人员、读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正。

首先,创作人员(author’s+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式。

然后是用户代理样式(agent’s+style),用户代理也就是我们通常所说的浏览器(IE、Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我们可以方便的查看这些默认样式(比如Firefox中的Web+developer)

最后,也是最容易被我们忽略的,读者样式(reader’s+style)。所谓读者自然就是浏览网页的用户,有些时候这些用户里可能会有人不满意网页的配色,或者字体大小,这时候他们就是通过浏览器提供的接口为网站添加读者样式。

介绍完了来源,我们来说一下如何按权重和来源排序,根据《CSS权威指南》(第三版P79)中总结的权重排序:

1.+创作人员的样式+>+读者人员的样式+>+用户代理的默认样式

2.+标记为重要声明(!important)的读者样式+>+一切样式

有的朋友可能一开始不太明白第二条的意思,实际上这是CSS提供的一个很好的选择机制,也就是说,通常情况下,创作人员样式会拥有最大的权重,这也是作为开发人员最想要看到的,但是用户拥有最终的选择权,可以通过!important覆盖到任何想要覆盖的样式。

查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.html

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

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

相关文章

具有jOOQ和Java 8的CompletableFuture的异步SQL执行

响应式编程是一个新的流行词,它实际上仅表示异步编程或消息传递。 事实是,函数语法极大地帮助构建了异步执行链,今天,我们将看到如何使用jOOQ和新的CompletableFuture API在Java 8中做到这一点。 实际上,事情很简单&…

关于模板引擎handlebars.js基本用法

说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的基本用法,需要根据获取的数据去渲染…

create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题

使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下: {"plugins": [["module-resolver",{"alias": {"": "./src"}}]] }详情查看babel-plugin-module-resolver插件文…

使用Spring Security的多租户应用程序的无状态会话

从前, 我发表了一篇文章,解释了构建无状态会话的原理 。 巧合的是,我们再次针对多租户应用程序执行同一任务。 这次,我们将解决方案集成到Spring Security框架中,而不是自己构建身份验证机制。 本文将解释我们的方法和…

C# 退出提示 事件提示两次问题

private void frmCtiState_FormClosing(object sender, FormClosingEventArgs e) { if (e.CloseReason CloseReason.ApplicationExitCall) return; DialogResult result MessageBox.Show("是否退出系统?", "消息", MessageBoxB…

What?一个 Dubbo 服务启动要两个小时!

前言 前几天在测试环境碰到一个非常奇怪的与 dubbo 相关的问题,事后我在网上搜索了一圈并没有发现类似的帖子或文章,于是便有了这篇。 希望对还未碰到或正在碰到的朋友有所帮助。 现象 现象是这样的,有一天测试在测试环境重新部署一个 dubbo …

React hook 中的数据获取

相关说明: 对于hook相关词不翻译,感觉翻译后怪怪的。 effect hook 效果钩子,用于执行一些副作用例如获取数据 。 state hook 状态钩子。 使用----------- 和 ----------- 标出代码需要关注的地方。 渣翻译如下: 在这个指南中…

嵌入式Jetty和Apache CXF:借助Spring Security来保护REST服务

最近,我遇到了一个非常有趣的问题,我认为这只花了我几分钟就解决了:在Windows Server 2003中使用Spring Security (当前稳定版本3.2.5 )保护Apache CXF (当前版本3.0.1 )/ JAX-RS REST服务。在嵌…

我所知道的前端组件化与模块化

序言:组件化?模块化?这都是什么鬼?这是最初看到这2个新名词的反应。随着时间的推移,似乎、可能、大概明白了一点,于是想说说自己的理解(仅仅是自己的理解) 一、组件化 忘记什么时候看到这个词的了&#x…

关于通过反汇编查看dll的方法【转】(

关于通过反汇编查看dll的方法【转】( http://blog.sina.com.cn/s/blog_51a3c0380100f9md.html 今天想看一个dll的内容,苦于没有相关工具,从csdn上找到有这么段文字,收益匪浅啊,收藏! 可以通过反汇编来知道接口函数的参…

openocd安装与调试

环境&#xff1a; 硬件&#xff1a;PC机<------>ARM仿真器v8.00<------>已下载好bit流的Xinlinx SoC开发板&#xff08;其上有arm cortex-a9核&#xff09; 软件&#xff1a;Redhat Linux6&#xff08;或虚拟机&#xff09; openocd 使用openocd下载程序&#xff…

在React中获取数据

React初学者经常从不需要获取数据的应用开始。他们经常面临一个计数器&#xff0c;任务列表获取井字棋游戏应用。这是很好的&#xff0c;因为在开始学习React的时候&#xff0c;数据获取在你的应用中添加了另一层复杂度。 然而&#xff0c;有些时候你想要从自己的或者第三方AP…

使用Project Lombok减少Java应用程序中的样板代码

对Java编程语言最常提出的批评之一是它需要大量的样板代码 。 对于简单的类尤其如此&#xff0c;该类只需要存储一些值就可以。 您需要这些值的getter和setter&#xff0c;也许您还需要一个构造函数&#xff0c;覆盖equals&#xff08;&#xff09;和 hashcode&#xff08;&am…

DOM之城市二级联动

1、HTML内容 <select id"province"><option>请选择</option><option>山东省</option><option>吉林省</option><option>上海市</option></select><select id"city"><option>请选择…

跳转指令-JMP

page 60,132TITLE A0405Jump(EXE) JMP跳转指令.MODEL SMALL.STACK 64.DATAORG 100H ;规定程序的起始地址A10MAIN PROC NEARMOV AX,00MOV BX,00MOV CX,1A20: ADD AX,01ADD BX,AXSHL CX,1 ;左移一位JMP A20 ;跳转到A20A10MAIN endp jmp格式 [label:] jmp short/near/far/address…

java输出毫秒时间

SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS");// 输出字符串System.out.println(df.format(new Date()));转载于:https://www.cnblogs.com/longchang/p/11139947.html

Three.js制作360度全景图

这是个基于three.js的插件&#xff0c;预览地址&#xff1a;戳这里 使用方法&#xff1a; 1、这个插件的用法很简单&#xff0c;引入如下2个js <script src"js/three.min.js"></script><script src"js/photo-sphere-viewer.min.js">&l…

C++资源库不完全版本

http://www.360doc.com/content/10/0414/20/59141_23072568.shtml boost graph...转载于:https://www.cnblogs.com/seon/archive/2011/08/08/2131246.html

babel6和babel7中关于polyfill和preset-env和babel-plugin-transform-runtime等总结

记录自己零散的收获&#xff0c;随笔。 一些基础 babel的作用是转换JS新的特性代码为大部分浏览器能运行的代码。 babel转码又分为两部分&#xff0c;一个是语法转换&#xff0c;一个是API转换。 对于API的转换又分为两部分&#xff0c;一个是全局API例如Promise&#xff0c…

十六、CI框架之数据库操作get用法

一、使用数据库的Get方法读取内容&#xff0c;如下代码&#xff1a; 二、数据库如下&#xff1a; 二、效果如下&#xff1a; 转载于:https://www.cnblogs.com/tianpan2019/p/11141809.html