【JavaScript 全端開發學習筆記】CSS 入門 + Side Project 說明

繼上一篇的 HTML 入門文章之後，我會在這篇貼文跟大家分享它的好搭檔_CSS 的相關語法和教學，希望能讓大家在看完這兩篇文章之後，對於前端頁面架設有著更具體的想像！跟上一篇貼文一樣，我也會在文章末端附上 Side Project 的說明來讓大家可以實際練習喔~

這篇文章會以以下架構進行撰寫：

  1. CSS 簡介｜何謂Cascading Style Sheets 階層樣式表？
  2. 基本語法教學＆Box Model 觀念
  3. 練習用 Side Project & 程式碼分享

CSS (Cascading Style Sheets) 階層樣式表

我們首先來看究竟什麼是 CSS？CSS 跟 HTML 一樣，既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。

簡單來說就是美編工具，主要是用來幫 HTML 添加樣式的電腦語言，因為如果大家有看我的上一篇文章的話，你會知道 HTML 只是將文字檔給「刻」進網頁裡，除了分段、文字階層之外，基本上不存在任何排版和美編，而 CSS 則可以做到這一點。也就是說，CSS 是一種風格頁面語言，能讓我們在 HTML 文件中，套上不同的頁面樣式，比如字級 18px 或是將文字變成紅色…等。

h1 {
  color: red;
}

此程式碼為將 h1 標籤的文字顏色改為紅色。

從這邊開始的教學一樣建議大家可以打開你的 CodePen 去進行實戰演練，能讓你更快速的熟悉 CSS 的功能喔！接下來我會直接帶大家盡到基本語法的教學與概念釐清。

CSS 基本語法

讓我們以下方這個程式碼為例：

h1 {
	color: red;
	font-size: 35px;
}

這則 CSS 的意思是「選出 HTML 文件中所有的 h1 元素，將他們的顏色設定為 red，而文字大小設為 35px」。是不是挺好懂得呢？

整體來說，CSS 的語法規則有三大重點

  1. 選擇器 (selector)：寫在最前面的關鍵字，選擇器有很多種寫法，目的都是選出一批 HTML 元素
  2. 樣式設定表：在大括號 {} 裡列出樣式，並且用分號 ; 隔開
  3. 樣式名稱寫在冒號 : 前，設定值寫在冒號後

這裡我摘錄 ALPHA CAMP 的教案圖片，來跟大家做個全面性的介紹：

圖片來源：ALPHA CAMP 教案

範例

h1 {
  background: gray;    /* 背景設定 */
  font-size: 52px;     /* 字體大小 */
  border: 3px solid black;  /* 邊框：粗細-樣式-顏色 */
  padding: 20px;       /* 框線到內容間的留白 */
  margin: 0;           /* 框線之外與其他元素的邊距 */
  text-align: center;  /* 元素內文字對齊方式 */
}

*這裡的 /* */是 CSS 裡的註解方式

基本上就是選擇你要調整的 HTML 標籤，並運用相關 CSS 語法去美化其設計。而當然，我們也可以一次選擇多個標籤做調整：

h1, h2, h3,{
  color: blue;
}

而為了方便我們在調整 CSS 程式碼時可以迅速找到我們想要變動的地方，這裡建議先在寫 HTML 時對元素進行命名，這裡推薦使用類別屬性 class 去賦予，範例如下：

<h3 class="img-title">圖片</h3>

將圖片命名為 img-title，這樣我們在 CSS 程式碼便可以用 . 選出這個類別：

.img-title {
  color: blue;
}

全站設定

接著這部分要講的是一個可以一次針對整份 HTML 做修改的語法，直接選最上層的標籤即可：

body {
  color: red;
}

你可以試著去設定程式碼，會發現可以一次性改動整份文件的樣貌，可謂相當方便。

Box Model 觀念

再來進入到重頭戲：Box Model，分別是框線、留白和邊距。在我們開始進行 CSS 排版以後，有三個屬性會非常常用到：

  • border：框線
  • padding：框線到內容間的留白
  • margin：框線到其他元素的邊距

Box Model 可以在開發者工具的欄位內找到，點開之後你會看到下方的圖形：

Box Model 的概念

在我們寫網頁的時候，每個 HTML 元件，在瀏覽器裡都會被視為一個具有寬度和高度的盒子，這個盒子代表元素實際佔用的空間。而在盒子模型中，除了內容本身佔用的空間，還有三個屬性也會佔用空間：

  • border：盒子的邊界（需要在 CSS 中設定寬度與顏色才會在畫面上看見）
  • padding：從內容（本身）到邊界之間的空間（亦即一個「內部」的距離）
  • margin：從盒子的邊框到周圍其他盒子邊框之間的空間（視為外部「外部」距離）

詳細的教學我推薦下方的這部影片，時長大約 30~40 分鐘，有相當詳細的說明！我這邊直接帶大家進到一些實作的環節~

Padding

Padding 指的是從元件內部內容（比如文字）到元件邊界間的距離。通常用來加寬框線內的距離，作為留白使用。我們看下面這張圖會比較好理解：

圖片來自上方影片

這部份建議大家可以打開 CodePen 來實際測試一下，先簡單寫一段內容於 HTML 的欄位，再透過以下程式碼來作測試。

<div>今天天氣真好，好想出去玩</div>
<div>真的!要去哪裡玩呢?</div>
div {
  padding: 20px;
}

寫完之後會變成下面這樣，兩個句子之間的空隙變大了，這在排版的時候可以呈現出設計稿上想要的樣子。

Border

網頁上的每一個元素而言都會有 border，也就是邊框，預設的元素是看不見邊框的，除非你另外做出設定，這裡我們沿用剛剛的範例，為這些 <div> 元件添加 border：

div {
  padding: 20px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: black;
}

這個語法的意思是在 div 元件的左邊增加一條 5px 粗的黑色實線，你實作出來應該會變成下面這樣：

相關的顏色、線條樣式和粗度都可以自行調整，這部份只要在網路上搜尋「CSS Border 調整語法」，就會找到不少資料喔！

你也可以寫成下列這樣：

div {
  padding: 20px;
  border: black 3px solid;
}

如果你想調整框線長寬的話，記得要用 width 和 height 作調整喔~

div {
  padding: 20px;
  width: 500px;
  height: 20px;
  border: black 3px solid;
}

Margin

Margin 指的是從一整個元件（外圍邊線算起）到另一個元件邊界間的距離。通常用來調整元件間的距離，作為畫面的留白使用。

目前我們已經簡單介紹了 padding 和 border 的用法，而 margin 的寫法，其實和 padding 大同小異，都是在設定距離，我們直接來試試看：

div {
  padding: 20px;
  width: 500px;
  height: 20px;
  border: black 3px solid;
  margin: 20px;
}

可以看到這兩個區塊明顯被分開一段距離，這就是 margin 語法的功能~

補充：調整四個方向的 margin

將剛剛實作中提到的觀念重整一下。因為方形有四個方向，所以這些盒子也各自擁有 top、right、bottom 與 left 等四個屬性，可以藉由附加 -top、-right、-bottom 或 -left 值，自由配置。

比如以下範例，黃色區域為 content 的範圍，外圍的藍線示意為 border，灰底區域就是 padding 的空間。你可以設定四個方向：

div {
  padding: 30px 100px 40px 60px;
}

這行寫法，指的是在這種情況下，依序從頂部、右側、底部至左側，以順時針方向定義邊距值。我個人蠻喜歡下面這張圖的，搭配口訣「上右下左」去記憶，這部分在切版的時候可是相當實用的喔！（雖然我也經常會忘記而跑去 Google 哈哈哈）

圖片來源：AC 教案

如果水平值和垂直值分別相同，你也可以繼續這樣縮寫。前面的數值指的是垂直的值（上下寬度），後面則是水平值（左右寬度）：

圖片來源：AC 教案

Side Project 說明

好啦！以上就是關於 CSS 的基本介紹和語法，這裡給大家一些實作的嘗試，下方為我提供給大家的一段 HTML 程式碼，另外，也有另一張設計稿，這次的 Side Project 練習就是希望大家能針對這個 HTML 的內容，搭配 CSS 的語法，在 CodePen 上試著做出這個版面！

<main class='card'>
  <!--   左邊欄位：圖片 -->
  <section class='avatar'></section>
  <!-- 右邊欄位：人名、描述 -->
  <section class= "content-container">
    <h1 class= "content-name">Elon Musk</h1>
    <h2 class= "content-act"> CEO of TESLA</h2>
    <p class= "content1">
      <i>
        伊隆·里夫·馬斯克，FRS，曾取漢名馬誼郎於臺灣作公司登記之用，是一名企業家、商業大亨、美國工程院院士。他是SpaceX創始人、董事長、執行長、首席工程師，特斯拉投資人、執行長、產品設計師、前董事長，無聊公司創始人，Neuralink、OpenAI聯合創始人，同時也是Twitter活躍使用者
      </i>
    </p>
    <p class= 'content1'>
      <i>
        2002年，馬斯克創辦SpaceX，並擔任董事長、執行長、技術長，該公司主要負責太空運輸、航太製造。2004年，他加入電動車製造商特斯拉，並擔任董事長與產品設計師，2008年兼任執行長。2006年，他協助創立了太陽能服務公司SolarCity，該公司後成為特斯拉子公司特斯拉能源。2015年，他聯合創辦了非盈利公司OpenAI，用於研究和推動友善人工智慧。2016年，他聯合創辦了神經科技公司Neuralink，該公司專注於開發人機介面。同年，他成立了無聊隧道施工公司，用於研發超迴路列車。[註 2]2022年4月，馬斯克決定以430億美元全資收購Twitter。[7]但在5月13日，馬斯克宣布因需要等待Twitter提供有關數據確認其垃圾郵件帳戶以及虛假帳戶的佔比不足5%，決定暫緩收購[8]。7月8日，馬斯克宣布終止收購案[9]。
      </i>
    </p>
  </section>
</main>

一些事先準備好的 CSS 框架：

@import url(<https://fonts.googleapis.com/css?family=Open+Sans:400,300,700>);

.card {
  height: 550px;
  display: flex;
  border: 2px solid #777;
}

.avatar {
  width: 50%;
  background: url("<https://upload.wikimedia.org/wikipedia/commons/e/ed/Elon_Musk_Royal_Society.jpg>");
  background-position: center center;
  background-size: cover;

去試試看吧！如果真的有困難的話也可以參考我的答案。不過還是建議自己先嘗試看看喔！我的解答連結。

總結

其實說實話，因為篇幅有限的關係，我並沒有將所有 CSS 的內容給放進來。相較於 HTML，我個人認為 CSS 是前端工程師在切板時最需要具備的技能，除了基本的顏色、字體和框線之外，你要如何將文字放在你預期的位置？該如何針對設計師給你的稿子去做嘗試，其實這些都沒有想像中容易。

而我個人認為，學習 HTML/CSS 最好的方式就是實作，可以去網路上找別人做過的 Side Project 去練習，或是找個你覺得相當不錯的網頁去練習在 CodePen 切出一樣的版型，這些都會是很好的練習。熟能生巧，等你實際切出幾次有達水準的版面之後，對於許多基礎語法你也會熟捻於心，到那時你才算是正式踏上前端工程師的路子，我現在也仍然在努力中（當然，我還沒決定要不要轉工程師）

總而言之，寫程式這件事並不是一夕之間就能夠讓你變成大高手，而是需要長期而持續的練習與積累，若你真的對這個行業有興趣，那麼就從今天開始練習吧！共勉之！

收到更多巫師札記的內容

總算在今年做出新嘗試啦！目前還是試營運版本的電子報！每個月我至少會寄出一篇關於我當月文章的摘要與重點整理，你可以針對有興趣的主題來閱讀！除此之外，我也會不定期的寫信分享近期的學習點和心得，也希望透過電子報來和大家有更緊密的互動！

只要訂閱巫師札記電子報，我就會免費寄出一份關於「如何提升閱讀效率」的電子書，幫助大家更有系統的吸收與學習書上的知識。日後也會持續分享有意義的內容，請大家多多支持！

標籤

目前趨勢

個人成長｜鯤鵬會
我們沒有想像中那麼理性
書籍觀後感｜ 3 分鐘說 18 萬個故事，打造影響力
個人成長｜資訊種子面試心得