码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-06 00:54:57      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/lsr111/p/4395066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!