輕鬆上手CSS(III) – 修改?創造?基本語法傳授!!

輕鬆上手 CSS 系列文

這次要跟大家談論的主題,是修改以及創造的抉擇。在 css 的世界裡,你希望當個看得懂 css 語法並且會修改的人?或者是當可以無中生有創造出令人驚豔的 css 佈景?這個答案沒有絕對,端看你自己想往哪一條路發展。然而,不論你想當個修改者或是創造者,今天的主題都是非看不可 ^_________^

這邊要先跟各位說明, css 的語法跟選擇器是兩種不同的東西,比如以下這段 css:

a:hover {
 font-size: 11px;
 line-height: 180%;
}

a:hover 是 css 選擇器。裡頭由 { }包住的則是 css 語法。對 css 選擇器不熟或想進一步瞭解的朋友,可以參考我之前寫的CSS 選擇器概略說明

不論以後你要走修改路線或是創造路線(好像遊戲轉職!!),css 的基本語法都是你必備的知識,在此我將常用的 css 語法做個整理,供大家閱覽參考。另外要特別說明一點,這邊所謂的「基本」語法是就我的認知而言,我覺得哪些是大家常用的語法才會把它丟上來,如果過於冷僻或艱難我會自動忽略。

文字屬性一覽

  • font-size:11px; /* 文字大小,單位可以有px.pt.em.%…. */
  • font-family:arial,sans-serif; /* 文字字型,如果第一種字型瀏覽者的電腦沒安裝會自動秀出第二種字型,建議最後都以sans-serif字型作結 */
  • font-style:italic; /* 文字斜體 */
  • font-weight:bold; /* 文字粗體 */
  • color:#999; /* 文字顏色,可以用顏色代碼也可以用顏色的英文表示 */
  • letter-spacing:0.1em; /*文字間距,單位可以有px,pt,em….*/
  • line-height:18px; /* 文字行距 */
  • text-align:left; /* 文字對齊方式,left:置左,right:置右,center:置中,justify:左右對齊 */
  • text-decoration:none; /* 文字線段,none:不使用,underline:底線,overline:頂線,line-through:刪除線 */

框線屬性一覽

  • border:1px solid #ccc; /* 框線的設置依序為: 框線寬度(1px) 框線樣式(solid) 框線顏色(#ccc) */
  • border-top:1px solid #ccc ;/* top為框線上方,可以改成bottom(下方),left(左方),right(右方) */
  • 框線樣式:
  • 實線: solid
  • 虛線: dotted
  • 雙線: double
  • 凹框: inset
  • 凸框: outset

背景樣式一覽

  • background-color:#000; /* 背景顏色 */
  • background-image:url(“images/bg.gif"); /* 背景圖片 */
  • background-attachment:fixed; /* 背景固定,不隨捲軸移動。設為scroll則相反 */
  • background-repeat:repeat; /* 背景重複,也可以改成no-repeat(不重複),repeat-x(在X軸重複),repeat-y(在Y軸重複) */
  • background-position:50% 50%; /* 背景圖片X軸與Y軸的定位點。除了用%表示外,也可用top.bottom.left.right.center */

項目符號樣式一覽
項目符號,我想大家最常用到的就是「如何隱藏項目符號的編號」…但只寫這麼一行感覺很空虛,所以我把幾個編號的樣式也寫出來給大家參考~

  • 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 是大家最常用來調整圖層的語法,這邊概略說明兩者的使用方法以及差別:

  • margin:5px; /* 邊界距離上下左右各5px */
  • margin-top:5px; /* 上邊界距離5px。top可以改為bottom(下方),left(左方) ,right(右方)*/
  • padding:5px; /* 圖層間距距離5px */
  • padding-top:5px; /* 上間距距離5px。top也可以自行修改*/

邊界與間距 (續)

以下是一張網頁示意圖(以灰底表示), 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 語法了!

最後的最後,老話一句~,如果有寫錯或是不懂的地方,歡迎留言給我

You may also like...

14 Responses

  1. sky37042 說道:

    幫忙推一下吧….
    雖然我已經會了
    但還是來複習一下囉

    順便說一下
    承包網頁製作的案子很好賺唷….
    三天 接2個 賺 5000 ^^
    比打工還好賺
    所以要好好學習唷
    不要枉費MUKI的教學唷 ^^

  2. kanetu 說道:

    謝謝妳提供這些整理。:wink:
    雖然開始玩改blog後段段續續看的懂一些css、html
    但是看到這篇才有頓悟的感覺。非常感謝。 :)

  3. CWW 說道:

    哇~讀到這邊就跑出這麼多語法 :mrgreen:
    是必要好好的記一下囉!

  4. CloudPig 說道:

    感謝您打這篇這麼仔細的教學^^

  5. DANIEL 說道:

    請教一下哦
    wordpress是架設blog的軟體
    那我學習 css會不會和 wordpress有衝突
    在wordpress架設的blog裡面,是不是依然可以使用css語法來編輯

    我實在搞不太懂這些之間的關係,請指教一下,謝謝

  6. muki 說道:

    @DANIEL
    兩個是完全不會有衝突的喔
    因為是根本不同的種類
    css是網頁樣式表,wordpress就如同你所說是架設blog的軟體(程式)

    而在wp架設的blog,仍然可以用css語法編輯~~而且自由度更高!!

  7. BoKeam 說道:

    我学CSS就在这里来了 :-D

  8. Eric 說道:

    寫的真的很棒, 支持!

  9. 江小哲 說道:

    請問一下,背景裡面x軸和y軸的定位點如果用%來表示,
    那請問原點是多少?

  10. 阿肥 說道:

    應該是list-style-type吧…自己改list-type-style沒反應

  11. name 說道:

    上面的link好像都壞了

  12. dada 說道:

    最後面的基本的 css 語法縮寫的連結沒了

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>