輕鬆上手CSS(III) – 基本語法傳授!!

☞ 輕鬆上手 CSS 系列文

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

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

CSS

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

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

文字屬性一覽

CSS

框線屬性一覽

CSS

框線樣式:

  • 實線: solid
  • 虛線: dotted
  • 雙線: double
  • 凹框: inset
  • 凸框: outset

背景樣式一覽

CSS

項目符號樣式一覽

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

CSS

邊界與間距

邊界 margin 以及間距 padding 是大家最常用來調整圖層的語法,這邊概略說明兩者的使用方法以及差別:

CSS

以下是一張網頁示意圖(以灰底表示), A 圖層以及 B 圖層各放在左右兩邊。此時沒有任何的語法牽制,所以兩張圖層的大小位置相同,都緊緊貼著網頁的最上方。

而我現在想要將兩張圖層的位子往下移 40px,A 圖層使用 margin, B 圖層使用 padding

CSS

來猜猜最後會發生什麼事情吧:)

看到了嗎!!! 雖然兩個圖層的文字都往下移了 40px ,達到你想要的效果,但是假設你有對圖層調背景顏色,就會發現其實差多了。

  • A 圖層使用 margin 控制, margin 控制的是整個圖層相對於邊界而言,所以他會將整個圖層往下移動
  • B 圖層使用 padding 控制, padding 控制的是裡頭的物件,他的相對點就是整個 B 圖層,所以相對於 B 圖層,物件下移 40px

瞭解 margin 以及 padding 的差別後,你就可以知道為什麼有時圖層會掉下去或是錯位了吧。原因之一就是你用了過多的 margin 來控制他,但是圖層都是白底所以看不出他的差別,事實上他可能已經嚴重蓋到上下的圖層或左右的圖層,一張張圖層疊加上去,光是用想的都覺得恐怖XD。

CSS 基本語法小結

不知道對各位來說東西會不會過多?總之 css 應該也需要時間做消化,所以今天就講到這裡。關於 float 還有 position 的語法,我會放到進階語法區(個人覺得那個比較麻煩…)

如果以上這些語法你都消化瞭解了,我建議大家看一篇基本的 css 語法縮寫,這兩篇看完之後,我相信應該可以看懂大多數的 css 語法了!

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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
3 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
TEA
TEA
5 years ago

最底下的基本的 css 語法縮寫 連結找不到頁面@”@

muki
5 years ago
Reply to  TEA

連結更新了唷!!

粉絲團