返回列表 回復 發帖

CSS語法包

  
  
CSS語法包括下列幾種:
    背景控制
    邊框控制
    文字控制
    文字連結控制
    滑鼠樣式控制
  • 方框控制(邊界、欄位間距)
?語法說明 -- 背景控制:
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;    /* 邊框
寬度
樣式
顏色 */
}

返回列表 回復 發帖