自動目錄
網頁設計中常會用到CSS,他的一般格式是這樣的:
而其中的 style2 就是一個 css 的class,他的表示法大概長這樣:
如果一個網頁物件同時有兩個以上的style,則寫成這樣,中間用空白分隔。
假設以上的例子中,style2, style3, style4 有相同的屬性的話,會以最後一個style4 去覆蓋。例如
.style2 { color:#111111; }
.style3 { color:#333333; }
.style4 { color:#666666; }
則最後的結果會是 color=#666666 這是因為屬性覆寫的關係。
像上例的表示法中是可以偷懶一下,可以用三個值代表。例如
color:#666 = color:#666666;
color:#987 = color:#998877;
另外當兩個以上的 class 有相同的屬性時,可以用逗點 ',' 分隔,例如下例要 a 的兩種屬性都一樣顏色的話,可以寫在同一行。
如果省略那個逗點而用空白代替的話,就是階層的意思,例如:
代表在 frame class 下的 box class 下的 pic class 的屬性為 border:1px solid #666,他的html 可能長這個樣子:
<div class="frame">
<div class="box">
<div class="pic">
.... 網頁的文字內容 ....
</div>
</div>
</div>
使用圖片當背景
接下來說個我以前搞不清楚的地方,就是 css中的 url表示法,以下面的範例開始:
例如設定背景使用圖片
這裡的url 中的路徑../pro/clothes/infor/line1.gif 是個相對路徑;要清楚,這個是相對於你這個 css 檔案的路徑,不是相對於你的網頁檔的路徑。
舉例來說,例如你的檔案是 /index.html ,其中用下面這個方法把 css 載入:
所以圖檔的實際位置是 /image/pro/clothes/infor/line1.gif
假設url 用絕對路徑,就是路徑以 '/' 開始,他就是參考網站的絕對路徑,不是參考 css 檔案的路徑。
CSS的註解
css中註解的寫法,雖然這個很基本,但是常常會忘:
^ 要留一空白 ^
如上,要注意的是,註解的內文一定要和註解的邊界留一個空白,否則有些瀏覽器會出錯。
延伸閱讀
原文 2009-11-29 21:34:17
你可能感興趣的文章
[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖
如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...
CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,
[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。
產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。
[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?
隨機好文
[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?
[Win7] 燒錄 iso 檔 在Windows7 中內建燒錄程式,可以直接把檔案拉到光碟機裡,再執行燒錄。
世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...
[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。
[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔
