L5 :: CSS應用清單

上一篇我簡單介紹了如何設置CSS在一個網頁內,今次我會再詳盡列出常用的CSS功能給大家一個參考。

溫故知新

別忘了上一篇我介紹了三種主要類別可以利用CSS作出更改:

  1. body {
  2.   background-color: #000000;
  3.   color: #ffffff;
  4. }
  5. .red_text {
  6.   color: #ff0000;
  7. }
  8. #head-title {
  9.   padding: 10px;
  10. }

現在我將所有功能分幾個類別來說明,等大家可以更容易理解。

文字類

常用的文字變數會有以下幾項

  1. p {
  2.   font-size: 1.2em;
  3.   font-family: 'Arial','新細明體';
  4.   font-weight: blod;
  5.   font-style: italic;
  6.   text-decoration: underline;
  7.   color: #000000;
  8.   line-height: 1.6;
  9.   text-align: center;
  10. }

Attribute (屬性) 用途 Value (值)
font-size 改變文字大小,常用單位有 px、pt、em 和 % 1.2em
font-family 改變字型,依次序 1 -> n 排列 'Arial','新細明體'
font-weight 改變文字粗幼程度,要視乎文字效果 normal / bold
font-style 改變字體特色 normal
italic : 斜體
oblique : 斜體
text-decoration 加減橫線於字體上 overline : 頂間
line-through : 刪除線
underline : 底間
color 文字顏色 使用 6位 HEX 顏色編碼 (16進制 0-f)
line-height 改變文字行距 常用單位有 px、pt、em 或者甚麼也不用加
text-align 設定文字位置 center
left
right
justify

背景類

如果想指定位置有著獨特的背景,就有以下幾項:

  1. body {
  2.   background-color: #000000;
  3.   background-image: url('{image-path}');
  4.   background-position: top center;
  5.   background-repeat: repeat-x;
  6.   background-size: 100%;
  7.   background-attachment: fixed;
  8. }

Attribute (屬性) 用途 Value (值)
background-color 改變空間的背景色 1/ 使用 6位 HEX 顏色編碼 (16進制 0-f) 或 2/ 使用 rgba(255,255,255,1),R是紅色;G是綠色;B是藍色;A是透明度
background-image 設定背景圖片 這點與HTML讀取圖片的方法是相同,但要由CSS的位置開始思考
background-position 設定了背景圖片後,這可以設定背景圖片的位置 top / bottom / center / left / right 或
y% x% 先設定上下,後設定左右
background-repeat 設定是否重覆背景圖片 no-repeat
repeat-x
repeat-y
background-size 設定背景圖片的大小,只需設定闊度就可以 1/ N% : 百份比
2/ Npx : 像素
background-attachment 文字顏色 scroll : 預設會隨著頁面滾動而移動
fixed : 固定背景
local : 背景圖像將隨著元素的內容滾動時移動

空間 / 間格類

在空間及間格這部份大概是最常用的功能之一。

  1. .size {
  2.   width: 1200px;
  3.   height: 300px;
  4. }
  5.   
  6. .padding {
  7.   padding: 10px 10px 10px 10px;
  8.   padding-top: 10px;
  9.   padding-bottom: 10px;
  10.   padding-left: 10px;
  11.   padding-right: 10px;
  12. }
  13.   
  14. .margin {
  15.   margin: 10px 10px 10px 10px;
  16.   margin-top: 10px;
  17.   margin-bottom: 10px;
  18.   margin-left: 10px;
  19.   margin-right: 10px;
  20. }

Attribute (屬性) 用途 Value (值)
width 闊度設定 常用單位:% 或 px
height 高度設定 常用單位:% 、px 或 vh (視窗高度)
padding 在元素內部的空間 每個數值代表的位分別是:上、右、下、左
margin 在元素外部的空間 每個數值代表的位分別是:上、右、下、左
當左右的值是 auto 時,而區塊有被設定闊度時,區塊會自動置中

在這裡 paddingmargin 是特別的,可以單一控制四個位置或者每個位都可以獨立設定。

位置

位置這個會比複雜,但主要有三種最常用:

  1. .relative {
  2.   position: relative;
  3. }
  4.   
  5. .absolute {
  6.   position: absolute;
  7. }
  8.   
  9. .fixed {
  10.   position: fixed;
  11. }
  12.   
  13. .position {
  14.   position: absolute;
  15.   top: 20em;
  16.   bottom: 10px;
  17.   left: 50%;
  18.   right: 5pt;
  19. }

Attribute (屬性) 用途 Value (值)
position 設定區塊的屬性,不同的值會使網站有不同的效果 relative : 相對值
absolute : 絕對值
fixed : 固定位置
top 設定區塊頂部數值 常用單位有 px、pt、em 及 %
bottom 設定區塊底部數值
left 設定區塊左邊數值
right 設定區塊右邊數值

在這裡 topbottomleftright 必須通過 position 的設定才能使區塊按指示放置,當然不能同時上下或左右同時使用。

如果你睇完有疑問,可以去Facebook專頁Inbox我或者Send Email比我都可以架!