歡迎再次回到我們的網頁開發課程，今天我們將進一步學習網頁設計中的另一個重要部分 - CSS。CSS，即層疊樣式表 (Cascading Style Sheets)，是用來控制網頁的外觀和排版的語言。 透過 CSS，我們可以讓網頁變得更加美觀和易於使用。
有三種方式可以在 HTML 中使用 CSS：
他可以讓我們簡單的規定各個元素的位置
1<h1>這是一個大標題</h1>
1<h1 style="color: red">這是一個紅色大標題</h1>
1<h1 style="color: rgb(255, 128, 0);">這是一個橘色大標題</h1>
1<p style="color: blue;">這是一段藍色文字。</p>
2
1<head>
2 <style>
3 p { color: blue; }
4 </style>
5</head>
6
7<body>
8 <p>這是一段藍色文字。</p>
9</body>
10
1// styles.css，這是另一個檔案
2p {
3 color: blue;
4}
5
6
7// index.html，這是主檔案
8<head>
9 <link rel="stylesheet" type="text/css" href="styles.css">
10</head>
11
12<body>
13 <p>這是一段藍色文字。</p>
14</body>
15
1p {
2 color: blue;
3}
4
1p {
2 color: blue;
3 font-size: 24px;
4}
5
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <style>
5 .blue-text {
6 color: blue;
7 font-size: 24px;
8 }
9 </style>
10 </head>
11 <body>
12 <p>這是一段一般的文字</p>
13 <p class="blue-text">這是一段藍色的文字</p>
14 </body>
15</html>
16
1.blue-text {
2 color: blue;
3 font-size: 24px;
4}1<p class="blue-text">這是一段藍色的文字</p>
1p {
2 color: red;
3}
4
1p {
2 color: red;
3 font-size: 32px;
4}
5
1p {
2 color: red;
3 font-size: 32px;
4 text-align: center;
5}
6
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5}
6
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5 background-color: lightgray;
6}
7
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5 background-image: url('example.jpg');
6}
7
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5 background-image: url('example.jpg');
6 border: 10px solid black;
7}
8
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5 background-image: url('example.jpg');
6 border: 1px solid black;
7 border-radius: 50%;
8}
9
1p {
2 color: red;
3 font-size: 32px;
4 text-align: right;
5 background-image: url('example.jpg');
6 border: 1px solid black;
7 border-radius: 50%;
8 padding: 128px;
9}
10
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <style>
8 p {
9 color: red;
10 font-size: 32px;
11 text-align: right;
12 background-image: url("example.jpg");
13 border: 1px solid black;
14 border-radius: 50%;
15 padding: 128px;
16 }
17 </style>
18 </head>
19 <body>
20 <p>這是一個大貓貓</p>
21 <p>這是一個大貓貓</p>
22 </body>
23</html>
24
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <style>
8 p {
9 color: red;
10 font-size: 32px;
11 text-align: right;
12 background-image: url("example.jpg");
13 border: 1px solid black;
14 border-radius: 50%;
15 padding: 128px;
16 margin: 128px;
17 }
18 </style>
19 </head>
20 <body>
21 <p>這是一個大貓貓</p>
22 <p>這是一個大貓貓</p>
23 </body>
24</html>
25
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <style>
8 p {
9 height: 200px;
10 background-color: lightgray;
11 }
12 </style>
13 </head>
14 <body>
15 <p>這是一個大貓貓</p>
16 <p>這是一個大貓貓</p>
17 </body>
18</html>
19
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <style>
8 p {
9 height: 200px;
10 width: 200px;
11 }
12 </style>
13 </head>
14 <body>
15 <p>這是一個大貓貓</p>
16 <p>這是一個大貓貓</p>
17 </body>
18</html>
19
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div>
6 <div style="display: inline">這是一個大貓貓</div>
7 <div style="display: inline">這是一個大貓貓</div>
8 <div style="display: inline">這是一個大貓貓</div>
9</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div>
6 <div style="display: inline">這是一個大貓貓</div>
7 <div style="display: inline">這是一個大貓貓</div>
8 <div style="display: inline">這是一個大貓貓</div>
9</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex;">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex;">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
10<div>這是一個大貓貓</div> 
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex;justify-content: end">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
10<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex;justify-content: start">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
10<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex;justify-content: space-between">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
10<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div style="display: flex; justify-content: space-evenly">
6 <div>這是一個大貓貓</div>
7 <div>這是一個大貓貓</div>
8 <div>這是一個大貓貓</div>
9</div>
10<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 justify-content: space-evenly;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div style="background: red; height: 30px">這是一個大貓貓</div>
14 <div style="background: red; height: 90px">這是一個大貓貓</div>
15 <div style="background: red; height: 60px">這是一個大貓貓</div>
16</div>
17<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 justify-content: space-evenly;
9 align-items: end;
10 background: blue;
11 height: 200px;
12 "
13>
14 <div style="background: red; height: 30px">這是一個大貓貓</div>
15 <div style="background: red; height: 90px">這是一個大貓貓</div>
16 <div style="background: red; height: 60px">這是一個大貓貓</div>
17</div>
18<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 justify-content: space-evenly;
9 align-items: center;
10 background: blue;
11 height: 200px;
12 "
13>
14 <div style="background: red; height: 30px">這是一個大貓貓</div>
15 <div style="background: red; height: 90px">這是一個大貓貓</div>
16 <div style="background: red; height: 60px">這是一個大貓貓</div>
17</div>
18<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 justify-content: space-evenly;
9 align-items: start;
10 background: blue;
11 height: 200px;
12 "
13>
14 <div style="background: red; height: 30px">這是一個大貓貓</div>
15 <div style="background: red; height: 90px">這是一個大貓貓</div>
16 <div style="background: red; height: 60px">這是一個大貓貓</div>
17</div>
18<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 flex-direction: column;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div style="background: red; height: 30px">這是一個大貓貓</div>
14 <div style="background: green; height: 90px">這是一個大貓貓</div>
15 <div style="background: orange; height: 60px">這是一個大貓貓</div>
16</div>
17<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 flex-direction: column-reverse;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div style="background: red; height: 30px">這是一個大貓貓</div>
14 <div style="background: green; height: 90px">這是一個大貓貓</div>
15 <div style="background: orange; height: 60px">這是一個大貓貓</div>
16</div>
17<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 flex-direction: row;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div style="background: red; height: 30px">這是一個大貓貓</div>
14 <div style="background: green; height: 90px">這是一個大貓貓</div>
15 <div style="background: orange; height: 60px">這是一個大貓貓</div>
16</div>
17<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 flex-direction: row-reverse;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div style="background: red; height: 30px">這是一個大貓貓</div>
14 <div style="background: green; height: 90px">這是一個大貓貓</div>
15 <div style="background: orange; height: 60px">這是一個大貓貓</div>
16</div>
17<div>這是一個大貓貓</div>
1<p>這是一個大貓貓</p>
2<p style="display: block">大家默認都是 block</p>
3<div>這是一個大貓貓</div>
4<p>這是一個大貓貓</p>
5<div
6 style="
7 display: flex;
8 justify-content: space-between;
9 background: blue;
10 height: 200px;
11 "
12>
13 <div
14 style="
15 display: flex;
16 justify-content: start;
17 flex-direction: column;
18 height: 100%;
19 "
20 >
21 <div style="background: red; height: 30px">這是一個大貓貓</div>
22 </div>
23 <div
24 style="
25 display: flex;
26 justify-content: center;
27 flex-direction: column;
28 height: 100%;
29 "
30 >
31 <div style="background: green; height: 90px">這是一個大貓貓</div>
32 </div>
33
34 <div
35 style="
36 display: flex;
37 justify-content: end;
38 flex-direction: column;
39 height: 100%;
40 "
41 >
42 <div style="background: orange; height: 60px">這是一個大貓貓</div>
43 </div>
44</div>
45<div>這是一個大貓貓</div>
也是 css 數一數二重要的屬性
gird 控制的也是元素小孩們的排列
他可以將容器切成如同 excel 般的網格
你可以調整每一行的高度 每一列的高度
元素會根據你網格的設計來自動排列
詳細內容可以參見文章