css语法规则屏幕自适应及条目应用优先权

1.

!important 提升指定样式条目的应用优先权。

div {
color: #f00 !important;
color: #000;
}
在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

 

2.可以让屏幕自适应的方法：

/* 样式代码导入 样式文件 */

第一种方式：

<link media="screen and (width:800px)" rel="stylesheet" href="style/css800.css">
<link media="screen and (width:1280px)" rel="stylesheet" href="style/css1280.css">
<link media="screen and (width:1440px)" rel="stylesheet" href="style/css1440.css">

第二种方式：

<style>

@import url(style/css800.css) screen and (min-width:800px);
@import url(style/css1280.css) screen and (min-width:1280px);
@import url(style/css1440.css) screen and (min-width:1440px);

</style>

如下为css800.css的代码

1 #container{

2     width:760px;

3     height:300px;

4     border:1px solid red;

5     background-color:red;

6 }

 

如下为css1280.css的代码

1 #container{

2     width:1004px;

3     height:300px;

4     border:1px solid red;

5     background-color:red;

6 }

如下为css1440.css的代码

1 #container{

2     width:1320px;

3     height:300px;

4     border:1px solid red;

5     background-color:red;

6 }

 

第三种方式：

 1 *{

 2         margin:0;

 3         border:0;

 4         padding:0;    

 5     }

 6     #container{

 7         width:1240px;

 8         height:300px;

 9         background-color:red;

10         margin:0 auto;

11     }

12     

13     /* 当屏幕的分辨率宽度小于等于1260px时，执行如下样式代码 */

14     @media (max-width:1260px) {

15         #container{

16             width:930px;

17             background-color:green;

18         }

19     }

20     

21     /* 当屏幕的分辨率宽度小于等于800px时，执行如下样式代码 */

22     @media (max-width:800px) {

23         #container{

24             width:760px;

25             background-color:blue;

26         }

27     }

28     

29     </style>