保護眼睛，開啟瀏覽器的夜間模式 順便學下!important的作用

huidaoli發表於2013-07-30
瀏覽器模式Import
開啟筆記本程式，複製以下程式碼

 

*{background-image: none !important;
background: none !important;
background:#333333 !important;
color:#888888!important;
border-color:#555555 !important;
scrollbar-arrow-color:#CCCCCC !important;
scrollbar-base-color:#2266AA !important;
scrollbar-shadow-color:#2266AA !important;
scrollbar-face-color:#333333 !important;
scrollbar-highlight-color:#2266AA !important;
scrollbar-dark-shadow-color:#2266AA !important;
scrollbar-3d-light-color:#2266AA !important;
scrollbar-track-color:#333333 !important;}
a,a *{color:#88AADD !important;
text-decoration:none !important;}
a:visited,a:visited *,a:active,a:active *{color:#5588AA !important;}
a:hover,a:hover *{color:#AADD88 !important;
background:#666666 !important;}input,select,option,button,textarea{color:#AAAAAA !important;
background:#555555 !important;
border:#666666 !important;
border-color: #666666 #888888 #888888 #666666 !important;}input:focus,select:focus,option:focus,button:focus,textarea:focus,input:hover,
select:hover,option:hover,button:hover,textarea:hover {color:#BBBBBB !important;
background:#5A5A5A !important;
border-color: #777777 #999999 #999999 #777777 !important;}
input[type=button],input[type=submit],input[type=reset],input[type=image] {border-color: #888888 #666666 #666666 #888888 !important;}input[type=button]:focus,
input[type=submit]:focus,input[type=reset]:focus,input[type=image]:focus, input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=image]:hover {
color:#BBBBBB !important;
background:#666666 !important; 
border-color: #AAAAAA #888888 #888888 #AAAAAA !important;}

檔案→另存為 檔名輸入 黑色.css，儲存型別選擇“所有檔案”→儲存。
開啟internet選項，點選“輔助功能”，使用使用者樣式表→瀏覽剛才儲存的css檔案位置並選擇,點確定即可。

下面是操作過程：

有圖片為證哦。

步驟一：在瀏覽器中，找到“工具”->“Internet選項”

步驟二：在開啟的“Internet屬性”裡找到“輔助功能”按鈕點選進入。

步驟三：勾選使用者樣式表選項，點選“瀏覽“按鈕選擇你在電腦上儲存的上面程式碼（用文字文件儲存後記得要把檔案字尾.txt改為.css哦。）並點選確定按鈕就OK了。

看到了效果了吧。

說到這，順便把這裡面的關鍵技術教給大家，學學哦。

仔細的朋友們會發現上面的程式碼裡有很多！important，那麼你知道在css中!important的作用嗎？想知道的朋友請繼續往下看便是了。

{*rule !important}這個css規則當今在網頁製作的時候的普及已經非常流行了，以前我對它的理解就停留在‘瀏覽器是否識別階段’ 而沒有真正去研究過，可是現在發生了變化。眾所周知，!important這個規則對Ie6.0,Ie7.0和Firefox能寫hack，現在就來講解 這是什麼原理：

　　*對於Ie系列瀏覽器都能夠識別， firefox 瀏覽器則不能識別;

　　!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應用.

 

　　(1)區別ie與firefox的hack為:border:2px solid #f00;*border:1px solid #f00;

     (2)區別Ie6.0 與Ie7.0、firefox的hack為:border:1px solid #f00!important;border:2px solid #f00;

　　在(1)中，之所以把*放在後面是因為ff不識別*而導致只對它設定了一次border;而ie 系列進行了兩次border設定後，後一個屬性覆蓋了前一個屬性，故為一畫素的邊框。

　 　在(2)中，之所以把!important放在第一個border 設定，是因為它把這次border的優先順序提高了，即使後面在一次甚至在N次設定border 也無效，但是Ie6.0對這個規則不接受，而導致它應用了第二次的border 設定，也就是第二次覆蓋了第一次的這一原理， 並不是它不識別!important;所以它的border為2 畫素的紅框.

這是一個簡單的應用：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>無標題文件</title>
 5 <style type="text/css">
 6 div{
 7 width:800px;
 8 height:250px;
 9 background-color:yellow!important;/*提升指定樣式規則的應用優先權*/
10 background-color:red;
11 border:3px solid #000!important;/*firefox*/
12 *border:5px solid #f00!important;/*Ie7.0*/
13 border:1px solid #000;/*Ie6.0*/
14 }
15 </style>
16 </head>
17 
18 </html>
View Code

例一：

CSS

1  #Box {
2       color:red !important;
3       color:blue;
4 }
View Code

HTML

<div id="Box"> 在不同的瀏覽器下，這行字的色應該不同！</div>

這個例子應該是大家經常見到的important的用法了，在IE環境下，這行字是藍色，在firefox下，為紅色，其用法不再多說了，看下一個例子。

例二：
CSS

1  #Box div{
2      color:red;
3 }
4  important_false{
5      color:blue;
6 }
7 important_true{
8      color:blue !important;
9 }
View Code

HTML

1 <div id="Box">
2     <div class="important_false">這一行末使用important</div>
3     <div class="important_true">這一行使用了important</div>
4 </div>
View Code

例二中，CSS程式碼第一行設定了box裡面所有div中字型色為紅色，第二行和第三行都用class重新定義了自身div的字型色為藍色，不同的是，第二行末使用important，而第三行使用了！
　　預設情況下，class的優先順序小於id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！
　　但是，第三行中，用了important提升優先順序（或看成強制重定義），所以這裡的css得以生效，這行字變為了藍色！從這個例子，得以證明，ie對important的並不是不支援！
　　那麼為什麼很多人都說ie不認識它呢？我想應該是大家實戰中可能都沒有遇到例子中的情況： 當你想提升class的優先順序時怎麼辦？
　　也就是說大家可能都忽略了它的這一作用，只瞭解在命名為同一個元素的CSS程式碼塊中，用它來提升排列順序相對靠前的程式碼的優先順序（例一）！

　　通過上邊兩個例子，得以總結：

        important對 一個良好（或者是標準）的瀏覽器來說，不僅僅是從順序上提升程式碼的優先順序，還可以用來提升class的優先順序（比如firefox），但是從IE對前者的不支援可以看出，這只是IE的一大BUG，而不能說它“不認識、不支援”！

然而，不管怎麼樣，IE的這一大BUG幫助我們解決了很多相容性問題，這顯然不是件壞事！

        在IE中對盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之內（而不是加在寬度值上）。例如，你可能會使用以下css來指定某個容器的尺寸：

1 #box
2  　　{
3  　　　width:100px;
4  　　　border:5px;
5  　　　padding:20px;
6  　　}
View Code

然後在html中應用：盒的總寬度在幾乎所有瀏覽器中為150畫素（100畫素寬度+兩條5畫素的邊框+兩個20畫素的填充），唯獨在IE6之前版本的瀏覽器中仍然為100畫素（邊框值和填充值包含在寬度值中），使用盒模型的hack可以解決這一問題，

 1 #box 
 2 　　{ 
 3 　　　width:150px;　　　　　　  //這個是錯誤的width，所有瀏覽器都讀到了
 4 　　　voice-family: \}\; 　　　　 //IE5.X/win忽略了\}\後的內容
 5 　　　voice-family:inherit;
 6 　　　width:100px; 　　　　　　//包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的
 7 　　} 
 8        還有更簡單的辦法如下：
 9 　　CSS:
10 　　#box { width:150px; }
11 　　#box div { border:5px; padding:20px; }
12 　　HTML:
13 　　...
View Code

這樣一來在任何瀏覽器中盒的總寬度都將是150畫素。

　　但是即使是到了最新的IE6.0依然存在浮動模型（Float-model）的問題,值得慶幸（還是悲哀？）的是我們可以用IE中一直都不支援的!important來解決這個問題。
　　!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權(參見：W3.org的解釋)。語法格式{ sRule!important }，即寫在定義的最後面，

     例如：

box{color:red !important;}

假如我們定義一個這樣的樣式：

#box{background-color: #ffffff !important; background-color: #000000;}

那麼在支援該語法的瀏覽器，如Firefox、Opera中，能夠理解!important的優先順序，背景顯示#ffffff顏色，而在IE中則顯示#000000.

 

 

相關文章