Day-04 認識組成網頁基本架構2-CSS

2025 iThome 鐵人賽

DAY 4

Security

Izumi從零開始的30日WEB馬拉松系列第 4 篇

17th鐵人賽

izumi_exarch

2025-09-14 00:38:47

109 瀏覽

分享至

相信大家看過昨天的文章加上自身強大的天賦之後對HTML一定有了基本的認識，那麼今天就來介紹CSS，那麼我們就從CSS是什麼開始說起吧!

什麼是CSS?

CSS英文的全名為Cascading Style Sheets，中文則叫做層疊樣式表，是一種用來控制HTML網頁的排版及外觀的語言。

若要詳細講CSS的作用的話其實有非常的多，這邊可以舉例幾個比較常用與實用的，例如:改變文字的顏色、大小、字型或設定背景顏色或圖片以及控制版面的布局。

CSS的基本結構

格式:

選擇器 {
  屬性: 值;
}

例如:

p {
  color: red;
}

選擇器的部分p的意思是找到所有的段落，屬性color則是更改文字顏色，值red則是更改為紅色。

CSS怎麼融入到HTML中?

在學了基本的CSS及HTML後，便要知道如何將CSS融入到HTML裡面，我們以昨天的範本為例，試著將CSS融入進去吧!

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web</title>
  </head>
  <body>
    <h1>welcome to my web</h1>
    <p>this is a paragraph </p>
    <img src="photo.jpg" alt="my photo ">
    <a href="https://example.com">click me! </a>
  </body>
</html>

以上這段是昨天的範本，而我們要將CSS融入進去的話我們會有一段放在裡面的東西，這段就是…。為甚麼要將放在裡面呢?因為區塊通常負責處理設定類的內容，如標題外部資源連結等…，而且把CSS放在內部，瀏覽器再載入時HTML便能先讀取樣式，確保畫面一開始就套用好外觀，而非先顯示純文字在閃現成有套用CSS的版本。下面是將CSS融入進去後的編碼。

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web</title>
	<style>
		body{
		  background-color: #f0f8ff;
      	  font-family: "新細明體", Arial, sans-serif;
}
h1 {
      color: darkblue;
      text-align: center;
}
p {
      color: #333;
      font-size: 18px;
      line-height: 1.5;
  </style>
  </head>
  <body>
    <h1>welcome to my web</h1>
    <p>this is a paragraph </p>
    <img src="photo.jpg" alt="my photo ">
    <a href="https://example.com">click me! </a>
  </body>
</html>

接下來跟昨天一樣，我會來說明每個上面有用到且常見的屬性:

color: 文字顏色
background-color: 背景顏色
font-size: 字體大小
font-family: 字體樣式
width/height: 寬/高
border: 邊框(外框線)
margin: 外距(邊框外與其他元素之距離)
padding: 內距(控制內容與邊框之間的距離)

以上大概就是比較常見的屬性，可能有人這時會想問，為甚麼background-color是使用十六進位色碼而color則是直接利用顏色名稱設定darkblue，其實並沒有硬性規定哪種對或錯，因為CSS支援了多種方式表示顏色，其中兩種就是我演示的這兩種。顏色名稱大約支援140種的顏色，而十六進位色碼則能夠更方便我們進行精準的配色。接下來可能還有人問為甚麼字型會需要設定"新細明體", Arial, sans-serif ，這最主要的原因是不同的電腦、系統及瀏覽器的字體庫會不一樣，指定多個字體則可以讓瀏覽器按照順序選擇可用的，而sans-serif是系統內建的安全字體。

今日小結

我認為這幾個可能是上面的代碼裡面可能比較容易遇到的問題，也是我自己有遇到的問題，因此我特別提出來分享，以上大概就是今天的CSS的內容，明天我們將會進入最難的JavaScripts，也是我們要介紹的基本網頁組成的最後一部分，介紹完後接下來我們將會進入第一個實作題目，預計之後會採用觀念及實作穿插的方式繼續學習Web的知識。