By Huaying Tsai in Web Development — 2020年7月24日

Web Development 網站開發 (2) - CSS 介紹：基本語法

CSS 也是網站開發裡最重要的元素之一，它負責的就是網頁的外觀。範圍涵蓋字體大小、顏色、背景、色調、佈局、甚至動畫等等，你的網站是否能賞心悅目、淺顯易懂，就靠你使用 CSS 的設計功底了。

body {
  background-color: lightgray;
}

p {
  font-size: 20px;
  font-weight: bold;
  color: blue;
}

.foo {
  margin-top: 10px;
  padding: 10px;
}

#box {
  background-color: #aaaaaa;
  width: 100px;
  height: 100px;
}

以上是 CSS 的一些例子。在大括號前的 body p .foo #box 我們稱它為 CSS Selector，目的是在 HTML 裡面找出那些我們即將要改變樣式的物件。而大括號裡的內容則是告訴我們要給那些物件什麼樣的 style。拿第一個 body 來說，那段的意思就是要設定 body 這個物件的背景為淺灰色。

CSS Selector

CSS Selector 的用途就是要在你的 HTML 內容裡找出你要下 style 的那個物件。以下會用一段 HTML 以及一段 CSS 來解釋兩者之間的交互。

<body>
  <h1 class="title">我是標題</h1>
  <p>我是內文</p>
  <div id="box">方塊</div>
</body>

/* 斜線星號包起來的內容是註解（像這行），會被瀏覽器給忽略，是給工程師解釋語法用的 */

/* css selector選了body，也就是html裡的body的整個內容。這段意思就是要把整個body包起來的部分的背景色設成黃色 */
body {
  background-color: yellow;
}

/* css selector選了h1，這段意思就是要把h1裡的我是標題那行字的字型大小設為30pixel */
h1 {
  font-size: 30px;
}

/* 
可以看到這個.title跟上面不同，前面多了一個點。這樣寫的意思是告訴css不要去找標籤，要有class為title的物件 - 也就是h1

所以 h1, .title都選到了 <h1 class="title">我是標題</h1>，會發生什麼事？ 
css selector 是有優先級的，class會優先於標籤，所以最終這行字的大小會以.title裡的為主，大小為28px;
*/
.title {
  font-size: 28px;
}

/* 給所有為div標籤的物件設定寬度30px、高度30px以及背景色為紅色的一個正方形 */
div {
  width: 30px;
  height: 30px;
  background-color: red;
}

/* 
css selector 如果前面井字號，則他要找的是id。#box為群找id=box的物件 
在優先級上 id > class > 標籤，所以上面的長寬30px的div會被覆蓋為長寬40。
但因為這裏沒有指令背景色，所以背景色會使用上面定義的紅色。
*/
#box {
  width: 40px;
  height: 40px;
}

以上介紹css selector的基本規則，當然還有更進階的用法及規則，譬如：

.a > #b , div[class*="hi"], .a + .b 等等，一開始學習可以先學簡單的，等慢慢在實現一些複雜功能的時候就會有機會接觸更高級的 CSS Selector 語法。

要注意的是使用 CSS Selector 的時候，它會嘗試去找出所有符合結果的物件。個人建議是少用標籤：你可以用 body 因為整個 HTML 只會有一個，但儘量避免使用 div p span 這種標籤去給 style，因為他們在整個 HTML 會被使用多次，很容易就會改到其他你不想改的物件。

常見樣式

樣式有太多種，以下會依照類型給出一些最常用的樣式範例：

div {
  /* 以下是針對字型的樣式設定，可以選擇字型、大小、粗細、間距、顏色、對齊等等 */
  font-family: Ubuntu, Helvetica Neue, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  color: gray;
  text-align: center;
    
  /* 以下是針對 div 這個容器的樣子做設定 */
  /* margin 是容器與其他容器的間距 */
  margin-top: 20px;
  margin-left: 10px;
  /* padding 是這個容器與容器內容的間距 */
  padding-top: 20px;
  padding-bottom: 10px;
  /* 邊框也可以設定粗細、顏色與樣式 */
  border: 1px solid black;
  /* 背景可以設定樣式或圖片 */
  background: gray;
  /* 設定高度寬度 */
  width: 100px;
  height: 100%;
  max-height: 200px;
}

以下從 Chrome 瀏覽器的開發工具截圖，可以很容易看出 margin/border/padding 之間的關係。我們稱它為 box model。