善用css縮寫規則

一、  善用css縮寫規則
/*注意上、右、下、左的書寫順序*/
1.      關於邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px    （省略的左等於右）
1px 2px        (省略的上等於下)
1px            （四邊都相同）
2.      簡化所有：
*/ body{margin:0}------------表示網頁內所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0
3.      縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4.      關於文字的縮寫規則：
Font-style:italic;  斜體形式
Font-variant:small-caps/normal;  變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開寫。
5.      關於背景圖片的：
Background:#FFF url(log.gif) no-repeat fixed top left;
6.      關於列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif)
二、 運用4種方法來引入CSS樣式
    1.link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
rel 關係
type 資料類型,有多種
href 路徑
部分瀏覽器支援候選樣式,關鍵字:alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
2.內部樣式塊
<style>
<!–
h1{color:red;}
–>
</style>
3.@import
@import url{a.css}
注意:此指令必須放在<style>容器中,並且在所有樣式之前
建議放在一個html注釋中,<!– –>瀏覽器會不顯示注釋內的內容,而import等css代碼能正常工作
4.內聯樣式
<p style=”color:red;”>
選取器是css的一個基本概念，基本規則如下：
1.規則結構：
h1 {color:red;}
選取器 {屬性:值;}
這類是元素選取器，基本可以包括所有html的元素
屬性值可以包括多個元素，如：border：1px solid red;
常用文法
1)分組：
選取器和聲明都可以分組:
h1,h2,h3{color:red;background:#fff;} ,選取器用“,”分割開,屬性用”;”分割
2)類別選取器,即通過class=”stylename”應用的聲明
定義:
.stylename{color:red;}
注意:
在html中可以使用多類選擇:如class=”cn1 cn2 cn3″
3)ID選取器,即與id屬性對應的樣式
定義:
#a{color:red;} ->這個定義對用id=”a”的元素
2.這部分都是我們常見的css文法，下面談一下我們不常見的選取器文法
1)父子結構,跟文件引導模式對應
如p span{border:1px solid red;}對應的是<p>下面的<li>標籤,這個很用用途,可以準確定位.
一些特殊應用(IE7支援):
(1) p > span{},匹配所有p下所有的span
(2) p + span{} ,匹配緊接著p元素後出現的第一個span標籤,2者要有相同的父標籤
2)屬性選取器:(注意:屬性選取器ie7才開始支援,以下版本並不支援,其他的瀏覽器基本可以)
文法:img[alt]{border:1px solid;}
表示對應有alt屬性的img標籤,當然可以支援多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標籤,也可以與具體值對應:如:img[alt=”攝影”]{};
屬性選取器中的進階應用程式,特殊匹配:
(1)img[class~=”b”],    ~= : 與屬性中的一個值對應的,即與<img class=”a b c”>對應
(2)[class^=”a”],以a開頭的
(3)[class$=”a”],以a結束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等於a或以a開頭的
3)偽類和虛擬元素
日常使用中主要是<a>標籤的幾個偽類:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標籤獲得焦點時背景變紅
以上文法組合使用,就能實現定位準確、簡單間接的樣式了。