機油

何謂CSS CSS是Cascading Style Sheets的簡稱，中文譯作『層級式體裁定義底稿』，實際上它是一組樣式。 你可能對CSS這個名詞比較陌生，實際上無論你用Internet Explorer還是Netscape Navigator在網上瀏覽， 幾乎隨時都在與CSS見面，在網路上沒有使用過CSS的網頁可能不好找。不管你用什麼工具製作網頁， 都有在無意間使用到CSS。善用CSS能使你的網頁更加簡煉，為什麼同樣內容的網頁， 有的人做出來有幾十KB，而高手做出來只有十幾KB？，CSS在其中的作用是不言而喻的。 我把我在使用CSS中的一些小經驗整理出來，供諸位參考。1、CSS在網頁中的三種用法 　　)當有多個網頁要用到的CSS，採用外連CSS檔案的方式，這樣網頁的原始碼可大大減少，修改起來非常方便。 　　)只在單個網頁中使用的CSS，採用HEAD方式。 　　)只有在一個網頁一、兩個地方才用到的CSS，採用行內插入方式。2、CSS的三種用法可在同個網頁中混用嗎？ 　　)三種用法可以混用，且不會造成混亂。這就是它為什麼稱為『層級式體裁定義底稿』的原因。 　　)瀏覽器在顯示網頁時是這樣處理的： 　　 1. 先檢查有沒有行內插入式CSS，有就執行了，針對本句的其它CSS就不去管它了 　　 2. 其次檢查HEAD方式的CSS，有就執行了 　　 3. 在前兩者都沒有的情況下再檢查外連檔案方式的CSS 　　 因此可看出，三種CSS的執行優先順序是：行內插入式、HEAD方式、外連檔案方式。 3、在Dreamweaver3中如何使外部檔案式CSS？  　　)在Dreamweaver3中使用外連檔案式CSS並沒有特殊要求，同樣是用記事本建立一個*.css檔案， 　　 在網頁的與之間加上這樣的原始碼： 就行了。 4、使用Dreamweaver3快速建立CSS檔案 　　)對於一個剛接觸CSS的網頁設計人員來講，要用記事本之類的編輯器，去建立一個CSS外連式檔案是相當困難的。 　　 由於Dreamweaver3對CSS支援的很好，用它來建立就輕鬆多了。 　　)可以這樣操作：  　　 1. 先在紙上寫好在網頁中可能要用到的格名稱，然後在Dreamweaver3的編輯視窗中呼叫CSS面板，一個一個的定義， 　　　　並在一個空白頁上適當的寫一點相關內容，邊定義邊試用，效果不滿意，立即修改  　　 2. 全部定義好後，再用記事本建立一個空的CSS外連式檔案，把在與之間的那段定義好的CSS複製到CSS檔案中去， 　　　　就大功告成了。整個過程就是用滑鼠完成，方便吧？ 5、在Dreamweaver3中採用行內插入式CSS要手動寫原始碼嗎？  　　)其實不用，先用CSS面板定義好要用的CSS，然後在要插入CSS的標記插入：style=""， 　　 再把你剛才定義的CSS從後面拖到這個雙引號中來，把大括號以外的部分刪去就行了。 6、關於檔案中的作用 　　)這東東的作用是為了不引起低版本瀏覽器的錯誤。如果某個執行此頁面的瀏覽器不支持CSS，它將忽略其中的內容。 　　 雖然現在使用不支持CSS瀏覽器的人已很少了，由於網路上幾乎什麼可能都會發生，所以還是留著為妙。 7、文字部分加上背景色 　　)給文字加上不同顏色，在Dreamweaver3中只要在屬性面板上選取文字的顏色就行了，非常方便， 　　 但要給部分文字加不同的背景色卻沒有相對應的功能，我們可以先做一個定義背景色的CSS， 　　 例如bgstyle，在Dreamweaver3中點幾下滑鼠就完成了。如一個定義淡黃色背景的CSS的範例如下： 　　 在要用時選取那段文字，再在CSS面板上點一下「bgstyle」就行了。 8、文字部分加上背景圖 　　)與加背景色操作類似，差異只是加入的改為背景圖而已，以下是定義好的範例：  　　 在要用時選取那段文字，再在CSS面板上點一下「imgbgstyle」就行了。 9、背景在滾動Scroll時仍靜止不動方法 　　)要使背景圖不隨視窗滾動可以採用以下方法︰ 10、定義文字間距 　　 )在Dreamweaver3中CSS的屬性定義對話框(Style Definition for .style1)的「Block」上的「letter spaceing」 　　　屬性定義的就是文字間距，它指的是每一個文字之間的額外間距，經長度為單位，正負值均可， 　　　當取負值時產生文字擠在一起的效果。下面原始碼是一個定義好的文字間距CSS範例：  11、文字加上框線、下框線、刪除線和閃爍  　　 )在Dreamweaver3中CSS的屬性定義對話框(Style Definition for .style1)的「Type」上的「decoration」 　　　屬性定義的就是這些內容，要注意的是閃爍屬性有些版本的瀏覽器不支援，少用較好。下面是範例：  　　　其中：「underline」是定義下框線「overline」是定義上框線「line-through」是定義刪除線「blink」是定義文字閃爍。 12、網頁使用『首行縮進』方法  　　 )由於Dreamweaver3輸入空格不方便，利用『首行縮進』將彌補這個不足。 　　　在Dreamweaver3中CSS的屬性定義對話框(Style Definition for .style1)的「Block」上的「text-indent」屬性定義的就是『首行縮進』， 　　　所謂「首行」是指每段內容的第一行，也就是直接按返回鍵就形成了一個新的段落。 　　　縮進最好以「em」(文字)為單位，例如：文字編排要求每段開始縮進兩個中文，CSS範例如下︰ 　　　在Dreamweaver3要注意：CSS的屬性定義對話框(Style Definition for .style1)的「Block」上的「text-indent」 　　　右面的縮進單位選擇框中「ems」指的就是「em」。 13、定義表格內容與表格框線距離 　　 )在Dreamweaver3中CSS的屬性定義對話框(Style Definition for .style1)的「Box」上的「margin」定義的就是內容與框線的距離， 　　　分別可定義四個方向：「top」「bottom」「left」「right」。下面就是定義在左邊距離「10px」的CSS範例：  14、定義某部分的內容加上邊框  　　 )在Dreamweaver3中CSS的屬性定義對話框(Style Definition for .style1)的「Border」定義的就是邊框線， 　　　「top」「bottom」「left」「right」四邊可分別定義線的粗細和顏色，這些定義好後不要忘記在下面的「Style」中定義線型， 　　　否則將看不邊框線，因為預設的線型是「none」。下面是一個定義了上邊框為：藍色細線，左邊框為：綠色中粗線的 .msgcontent .wsharing ul li { text-indent: 0; } 分享 Facebook Plurk YAHOO! .