CSS新手学习二(CSS创建和CSS执行顺序)

  • • 发表于 1年前
  • • 作者 茂茂
  • • 1352 次浏览
  • • 15 条评论
  • • 最后编辑时间 1年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

插入样式表的方法有三种:

  • 外部样式表

  • 内部样式表

  • 内联样式

外部样式表(推荐使用)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。<link> 标签在(文档的)头部。

<head>
    <link rel="stylesheet" type="text/css" href="maomao.css">
</head>

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

<head>
    <style>
        hr {color:#000;}
        p {margin-left:20px;}
        body {background-image:url("images/maomao.gif");}
    </style>
</head>

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

<p style="color:#000;margin-left:20px">跟茂茂研究CSS</p>

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般来说,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)
    因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:
    标签中的样式声明>内部样式表中的样式声明>外部样式表中的样式声明>浏览器中的样式声明(缺省值)。
    但是用!important可以改变优先级顺序,例:
    h1{
         color: #000!important;
         color: #fff;
    }
    h2{
         color: #000!important;
         color: #fff;
    }
    
    h1的样式表中浏览器会把h1的字体颜色设置为白色,因为CSS执行顺序是(同级)后来者居上
    h2的样式表中浏览器会把h2的字体颜色设置为黑色,因为!important把该样式的优先级设置为最大优先级,所以不管后面写多少都会优先读取该样式
    当!important声明冲突时,会按照CSS执行顺序执行:
    标签中的样式声明>内部样式表中的样式声明>外部样式表中的样式声明>浏览器中的样式声明(缺省值)

CSS权重计算规则

CSS2.1规范中定义了样式规则的计算方式,使用一个4位数字串来表示权重,每个选择器的权重决定了使用哪种样式,使用的规则有如下几种:

  • 元素的内联样式属性,加1,0,0,0
  • 每个id选择器,加0,1,0,0
  • 每个class选择器、属性选择器及伪类,加0,0,1,0
  • 每个元素及伪元素(如:first-child),加0,0,0,1
  • 全局选择器(*),加0,0,0,0
    h1 {color: #000;}  
      /* 只有一个普通元素加成,结果是 0,0,0,1 */ 
    body h1 {color: #222;}  
      /* 两个普通元素加成,结果是 0,0,0,2 */ 
      /*后者胜出*/
    h2.grape {color: #444;}  
      /* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/ 
    h2 {color: #666;}  
      /*一个普通元素,结果是 0,0,0,1 */ 
      /*前者胜出*/
    html > body table tr[id=”totals”] td ul > li {color: #888;}  
      /* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */ 
    li#answer {color: #123456;}  
      /* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */ 
      /*后者胜出*/
    

喜欢的小伙伴们就打赏下(嘿嘿)
上期回顾:CSS新手学习一(语法、注释、选择器)
下期内容:更新中
分享到:
评论区(共15条评论)
15条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:184 积分:10062

已加入社区[551]天

啦啦啦

作者详情》
Top