Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • Css优先级的原理

    post by onelong / 2010-10-14 5:00 Thursday [html+css]

    废话不多说,首先看看下面的代码吧

    //demo.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <style type="text/css">

    div{

             background:#0C0;

    }

    </style>

    </head>

     

    <body>

             <div style=" background:#F00">This is a demo! </div>

    </body>

    </html>

    下面是css文件的内容:

    // style.css

    div{

             background:#999;

    }

    以上通过三种方式定义div的背景颜色,那最后是显示那个样式呢?

    当然是内嵌的“background:#F00”啦,那为什么是这样呢?

    其实浏览器是按从上到下的顺序来解释代码,遇到相同的样式或者js变量时,后者会覆盖前者的,也就是说内嵌的样式是最后覆盖head里定义的样式。还有我们必须了解的是,head里的内容是预加载的,所以样式定义在css文件时可以提供访问速度,改善用户体验的。

    我改一改代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <style type="text/css">

    div{

             background:#0C0;

    }

    </style>

    </head>

     

    <body>

             <div>This is a demo! </div>

    </body>

    </html>

    看看以上代码,想一想运行后div的背景到底是哪一个样式?

    再看看再修改的代码,同样想一想最后显示的效果!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    div{

             background:#0C0;

    }

    </style>

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

    </head>

     

    <body>

             <div>This is a demo! </div>

    </body>

    </html>

    具体的结果我就不说了,因为我说了,大家一定不记得的,快去实践然后好好总结!

    引用地址:
     

    我要评论