CSS：將HTML文件變美觀

2022 iThome 鐵人賽

DAY 4

自我挑戰組

大學每日任務：攝取新知識及學習紀錄系列第 4 篇

14th鐵人賽

madonnalily

2022-09-19 23:26:43

848 瀏覽

分享至

階層式樣式表（Cascading Style Sheets，CSS）是一種用來為結構化文件添加字型、間距和顏色等電腦語言。CSS不能單獨使用，必須要寫在HTML或是XML中工作，簡單來說就是能裝飾HTML或XML，做出具美觀的網頁。

CSS有3種方式寫在HTML文檔中：

行內樣式(Inline Styles)：能在HTML的style中進行設定。

<!DOCTYPE html>
<html>
<body style="background-color: powderblue;">
<h1 style="color:blue;">Hello</h1>
<p style="color:red;">This is a Inline Styles.</p>
</body>
</html>

內部樣式表(Internal style sheet)：在HTML文件的<style>...</style>內進行設定。

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Hello</h1>
<p>This is a Internal style sheet.</p>

</body>
</html>

外部樣式表(External style sheet：副檔名設為css的檔案，在<head>...</head>中使用<link>來參照。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Hello</h1>
<p>This is a External style sheet.</p>

</body>
</html>

可以從這些例子中看到CSS能改變HTML的文字、背景顏色。
顏色可以使用指定文字來調整，如上面範例的red、blue等，但也可以使用RGB顏色值、來調整，每個參數（紅、綠、藍）顏色，其值介於 0 和 255 之間。

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
</body>
</html>

也可以用十六進制顏色值，#rrggbb（紅、綠、藍），為0到ff的十六進制值。

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff6347;">#ff6347</h1>
</body>
</html>

表格
表格當然也能利用CSS來美化。

<!DOCTYPE html>
<html>
<body>
<style>
table, th, td {
  border: 2px solid black;
}
</style>
<h2 style="font-size: 35px;">表格</h2>
<table style="width:40%">
  <tr style="font-size: 20px;">
    <td style="background-color: lightblue;">姓名</td>
    <td>生日</td>
    <td style="background-color: lightblue;">興趣</td>
  </tr>
  <tr>
    <td>吳美麗</td>
    <td style="background-color: lightblue;">2000/5/30</td>
    <td>跳舞</td>
  </tr>
  <tr>
    <td style="background-color: lightblue;">林志明</td>
    <td>1988/10/8</td>
    <td style="background-color: lightblue;">游泳</td>
  </tr>
  <tr>
    <td>黃成功</td>
    <td style="background-color: lightblue;">2012/12/12</td>
    <td>睡覺</td>
  </tr>
</table>
</body>
</html>