2007年1月10日 星期三

CSS 標準語法大整理

█ 事前準備:




 


  文章用色說明:紅字:語法的指令 綠字:指令的參數 紫字:語法註解


  昨天將CSS「邊框」的語法整理好之後(已經放在▍留言區域大動工(含表單設計) [ Version 2.0 ]這篇教學裡面 ),今天想一想,乾脆來將CSS的標準語法作一次的整理好囉!也方便大家以後查詢指令方便。(當然我也很需要^^)


  整理的CSS語法包括下列幾種:



  • 背景控制

  • 邊框控制

  • 文字控制

  • 文字連結控制

  • 滑鼠樣式控制

  • 方框控制(邊界、欄位間距)


  PS  如果你不清楚語法究竟要怎樣加入或設定?請見文章最下面的「實際操作」。




█ 語法說明 -- 背景控制:




/* 語法開始 */



   body{ /* body 是可以依照需要作改變的,下面的內容才是重要的! */



   background-image:url(圖片位址);     /* 圖片連結位置 */

   background-attachment:fixed;            /* 圖片位置是否要固定 */

   background-repeat:no-repeat;             /* 圖片是否要重複顯示 */

   background-position:right;                 /* 圖片對齊格式 */

   width:400px;                                      /* 文字區塊的寬度 */



   }




  1. /* XXX */(註解):註解幫助自己看懂,這部分程式不會執行!XXX可以自行填寫!




  2. textarea(文字區塊):這個部分稱作CSS樣式定義類別,一般來說可以自己定義名稱,但是由於這裡我們是要定義HTML語法的標籤,所以是不能更改的!必須使用textarea。當然如果要定義<h1>,就改為h1!(★注意: 不用"<>")




  3. background-image(背景影像):看你的圖片位址在何處就怎麼寫!只要填在url()的()裡面即可!




  4. background-attachment(背景附著):在這裡你可以決定背景圖片的位置。

    屬性有:scroll:隨著捲軸捲動 inherit:繼承之前的設定 fixed:固定不動




  5. background-repeat(背景重複):看看背景圖片是不是要重複顯示。

    屬性有:repeat:重複顯示 no-repeat:不重複顯示 repeat-x:只在X軸重複顯示 repeat-y:只在Y軸重複顯示




  6. background-position(背景位置):決定背景要置中、靠左、靠右的設定。

    屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊 top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)




  7. width(寬):文字區塊的寬度 (可以不設定,系統會自動設定大小)




  8. height(高):文字區塊的高度 (可以不設定,系統會自動設定大小)




  PS1  其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等!因為部屬於這部分的討論範圍!暫時就不列出來!


  PS2 如果你不使用背景影像的話,只想用純顏色當背景時,可以將background-image(背景影像)background-color(背景顏色)取代!但是盡量避免兩個語法同時使用!


     範例:background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色!




█ 語法說明 -- 邊框控制:




/* 語法開始:寫法一 -- 分門別類,無微不至 */


/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */



body { /* body 是可以依照需要作改變的,下面的內容才是重要的! */



border-XXX-width: 1px;                    /* 邊框寬度 */

border-XXX-style:
dotted;               
/* 邊框樣式 */

border-XXX-color:
#0066FF;           
/* 邊框顏色 */



}




  1. XXX:請各位先注意XXX的部分,這裡XXX代表著是邊框的上下左右。

    屬性有:top:上方 bottom:下方 left:左邊 right:右邊

  2. Width(寬):邊框寬度。屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)

  3. Style(樣式):邊框樣式。屬性有:dotted:點狀線 dashed:虛線 solid:實線 double:雙實線 groove溝道狀 ridge山脊狀inset凹陷狀 outset凸起狀

  4. Color(顏色):邊框顏色。屬性為:#XXXXXX (XXXXXX為顏色代碼)


/* 語法開始:寫法二 -- 精簡寫法,功用一樣 */


/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */



body {



border-XXX: width  style color;    /* 邊框 寬度 樣式 顏色 */

}



★注意:相關的語法大致和第一種都像同,只是寫法不一樣!假設我要設定上方邊框為寬度一像素、虛線、紅色,就可以寫成:


          border-top: 1px dashed #FF0000;   /* 邊框 寬度 樣式 顏色 */


/* 語法開始:寫法三 -- 最為精簡、但有限制 */


/* 使用時機:當上下左右、寬度、樣式、顏色都要設定一樣的時候 */



body {



border: width  style color;    /* 邊框 寬度 樣式 顏色 */

}



★注意:相關的語法大致和第二種都像同,只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了!




█ 語法說明 -- 文字控制:




/* 語法開始 */


body {  /* body 是可以依照需要作改變的,下面的內容才是重要的! */



color: #006699;                                                                   /* 文字顏色 */

font-family:
"Times New Roman";                                   
/* 文字字型 */

font-size:
14pt;                                                                   
/* 文字大小 */

font-style:
normal;                                                             
/* 文字樣式 */

line-height:
1.5px;                                                              
/* 文字行高 */

font-weight:
bold;                                                               
/* 文字粗細 */

font-variant:
normal;
                                                           /* 文字變形 */   

text-transform:
capitalize;                                                 
/* 文字大小寫 */

text-decoration:
underline overline line-through blink;   
/* 文字裝飾 */


vertical-align: super ;    /*文字上、下標字*/


text-align: center;     /* 文字對齊方式(水平) */

vertical-align:
top;  
 /* 文字對齊方式(垂直) */


letter-spacing: 120%;  /* 單字間距 */

word-spacing:
120%;
  /* 字母間距 */

text-indent: 10px;         /* 文字縮排 */

}




  1. color(顏色):設定字體顏色。屬性為:color:#XXXXXX (XXXXXX 為顏色代碼)

  2. font-family(文字字型):設定文字字型。屬性為:font-family:"XXX" (XXX為字體顏色)


  例如要用新細明體就是:font-family:"新細明體"


★注意:你所設定的字型必須對方的電腦也有這樣的字型,當別人在瀏覽網頁時,才能正常顯示喔!



  1. font-size(文字大小):設定文字大小。屬性有:N px:像素   N pt:點 (N必須為正整數)

  2. font-style(文字樣式):設定文字樣式。屬性有:normal:正常 italic:斜體 oblique:偏斜體

  3. line-height(文字行高):設定文字行高。屬性有:N %:百分比 (100為正常值 150 就是1.5倍 依此類推) N px:像素   N pt:點 (N必須為正整數)

  4. font-weight(文字粗細):設定文字粗細。屬性有:normal:正常 bold:粗體 bolder:特粗 細體:lighter 另外你也可以直接設定為:font-weight: N; (N為正整數 起始值為100)

  5. font-variant(文字變形):設定文字變形。屬性有:normal:正常 small-caps:小型大寫字.

  6. text-transform(文字大小寫):設定文字大小寫。屬性有:capitalize:字首大寫 uppercase:全部大寫 lowercase:全部小寫

  7. text-decoration(文字裝飾):設定文字裝飾。屬性有:underline:底線 overline:上端線 line-through:刪除線 blink:文字閃爍 none:無線(亦可刪除連結底線)

  8. vertical-align(上下標字型):設定上下標字型。屬性有:super:上標字 sub:下標字

  9. text-align(文字對齊)決定 文字水平對齊方式。屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊

  10. vertical-align(垂直對齊):決定 垂直對齊方式。屬性有:top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)

  11. letter-spacing(單字間距 )設定單字間距。屬性有:N %:百分比 (100為正常值 150 就是1.5倍 依此類推) N px:像素   N pt:點 (N必須為正整數)

  12. word-spacing(字母間距):設定字母間距。屬性有:N %:百分比 (100為正常值 150 就是1.5倍 依此類推) N px:像素   N pt:點 (N必須為正整數)

  13. text-indent(文字縮排):設定文字 縮排距離。屬性有:N px:像素   N pt:點 (N必須為正整數)


★注意:關於第9點中的「閃爍」效果和第10點的「上下標字型」,會依據瀏覽器、網頁語法編寫不同,而決定是否有支援!也就是不一定設定了就會顯示此類效果!




█ 語法說明 -- 文字連結控制:




/* 語法開始 */



a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}

a:link      {font-weight:
normal; font-size:10pt; color:#298bd3; text-decoration:none;}

a:visited {font-weight:
normal; font-size:10pt; color:#298bd3; text-decoration:none;}

a:active  {font-weight:
normal; font-size:10pt; color:#0033cc; text-decoration:none;}

a:hover   {font-weight:
normal; font-size:10pt; color:#0033cc; text-decoration:none;}



/* 語法結束 */


★注意:這四行語法分別是獨立的語法,不用在在任何的 { ... }當中,注意看,這些語法本身就有 { ... }




  1. a:設定所有連結的樣式!




  2. a:link設定連結(正常情況之下)的樣式。




  3. a:visited:設定拜訪過的連結樣式。(也就是點選過的連結)




  4. a:active:設定正在作連結動作時候的樣式。(也就是當你滑鼠按下連結的那時刻)




  5. a:hover:設定當滑鼠移到連結上面時候的連結樣式!




  PS3 在大刮號中間 { ... },就是我們填寫語法控制的部分,你可以依據你自己想要的樣式,參考前面的「背景、邊框、文字」控制語法來加以設定!


★重要觀念說明:


  Question:以上說的連結樣式設定是針對全部的網誌頁面來說,如果我現在只要針對「行事曆」的部分作連結設定,又該如何設定呢?請繼續看下去喔!


  Ans:以無名網誌為例:在無名網誌的CSS設定當中,可以找到「.calendar」這個部分,這就是「行事曆」樣式設定的部分。那我們是將語法寫在「.calendar」當中嗎?答案是否定的!很多人以為要修改這部分的連結樣式,只要將上面五行文字寫到「.calendar」當中就可以囉,這是錯誤的觀念。因為在CSS語法當中,在一個相對應的 { ... } 當中,不可以在包含有其他的 { ... },而在「.calendar」語法當中,它自己本身就已經有一組{ ... },所以不能將上面五行的連結語法加入到「.calendar」當中,因為這五行語法本身都包含著 { ... }


  ★注意:在CSS語法當中,在一個相對應的 { ... } 當中,不可以在包含有其他的 { ... }


  我們採取解決的方式,在程式語法當中稱之為「繼承」。在原先的屬性下再加入一個新的屬性。這段文字看不懂,就直接跳到下面吧!(這個對初學者有點難懂!)


/* 語法開始 */



.calendar a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}

.calendar a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}

.calendar a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}

.calendar a:active  {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}

.calendar a:hover   {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}



/* 語法結束 */


  我們必須另外定義五行新的樣式,在連結前面加上我們要設定的「.calendar」部分,這樣就可以特定為這個部分「.calendar」設定連結樣式,而不會和網誌的其他部分有所衝突!


  同理,如果要修改其他部分,就將「.calendar」改為你要修正部分的名稱即可。例如:要修改「標題Banner」就將「.calendar」改成「#banner」。至於前面是 "." 、 "#" 還是沒有 "",就必須根據你CSS樣式表裡面的設定決定囉!不要小看這一個符號喔!設定錯,可是沒有用的喔!




█ 語法說明 -- 滑鼠樣式控制:




/* 語法開始 */


body {  /* body 是可以依照需要作改變的,下面的內容才是重要的! */



cursor: text;

}





  1. cursor(游標):設定滑鼠游標的樣式。


    屬性有:




    1. default:預設值




    2. hand:連結的手形




    3. crosshair:十字(無箭頭)




    4. move:十字(有箭頭)




    5. text:打字的 I 圖案




    6. wait:漏斗形狀




    7. help:預設值符號加上一個問號




    8. n-resize:箭頭朝上




    9. s-resize:箭頭朝下




    10. w-resize:箭頭朝左




    11. e-resize:箭頭朝右




    12. nw-resize:箭頭朝左上




    13. se-resize:箭頭朝右下




    14. ne-resize:箭頭朝右上




    15. sw-resize:箭頭朝左下




    圖例說明:






  另外有些人或許覺得使用這些預設的符號還是不夠特別,想要讓滑鼠符號更為特別,那還可以用下面的語法!


/* 語法開始 */


body {  /* body 是可以依照需要作改變的,下面的內容才是重要的! */



cursor: url("圖檔名.cur");

}


★注意:圖檔名後面的 ".cur" 為檔案的副檔名,你可以使用兩種格式:一、 ".cur" 靜態游標;二、 ".cur" 動態游標。(所謂動態游標就是,滑鼠游標本身是會動的!)



  PS4 如果你需要自行繪製滑鼠游標的圖案,你可以到(凱哥)這邊,他有詳細的說明!



     http://www.wretch.cc/blog/ppkeigo/519816




█ 語法說明 -- 方框控制(邊界、欄位間距):




/* 語法開始 */


body {  /* body 是可以依照需要作改變的,下面的內容才是重要的! */



margin-XXX: 1px;    /* 邊界設定縮排 */

padding-XXX: 1px;
  /* 欄位間距設定 */

}





  1. XXX:請各位先注意XXX的部分,這裡XXX代表著是 邊界、欄位間距的上下左右。

    屬性有:top:上方 bottom:下方 left:左邊 right:右邊




  2. 邊界屬性設定:屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)




  3. 欄位間距設定:屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)




  PS5 如果你的邊界、欄位間距四個方向(上下左右)都要設定為一樣,語法可以寫成:


        margin: N px;

       
padding:N px;




█ 實際操作:




  為了提供更生動的教學方式,首次採用新的方式!將整個說明過程,製作成動態投影片,希望大家會覺得為方便喔!


(測試中...改天有空在修正更好點!)




|| 歡迎轉載 但請勿盜用|| http://www.andyliudesign.idv.tw

Copyright (C) 2004 Andyliu Design . All rights reserved .

0 意見:

張貼留言