web前端技能方法總結（css、js、jquery、html）（17）

1、可以用background-image屬性給任何元素添加背景圖像。如果同時設的也有背景顔色，那麼它是置于背景顔色之上的。背景圖像跟背景顔色一樣，隻出現在内容區和補白之下，沒有延伸到邊框之外的邊界。

background-image:url(images/background.gif); background-image屬性被設定成URL，可以是相對路徑或完整的URL（

http://...

）.注意URL沒有加引号

還有兩個屬性也能影響背景圖像：background-position和background-repeat.

預設的背景圖像是重複的。還好background-repeat屬性有no -repeat值。浏覽器預設的背景圖像的位置是元素的左上方（和屬性值設為top left效果一樣）。

background-position屬性用來設定圖像的位置，可以用像素、百分數或top，left，right，bottom，center這些關鍵字定義。

background-repeat屬性用來控制這種平鋪效果，預設的格式是repeat，意為把圖像設定為在水準和垂直方向上都重複。屬性值no-repeat表示圖像隻顯示一次，不重複；repeat-x表示圖像隻在水準方向上重複；

repeat-y表示圖像隻在垂直方向上重複；inherit表示繼承父元素的值。

2、邊框樣式（border-style）一共有8種，有實線、虛線、凸出線、凹進線等；邊框寬度（border-width）屬性用來控制邊框寬度。可以用關鍵詞（thin、medium、thick，但是浏覽器對它們的預設大小不一定總是相同）或像素來定義寬度；邊框顔色；也可隻定義邊框的一側，如上邊框：border-top-color/border-top-style/border-top-width。

怎麼讓邊框看起來像鋸齒呢？其實有個小竅門：用虛線邊框（dashed），把它設定為白色（跟頁面的背景顔色比對，假設頁面背景是白色）。

3、class和id

一般當你想應用一種樣式到多個元素的時候就用類。相反，如果你需要應用樣式的隻是一個元素并且頁面上隻有一個，就用id。嚴格來說，id屬性是命名唯一的元素的。

（1）p.specials{ color:red; } 這條規則隻選擇specials類中的段落。 .specials{ color:red; } 這條規則選擇specials類中的所有元素。

（2）#footer{ color:red; } 這條規則選擇id為“footer”的任意元素。 p#footer{ color:red; } 這條規則選擇一個id為“footer”的

元素。

類和id之間的唯一不同是id選擇符隻跟一個頁面中的一個元素比對。

4、使用多樣式表

在XHTML中你可以定義多個樣式表（用多個link标簽）。樣式表連結檔案的順序很重要！一個樣式表會覆寫在它之前連結的樣式表中的樣式。這些樣式表從上到下排列，最下面的樣式表優先權最高。

元素有一個叫做media的屬性，可以用來定義你的樣式檔案所需要的裝置類型。例如屬性值為screen适用于電腦螢幕，print适用于列印機類的媒體，handled适用于移動裝置和行動電話等。如果沒有提供媒體種類，樣式檔案就應該适用于所有裝置。并不是所有的浏覽器都支援media屬性。