正在生成 AI 摘要...
輕鬆上手 CSS 系列文
這次要跟大家談論的主題，是修改以及創造的抉擇。在 css 的世界裡，你希望當個看得懂 css 語法並且會修改的人？或者是當可以無中生有創造出令人驚豔的 css 佈景？這個答案沒有絕對，端看你自己想往哪一條路發展。然而，不論你想當個修改者或是創造者，今天的主題都是非看不可 ^_________^
這邊要先跟各位說明，css 的語法跟選擇器是兩種不同的東西，比如以下這段 css：
a:hover {
font-size: 11px;
line-height: 180%;
}a:hover 是 css 選擇器。裡頭由 { } 包住的則是 css 語法。對 css 選擇器不熟或想進一步瞭解的朋友，可以參考我之前寫的 CSS 選擇器概略說明。
不論以後你要走修改路線或是創造路線(好像遊戲轉職!!)，css 的基本語法都是你必備的知識，在此我將常用的 css 語法做個整理，供大家閱覽參考。另外要特別說明一點，這邊所謂的「基本」語法是就我的認知而言，我覺得哪些是大家常用的語法才會把它丟上來，如果過於冷僻或艱難我會自動忽略。
文字屬性一覽
/* 文字大小，單位可以有px.pt.em.%.... */
{ font-size:11px; }
/* 文字字型，如果第一種字型瀏覽者的電腦沒安裝會自動秀出第二種字型，建議最後都以 sans-serif 字型作結 */
{ font-family: arial,sans-serif; }
/* 文字斜體 */
{ font-style: italic; }
/* 文字粗體 */
{ font-weight: bold; }
/* 文字顏色，可以用顏色代碼也可以用顏色的英文表示 */
{ color: #999; }
/* 文字間距，單位可以有 px,pt,em....*/
{ letter-spacing: 0.1em; }
/* 文字行距 */
{ line-height: 18px; }
/* 文字對齊方式，left:置左，right:置右，center:置中，justify:左右對齊 */
{ text-align: left; }
/* 文字線段，none:不使用，underline:底線，overline:頂線，line-through:刪除線 */
{ text-decoration: none; }框線屬性一覽
/* 框線的設置依序為: 框線寬度(1px) 框線樣式(solid) 框線顏色(#ccc) */
{ border:1px solid #ccc; }
/* top為框線上方，可以改成bottom(下方)，left(左方)，right(右方) */
{ border-top:1px solid #ccc; }框線樣式：
- 實線： solid
- 虛線： dotted
- 雙線： double
- 凹框： inset
- 凸框： outset
背景樣式一覽
/* 背景顏色 */
{ background-color:#000; }
/* 背景圖片 */
{ background-image:url("images/bg.gif"); }
/* 背景固定，不隨捲軸移動。設為scroll則相反 */
{ background-attachment: fixed; }
/* 背景重複，也可以改成no-repeat(不重複)，repeat-x(在X軸重複)，repeat-y(在Y軸重複) */
{ background-repeat: repeat; }
/* 背景圖片 X 軸與 Y 軸的定位點。除了用 % 表示外，也可用top.bottom.left.right.center */
{ background-position: 50% 50%; }項目符號樣式一覽
項目符號，我想大家最常用到的就是「如何隱藏項目符號的編號」...但只寫這麼一行感覺很空虛，所以我把幾個編號的樣式也寫出來給大家參考~
/* 隱藏項目符號 */
{ list-type-style: none; }
/* 阿拉伯數字 */
{ list-type-style: decimal; }
/* 實心圓形 */
{ list-type-style: disc; }
/* 空心圓形 */
{ list-type-style: circle; }
/* 實心方形 */
{ list-type-style: squre; }
/* 圖片形式 */
{ list-type-image: url("list.gif"); }邊界與間距
邊界 margin 以及間距 padding 是大家最常用來調整圖層的語法，這邊概略說明兩者的使用方法以及差別：
/* 邊界距離上下左右各5px */
{ margin: 5px; }
/* 上邊界距離 5px。top 可以改為 bottom(下方)，left(左方) ，right(右方)*/
{ margin-top: 5px; }
/* 圖層間距距離 5px */
{ padding: 5px; }
/* 上間距距離 5px。top 也可以自行修改*/
{ padding-top: 5px; }
以下是一張網頁示意圖(以灰底表示)， A 圖層以及 B 圖層各放在左右兩邊。此時沒有任何的語法牽制，所以兩張圖層的大小位置相同，都緊緊貼著網頁的最上方。
而我現在想要將兩張圖層的位子往下移 40px，A 圖層使用 margin， B 圖層使用 padding。
#a {margin-top: 40px;}
#b {padding-top: 40px;}來猜猜最後會發生什麼事情吧:)
看到了嗎!!! 雖然兩個圖層的文字都往下移了 40px ，達到你想要的效果，但是假設你有對圖層調背景顏色，就會發現其實差多了。
- A 圖層使用 margin 控制， margin 控制的是整個圖層相對於邊界而言，所以他會將整個圖層往下移動。
- B 圖層使用 padding 控制， padding 控制的是裡頭的物件，他的相對點就是整個 B 圖層，所以相對於 B 圖層，物件下移 40px。
瞭解 margin 以及 padding 的差別後，你就可以知道為什麼有時圖層會掉下去或是錯位了吧。原因之一就是你用了過多的 margin 來控制他，但是圖層都是白底所以看不出他的差別，事實上他可能已經嚴重蓋到上下的圖層或左右的圖層，一張張圖層疊加上去，光是用想的都覺得恐怖XD。
CSS 基本語法小結
不知道對各位來說東西會不會過多？總之 css 應該也需要時間做消化，所以今天就講到這裡。關於 float 還有 position 的語法，我會放到進階語法區(個人覺得那個比較麻煩...)
如果以上這些語法你都消化瞭解了，我建議大家看一篇基本的 css 語法縮寫，這兩篇看完之後，我相信應該可以看懂大多數的 css 語法了！
最後的最後，老話一句~，如果有寫錯或是不懂的地方，歡迎留言給我
最底下的基本的 css 語法縮寫 連結找不到頁面@”@
感謝告知ＱＱ，已經更新連結囉！！！
連結更新了唷！！