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。

當然除了上述以外還有更多更細的用法,而且是很靈活的。本篇文章的目的是帶大家入門 CSS,想知道很多細節的用法可以參考 https://www.w3schools.com/css/default.asp

See the Pen qBrQxMW by Hua-Ying Tsai (@huaying) on CodePen.

繼續閱讀:

Web Development 網站開發 (3) - CSS 介紹:佈局
CSS 除了給你的文字、物件上色調整大小、間距之外,還有另一個就是佈局。我們可以用 CSS 去指定什麼樣的內容要放在怎麼樣的位置。比如說一個置頂的選單;左邊有類別可以選;右邊是內容等等。以下會介紹一下佈局相關的知識像是 Block vs Inline、Position 以及 Flexbox 等。
Huaying Tsai

Huaying Tsai

擅長 Python, Javascript, React, GraphQL。 想寫寫一些適合新手的程式語言教學文。 想推廣現代社會學習多元技能的風氣,建立了技能交換的平台 - https://thoth.tw
台灣