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覆盖到任何想要覆盖的样式。

原文地址:http://www.rays2010.com/blog/?p=2894

《转载》CSS中的三种样式来源:创作人员、读者和用户代理的更多相关文章

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

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

  2. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  3. CSS中的三种基本的定位机制(普通流、定位、浮动)

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  4. 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  5. 理解CSS中的三种选择器>+~

    1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F            相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...

  6. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  7. 转载Jquery中的三种$()

    1.$()可以是$(expresion),即css选择器.Xpath或html元素,也就是通过上述表达式来匹配目标元素. 比如:$("a")构造的这个对象,是用CSS选择器构建了一 ...

  8. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  9. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

随机推荐

  1. InvalidIndexNameException[Invalid index name [2Shard], must be lowercase]

    [2016-10-11 14:16:42,191][DEBUG][action.admin.indices.create] [Feron] [2Shard] f ailed to create [2S ...

  2. bzoj2038

    网上大片的莫队算法题解,先orz一下莫队什么不会莫队?没事我来篇低端的分块大法好啊,我们知道对于区间[l,r]答案是S/P P是一下子可以算出来的,S=∑(pj-1)*pj/2 pj表示区间内颜色为j ...

  3. 比较详细的利用虚拟机对SD卡FAT32+EXT4+Ext4分区图解教程

    如果大家嫌虚拟机复杂,我这里提供一个我没用虚拟机之前的分区方法:这个方法实际是可行的 我在没有用虚拟机之前,我是这样操作的1.首先在分区软件分好fat32+ext2+ext22.然后用recovery ...

  4. SQL重复记录处理(查找,过滤,删除)

    SQL重复记录处理(查找,过滤,删除)     ID int    Title nvarchar(50)    AddDate datetime    数据  www.2cto.com     ID ...

  5. poj 2451 Uyuw's Concert(半平面交)

    Uyuw's Concert Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8580   Accepted: 3227 De ...

  6. poj 2932 Coneology(扫描线+set)

    Coneology Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3574   Accepted: 680 Descript ...

  7. Shell编程之函数调用

    Shell中的函数调用的使用方法见我下面的代码示例: #!/bin/bash # value init ExP="adb shell /data/local/tmp/vpxdec --yv1 ...

  8. Joomla的在线视频播放插件:AllVideos

    一个很好的插件,只需要在文章中插入一条简单的语句就可以实现视频播放,视频可以位于网站服务器上或其他视频网站的. 例如:{f4v}ShaHua-H264{/f4v}   我在使用中只有一个地方觉得需要更 ...

  9. weblogic开发模式与生产模式介绍

    weblogic开发模式与生产模式介绍 开发模式:该模式启用自动部署 生产模式:该模式关闭自动部署 weblogic server 三种部署方法:自动部署.控制台部署.命令部署 自动部署:当其处于启用 ...

  10. 当可以设置src时,不必发ajax请求,如果没有参数设置src即可

    var params = (function(obj){ var string = []; for(var key in obj){ string.push(window.encodeURI(key) ...