網頁小社課

by 水餃

whoami

水餃（10）

北資學術
水餃喜歡睡覺不喜歡摔跤
:warm_big_family:
我好睏
不會寫自介要不看幹介?

年輕時的照片

〞

vscode

vscode是甚麼

編輯器

就是一個可以寫程式碼的地方

下載

http://code.visualstudio.com/Download

建一個資料夾

在vscode打開

新增文件

那我們怎麼看寫出來的網頁長怎樣

裝個擴充功能

open with live server

右鍵

open with live server

也可以直接按畫面右下角的go live

好欸

如果你比較喜歡看中文

〞

仙貝芝士

〞

網頁簡介及

運作模式

含文字、圖片、影片、連結的檔案

網頁(web page)

https://www.fg.tp.edu.tw/

很多網頁組成的
主頁(首頁)、子頁面

網站(web site)

如果網站是一本書

網頁就是書頁

書只有一頁可以嗎

可以啊(一頁式網頁)

像是家裡的門牌號碼
好記
www.youtube.com

網域名稱(domain name)

頂級域

(TLD)

二級域(SLD)

子網域

(Subdomain)

有點抽象

分層

根域

最上層
通常寫成一個 .
通常會被省略

頂級域

企業 .com
教育 .edu
台灣 .tw

二級域

註冊時指定的

唯一名稱

子網域

組織網站的不同部分

提供不同的服務

TLD, Top-Level Domain

Root Domain

SLD, Secomd-Level Domain

Subdomain

建立瀏覽器跟伺服器的傳輸管道
加密
http沒有加密會被標不安全
詳見資安小社課

超文本傳輸安全協定(https)

協定
網域
路徑 / 檔案 / 查詢參數
https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ

網址(URL)

搜尋引擎(search engine)

在網路上找使用者輸入的內容

瀏覽器(browser)

使用者用來「看」網頁的軟體
解析原始碼，顯示出圖文介面

伺服器(sever)

負責儲存、處理，提供網頁給使用者

過程

搜尋引擎

伺服器

瀏覽器

找到網址

把東西變成看得懂的樣子

跟伺服器要東西

〞

前端 / 後端

前端

front-end

使用者看到跟操作的介面

網頁設計
動態互動效果
表單、輸入框、按鈕

JavaScript

一種程式語言
提供網頁動態互動功能

HTML

HyperText Markup Language

超文本標記語言

網頁的架構
段落、標題、列表和圖片

CSS

Cascading Style Sheets

階層式樣式表
美化網頁

後端

back-end

在伺服器上運作

負責處理資料與邏輯

會員登入
資料庫查詢
伺服器運算

語言多樣

靜態網頁

內容固定不變
不需要跟使用者互動
開發成本較低，製作快速
例：公司介紹網頁

動態網頁

會使用後端資料庫
網頁內容可更新
互動性高
例：社群媒體平台

〞

DevTools

想看網頁原始碼噎

開發人員工具

兩個方法

右鍵+檢查

F12

可以做甚麼

左上角小箭頭

按了可以選東西

https://www.ckefgisc.org/

然後可以改字

可以做甚麼

好欸找到照片檔案了

〞

HTML

HTML

HyperText Markup Language，超文本標記語言
用來呈現網頁內容
網頁的「骨架」
.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

這些基本的架構在vscode上按 ! + tab就會直接跳出來

HTML元素

<title>Document</title>

起始標籤

內容

結束標籤

前面加個/

這樣就是一個元素

空元素(沒有內容的元素)只有起始標籤

例如換行<br>

HTML元素

屬性

屬性值

用""包起來

標籤名稱

元素的屬性會放在起始標籤，提供更多關於這個元素的資訊

HTML基本架構

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html> 告訴瀏覽器文件類型

<html> </html>根元素，最外層框架，包住所有資訊

<head></head> 給瀏覽器看的資訊

<body></body> 畫面所有內容

en 表示主要語言是英文

head 內容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

meta 描述網頁資料的標籤

關於編碼詳見資安小社，簡單來說就是把文字變成電腦看得懂的樣子

name 資訊種類、content 實際資訊內容

<title> </title> 分頁頁籤上顯示的標題

這一行的意思是讓網頁在各種裝置上按實際寬度顯示，不要自動縮放

charset 字元編碼資訊

head 內容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

除了這些，head裡也可以放其他關於網頁的資料，例如

meta name="description" 網頁內容摘要
meta name="keywords" 搜尋關鍵字

文字

<h1></h1> 標題，數字可以換成1~6，h1最大
<p></p>內文
<b></b> 粗體
<u></u> 底線
<i></i> 斜體
<s></s> 刪除線
<sup></sup> 上標
<sub></sub> 下標
<br> 換行
<hr>橫線

文字

<h1>123</h1>
<h2>456</h2>
<p>789</p>
<hr>
<b>Bold</b>
<br>
<u>Underline</u>
<i>Italic</i>
<s>Strikethrough</s>
<sup>Superscript</sup>
<sub>Subscript</sub>
<!-- This is a comment -->

巢狀結構

就是可以標籤包標籤，一層一層的

不能交錯

<body>
    <p>
        <b>333</b>
    </p>
</body>

<b><i>111</i></b>
<b><i>111</b></i>

會報錯

空格、特殊字元

不換行空格
半形空格	&ensp;
全形空格	&emsp;
<	<
>	>
&	&
"	"
'	'

直接打連續多個空格會變成只有一個

超連結

<a href="https://slides.com">Slides</a>

指定連結的屬性

連結

顯示文字

target="" 指定在哪裡開連結

_self 原分頁

_blank 新分頁

一些常用的屬性

download="" 下載檔案

""裡放檔案

圖片

圖片來源

圖片

alt="" 找不到圖片時的替代文字
title="" 滑鼠移過去會顯示的文字

一些常用的屬性

width="" 圖片寬度
height="" 圖片高度

清單

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

無序

有序

有序清單可以加屬性

換編碼方式

A 大寫字母

a 小寫字母

I 大寫羅馬數字

i 小寫羅馬數字start="50" 從50開始數

<table> 包起來
<caption> 表格標題
<th> 表格第一欄
<tr> 換列
<td> 換行

表格

<table>
  <caption>分數登記表</caption>
  <tr>
    <th>座號</th>
    <th>分數</th>
  </tr>
  <tr>
    <td>1</td>
    <td>20</td>
  </tr>
  <tr>
    <td>2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>3</td>
    <td>60</td>
  </tr>
</table>

有點陽春

border 邊框
<thead> <tbody><tfoot>區分表格結構
<th> 加粗

表格

<table border="2">
  <caption>分數登記表</caption>
  
  <thead>
    <tr>
      <th>座號</th>
      <th>分數</th>
    </tr>
  </thead>
  
  <tfoot>
    <tr>
      <th>平均</th>
      <td>40</td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>40</td>
    </tr>
    <tr>
      <td>3</td>
      <td>60</td>
    </tr>
  </tbody>
  
</table>

做個小小小實作

複習一下

要有：

標題跟一些文字
表格
清單
圖片
連結

表單

<form>

<form> </form> 包起來

常見的元素：<input> <select><texterea> 等等

常見的屬性：

action：指定一個位址 (URL)，使用者按送出表單後將內容送去那
method：指定資料傳輸時用的 HTTP 協議
target：指定瀏覽器要在何處顯示表單送出後伺服器回應的結果
- _self：在當前視窗開啟
- _blank：在新視窗開啟

輸入框

<input>

text	單行文字(預設)
password	密碼（用 ● 隱藏）
number	選數字
date / time / datetime-local	選日期時間
file	上傳檔案
checkbox / radio	核取方塊 / 選項按鈕

屬性 type=

value=預設文字

輸入框

<input>

  <input type="text" value="value"><br>
  <input type="text"><br>
  <input type="password"><br>
  <input type="number"><br>
  <input type="date"><br>
  <input type="time"><br>
  <input type="datetime-local"><br>
  <input type="file"><br>
  <input type="checkbox"><br>
  <input type="radio"><br>

下拉式選單

<select>

  <select> 
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
  </select>

select屬性

name="": 欄位名稱
disabled: 禁用欄位
required: 必填
multiple:可多選

option屬性

value="": 選擇該選項，將傳送什麼值給伺服器，預設為<option> 內容。
selected: 預設選項
disabled: 不能選

基礎長這樣

下拉式選單

<select>

<form>
  <!-- 單選 -->
  <label>城市（必填）：
    <select name="city" required>
      <option value="">-- 請選擇 --</option>
      <option value="taipei" selected>台北</option>
      <option value="taichung">台中</option>
      <option value="kaohsiung">高雄</option>
      <option value="taitung" disabled>沒開的</option>
    </select>
  </label>
  <br>

  <!-- 多選 -->
  <label>食物（可多選）：
    <select name="food" multiple>
      <option value="dumpling" selected>水餃</option>
      <option value="noodle">麵</option>
      <option value="rice">飯</option>
      <option value="soup">湯</option>
    </select>
  </label>
<br>

  <!-- 禁用 -->
  <label>交通工具：
    <select name="transport" disabled>
      <option value="bus">公車</option>
      <option value="train">火車</option>
      <option value="bike">腳踏車</option>
    </select>
  </label>
</form>

多行文字輸入

<textarea>

屬性

rows="": 輸入框的列數
cols="": 輸入框的行數
預設文字直接寫在標籤之間

<textarea rows="6"cols="40">
12345
123
</textarea>

按鈕

<button>

屬性

name="": 按鈕名稱
type=""：
- submit: 表單送出，預設值
- reset: 表單內容重置
- button: 沒特殊功能
disabled: 禁用

欄位標題

<label>

input, textarea, select, button等等都可以搭配label

  <form>
    <label>input</label>
    <input type="text">
    <br><br>

    <label>textarea</label>
    <textarea></textarea>
    <br><br>

    <label>select</label>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <br><br>

    <label>button</label>
    <button>123</button>
  </form>

容器

<div>

包裹其他html，整理出不同區塊

方便給CSS排版，JS操作

<span>

  <div>
    <h3>123</h3>
    <p>111</p>
    <p>222</p>
  </div>

跟div功能差不多，包裹文字或其他行內的 HTML

<p>123 <span>456</span> 123</p>

HTML的部分結束囉

〞

CSS

CSS

cascading style sheets 階層樣式表
控制外觀、排版，美化網頁
.css

套用CSS(1)

html內嵌
head
<style> </style>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <style> 
    h1 {
      color: #f00;
    }
  </style>
</head>
<body>
	<h1>123</h1>
</body>
</html>

套用CSS(2)

html內嵌
body
style=""

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<body>
	<h1 style="color: blue;">123</h1>
</body>
</html>

套用CSS(3)

建立 css 檔案
在 head 連結
建議使用這個

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

link 的 rel 屬性

語法

h1 { color: #333; font-size: 20px; }

選擇器

Selector

屬性

Property

屬性值

Value

宣告區塊Declaration Block

宣告Declaration

語法

h1 {
  color: #333; 
  font-size: 20px; 
 }
/* 大部分會寫成這樣 */
/* 好欸
  註解 */

屬性

HTML 屬性（Attribute）

寫在標籤裡面
控制結構或行為
語法：屬性="值"

<input type="text">
<p class="highlight">水餃</p>

CSS 屬性（Property）

寫在 css 檔案
控制外觀與呈現
語法：屬性: 值;

#intro {
  color: blue;
}
.highlight {
  background-color: yellow;
  color: green;
}

選擇器 Selector

選擇 html 裡的元素

通用選擇器 *
元素標籤
.class名稱
#ID名稱
[屬性]

同一 class name 可以放在多個不同元素上

一個 id name 只能放在一個元素上

  <p class="wow">有 class</p>
  <p id="special">有 ID</p>

選擇器 Selector 🌰

<body>
  <h2>h2</h2>
  <p class="wow">有 class</p>
  <p id="special">有 ID</p>
  <p name="123">有 name 屬性</p>
</body>

/* 通用：選所有元素 */
* {
  background: pink;
}

/* 選所有 <h2> 標籤 */
h2 {
  color: blue;
}

/* 選 class="wow" 的元素 */
.wow {
  color: green;
}

/* 選 id="special" 的元素 */
#special {
  color: red;
}

/* 選有 name 屬性的元素 */
[name] {
  color: purple;
}

選擇器 Selector

A, B	A 或 B
AB	A 且 B
A B	A 裡的所有 B
A > B	A 下一層的所有 B
A ~ B	A 後面的所有同輩 B
A + B	緊接在 A 後面的同輩 B

A、B為不同選擇器

A, B

選擇 A 或 B

p, .wow{
  color: blue;
}

<h2>h2</h2>
<h2 class="wow">h2</h2>
<p>p</p>
<p class="wow">p</p>

p.wow {
  color: green;
}

選擇 A 且 B

選擇器 Selector 🌰

A B

選擇 A 裡的所有 B

<p>p0</p>
<div class="wow">
  <p>p1</p>
  <h3>h3</h3>
  <div>
    <p>p2</p>
  </div>
</div>

.wow p{
  color: blue;
}

.wow > p{
  color: green;
}

A > B

選擇 A 下一層的所有 B

選擇器 Selector 🌰

A ~ B

選擇 A 後面的所有同輩 B

A + B

選擇緊接在 A 後面的同輩 B

<h3>h3</h3>
<p>p1</p>
<p>p2</p>
<div>
  <p>p0</p>
</div>

h3 ~ p{
  color: blue;
}

h3 + p{
  color: green;
}

選擇器 Selector 🌰

屬性選擇器 Attribute selectors

X[attr]	有特定屬性的元素
X[attr=val]	有特定屬性且值完全相同的元素
X[attr~=val]	屬性值包含某字(以空白分隔)
X[attr^=val]	屬性值開頭是某字
X[attr$=val]	屬性值結尾是某字
X[attr*=val]	屬性值包含某字串

屬性選擇器 Attribute selectors 🌰

<a href="https://www.google.com/" target="_blank" class="btn link">Google</a><br><br>
<a href="https://www.youtube.com/" class="video btn">YouTube</a><br><br>
<a href="https://openai.com/">OpenAI</a>

/* [attr]：有這個屬性的元素 */
a[target] {
  color: red;
}
/* [attr=value]：屬性值完全相符 */
a[target="_blank"] {
  border: 2px dotted black;
}
/* [attr~=value]：屬性值包含「以空白分隔」的其中一個字 */
a[class~="btn"] {
  background-color: pink;
}
/* [attr^=value]：屬性值開頭是指定字 */
a[href^="https://o"] {
  color: black;
}
/* [attr$=value]：屬性值結尾是指定字 */
a[href$=".com/"] {
  text-decoration: underline;
}
/* [attr*=value]：屬性值中含有指定字 */
a[href*="youtube"] {
  border: 2px solid black;
}

偽類 pseudo class

元素在特定條件下的設定

a:active { color: red; }

選擇器

Selector

屬性

Property

屬性值

Value

偽類pseudo class

餐烤滋料

偽類 pseudo class

偽類	條件
:link	沒點過的連結
:visited	點過的連結
:hover	滑鼠移到該元素
:active	點擊時(按著不放)
:focus	元素被聚焦（正在操作）
:first-child	第一個子元素
:last-child	最後一個子元素

更多🌰

偽類 pseudo class 🌰

link, visited, hover, active

<a href="https://www.google.com/">Google</a>
<a href="https://www.wikipedia.org/">Wikipedia</a>

a:link {
  color: skyblue;
}
a:visited {
  color: green;
}
a:hover {
  color: yellow;
}
a:active {
  color: orange;
}

點擊前

點擊後

按住

滑鼠滑到

focus, first-child, last-child

  <input><br><br>
  <input value="focus">

  <ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
  </ul>

input:focus {
  border-color: dodgerblue;
  outline: none;
}

ul li:first-child {
  color: lightgreen;
}

ul li:last-child {
  color: tomato;
}

偽類 pseudo class 🌰

focus, first-child, last-child

  <input><br><br>
  <input value="focus">

  <ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
  </ul>

input:focus {
  border-color: dodgerblue;
  outline: none;
}

ul li:first-child {
  color: lightgreen;
}

ul li:last-child {
  color: tomato;
}

偽類 pseudo class 🌰

focus, first-child, last-child

  <input><br><br>
  <input value="focus">

  <ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
  </ul>

input:focus {
  border-color: dodgerblue;
  outline: none;
}

ul li:first-child {
  color: lightgreen;
}

ul li:last-child {
  color: tomato;
}

偽類 pseudo class 🌰

偽元素 Pseudo elements

假的元素(?

選取元素特定的部分，或在元素前後插入東西

p:before { content: "A"; }

選擇器

Selector

屬性

Property

屬性值

Value

偽元素pseudo elements

偽元素 Pseudo elements

偽類	條件
::first-letter	第一個字母
::first-line	第一行
::selection	被使用者選取的部分
::before	在前面加東西
::after	在後面加東西

before、after必須要有 content

偽元素 pseudo class 🌰

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

偽元素 pseudo class 🌰

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

偽元素 pseudo class 🌰

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

偽元素 pseudo class 🌰

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

偽元素 pseudo class 🌰

<h3>123123</h3>
<p>今天天氣晴 <br> 我想要吃蛋餅</p>

h3::first-letter {
  color: red;
}

p::before {
  content: "hi ";
}

p::after {
  content: " oh";
}

p::first-line {
  background-color: gray;
}

p::selection {
  color: green;
}

偽元素 pseudo class 🌰

特定子元素

:first-of-type	同層裡的第一個
:last-of-type	同層裡的最後一個
:nth-last-of-type(n)	同層裡的倒數第n個
:nth-of-type(n)	同層裡的第n個
:nth-of-type(2n)	同層裡某一偶數個
:nth-of-type(2n+1)	同層裡某一奇數個
:only-type	同層裡只有一個

特定子元素 🌰

<div>
  <p>第 1 個 p</p>
  <p>第 2 個 p</p>
  <p>第 3 個 p</p>
  <p>第 4 個 p</p>
</div>

<div>
  <p>唯一的 p → only-of-type</p>
</div>

  p:first-of-type { 
    background: lightblue; 
}  /* 第一個 p */
  p:last-of-type { 
    background: lightgray; 
} /* 最後一個 p */
  p:nth-of-type(2) {
    background: orange; 
} /* 第 2 個 p */
  p:nth-of-type(2n) {
    color: blue; 
}   /* 偶數個 p */
  p:nth-of-type(2n+1) { 
    color: green;
}/* 奇數個 p */
  p:nth-last-of-type(1) { 
    font-weight: bold; 
}  /* 倒數第 1 個 p */
  p:only-of-type { 
    background: pink; 
}  /* 若只有一個 p */

特定子元素 🌰

<div>
  <p>第 1 個 p</p>
  <p>第 2 個 p</p>
  <p>第 3 個 p</p>
  <p>第 4 個 p</p>
</div>

<div>
  <p>唯一的 p → only-of-type</p>
</div>

  p:first-of-type { 
    background: lightblue; 
}  /* 第一個 p */
  p:last-of-type { 
    background: lightgray; 
} /* 最後一個 p */
  p:nth-of-type(2) {
    background: orange; 
} /* 第 2 個 p */
  p:nth-of-type(2n) {
    color: blue; 
}   /* 偶數個 p */
  p:nth-of-type(2n+1) { 
    color: green;
}/* 奇數個 p */
  p:nth-last-of-type(1) { 
    font-weight: bold; 
}  /* 倒數第 1 個 p */
  p:only-of-type { 
    background: pink; 
}  /* 若只有一個 p */

特定子元素 🌰

<div>
  <p>第 1 個 p</p>
  <p>第 2 個 p</p>
  <p>第 3 個 p</p>
  <p>第 4 個 p</p>
</div>

<div>
  <p>唯一的 p → only-of-type</p>
</div>

  p:first-of-type { 
    background: lightblue; 
}  /* 第一個 p */
  p:last-of-type { 
    background: lightgray; 
} /* 最後一個 p */
  p:nth-of-type(2) {
    background: orange; 
} /* 第 2 個 p */
  p:nth-of-type(2n) {
    color: blue; 
}   /* 偶數個 p */
  p:nth-of-type(2n+1) { 
    color: green;
}/* 奇數個 p */
  p:nth-last-of-type(1) { 
    font-weight: bold; 
}  /* 倒數第 1 個 p */
  p:only-of-type { 
    background: pink; 
}  /* 若只有一個 p */

特定子元素 🌰

<div>
  <p>第 1 個 p</p>
  <p>第 2 個 p</p>
  <p>第 3 個 p</p>
  <p>第 4 個 p</p>
</div>

<div>
  <p>唯一的 p → only-of-type</p>
</div>

  p:first-of-type { 
    background: lightblue; 
}  /* 第一個 p */
  p:last-of-type { 
    background: lightgray; 
} /* 最後一個 p */
  p:nth-of-type(2) {
    background: orange; 
} /* 第 2 個 p */
  p:nth-of-type(2n) {
    color: blue; 
}   /* 偶數個 p */
  p:nth-of-type(2n+1) { 
    color: green;
}/* 奇數個 p */
  p:nth-last-of-type(1) { 
    font-weight: bold; 
}  /* 倒數第 1 個 p */
  p:only-of-type { 
    background: pink; 
}  /* 若只有一個 p */

特定子元素 🌰

<div>
  <p>第 1 個 p</p>
  <p>第 2 個 p</p>
  <p>第 3 個 p</p>
  <p>第 4 個 p</p>
</div>

<div>
  <p>唯一的 p → only-of-type</p>
</div>

  p:first-of-type { 
    background: lightblue; 
}  /* 第一個 p */
  p:last-of-type { 
    background: lightgray; 
} /* 最後一個 p */
  p:nth-of-type(2) {
    background: orange; 
} /* 第 2 個 p */
  p:nth-of-type(2n) {
    color: blue; 
}   /* 偶數個 p */
  p:nth-of-type(2n+1) { 
    color: green;
}/* 奇數個 p */
  p:nth-last-of-type(1) { 
    font-weight: bold; 
}  /* 倒數第 1 個 p */
  p:only-of-type { 
    background: pink; 
}  /* 若只有一個 p */

屬性值

前面的示範已經有用到一些常用的屬性

顏色、色碼、RGB
整數
實數
length(長度)：實數 + 單位
百分比
URL
counter(計數器)
字串

Box Model

margin (外邊距)
- 元素外部的間距
  - 可以為負值，但會與其它元素重疊
border (邊框)
- 框線，將內容包在裡面
padding (內邊距)
- 元素內部的間距
  - 不能為負
content (內容)
- 內容任何 HTML 元素

長度

絕對單位

in : 英吋
cm : 公分
mm : 毫米
pt : point
- 1pt = 1/72 in
pc : picas
- 1pc = 12pt
px : pixel units
- 1px = 0.75 pt

相對單位

em : 相對於該元素字體大小
ex : 通常與字體 x 高度相同
vh : 螢幕高的百分比
vw : 螢幕寬的百分比

長度

相對單位

em : 相對於該元素字體大小
ex : 通常與字體 x 高度相同
vh : 螢幕高的百分比
vw : 螢幕寬的百分比

.box {
  font-size: 20px; /* 文字大小 */
  width: 50vw; /* 螢幕寬度百分比 */
  margin: 5vh; /* 上下外邊距佔螢幕高度 */
  padding: 1em; /* 文字與邊框距離 */
  background-color: #b3d8e6; /* content 範圍顏色 */
}

<div class="box">
  content
</div>

font-size

長度

.box1{
      /* 上下左右 */
  margin:20px;
  background-color: #b3d8e6;
}
.box2{
  	   /*上下 左右 */
  margin:20px 30px;
  background-color: #00d8e6;
}
.box3{
       /* 上 右 下 左 */
  margin:20px 30px 40px 50px;
  background-color: #b3ffe6;
}
.box4{
  		/* 上 左右 下 */
  margin:20px 30px 40px;
  background-color: #b3d8ff;
}

<div class="box1">
  這是內容(content)
</div>

<div class="box2">
  這是內容(content)
</div>

 <div class="box3">
  這是內容(content)
</div>

<div class="box4">
  這是內容(content)
</div>

margin-top(top/bottom / left / right)：長度;

padding-top(top/bottom / left / right)：長度;

border

.box {
  width: 150px;
  padding: 15px;
  margin: 10px;
  text-align: center; /*置中*/
}
/* border: 框線 樣式 顏色 */
.dotted { 
  border: 2px dotted black; 
}
.dashed { 
  border: 2px dashed black; 
}
.solid  { 
  border: 2px solid black; 
}
.double { 
  border: 3px double black; 
}
.groove { 
  border: 3px groove gray; 
}
.ridge  { 
  border: 3px ridge gray; 
}
.inset  { 
  border: 3px inset gray; 
}
.outset { 
  border: 3px outset gray; 
}

<div class="box dotted">dotted</div>
<div class="box dashed">dashed</div>
<div class="box solid">solid</div>
<div class="box double">double</div>
<div class="box groove">groove</div>
<div class="box ridge">ridge</div>
<div class="box inset">inset</div>
<div class="box outset">outset</div>

border

div {
   width: 100px;
   height: 30px;
   margin: 20px;
   padding:10px;
}
.width { 
  border: solid; 
  border-width: 5px; 
}
.radius { 
    border: 3px solid green; 
    border-radius: 20px; 
}
.radius-sides { 
    border: 3px solid orange; 
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
  }

<div class="width"> border-width </div>
<div class="radius"> border-radius </div>
<div class="radius-sides"> radius-sides </div>

color

色彩名稱
十六進位色碼
- #FFFFFF
- 兩兩一對代表一個16進位數字

color

色彩名稱
十六進位色碼
- #FFFFFF
- 兩兩一對代表一個16進位數字

color

色彩名稱
十六進位色碼
- #FFFFFF
- 兩兩一對代表一個16進位數字

color

色彩名稱
十六進位色碼
- #FFFFFF
- 兩兩一對代表一個16進位數字
RGB
- rgb(r, g, b, a)
- r, g, b 紅綠藍 0~255
- a 透明度 0~1

更詳細的看這裡

<h3 class="a"> green </h3>
<h3 class="b"> #008800 </h3>
<h3 class="c"> rgb(0, 128, 0, 1) </h3>

.a {
  color: green; 
}
.b { 
  color: #008800; 
}
.c {
  color: rgb(0, 128, 0, 1); 
}

常用文字樣式

font-famliy

對照組
sans-serif 無襯線字體
serif 有襯線
monospace 等寬字型
cursive 手寫感

.sans {
  font-family: sans-serif;
}
.serif {
  font-family: serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}

<p> h3110 </p>
<p class="sans"> h3110 </p>
<p class="serif"> h3110 <p>
<p class="monospace"> h3110 </p>
<p class="cursive"> h3110 <p>

字體種類

用不同瀏覽器開可能不一樣

font-famliy

對照組
Courier New
Arial
consolas

.CN{
  font-family:"Courier New",sans-serif;
}
.Arial{
  font-family:"Arial", sans-serif;
}
.consolas{
  font-family:"consolas",sans-serif;
}

<p> h3110 </p>
<p class="CN"> h3110 </p>
<p class="Arial"> h3110 <p>
<p class="consolas"> h3110 </p>

具體字型名稱

不見得都能顯示出來

font-famliy

引入字型

font-famliy

貼在 html 的 head

font-famliy

<p> hello </p>
<p class="lol"> hello </p>
<p class="hoh"> hello </p>
<p class="wow"> hello <p>

p{
  font-size:30px;
}
.lol {
  font-family: sans-serif;
}
.hoh {
  font-family:"Bitcount Prop Single", sans-serif;
}
.wow {
  font-family: "Press Start 2P", sans-serif;
}

記得 head 裡面要放剛剛那一坨

<link href="https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&family=Press+Start+2P&display=swap" rel="stylesheet">

.pic {
  width: 100px;
  height: auto;
  float: left;
  margin: 10px;
}

讓文字環繞圖片的排版方式

float

<img src="https://avatars.githubusercontent.com/u/108336252?s=280&v=4" class="pic">
<p>2026 建北電資聯合寒訓</p>
<p>冰凍三尺非一日資寒</p>
<p>2/03(二) 到 2/09(一)</p>
 <p>高一高二都可參加</p>
<p>有很多豐富的課程跟好玩的活動</p>
<p>早鳥3200/1人(到12/28)</p>  
<p>原價3500/1人(1/10截止)</p>

報寒訓

.kkk {
  width: 145px;
  background-color:#f1f1f1;
}
.left { 
  width: 50px;
  height: auto;
  float: left; 
}
.right { 
  width: 50px;
  height: auto;
  float: right; 
}

讓文字環繞圖片的排版方式

float

<div class="kkk">
  <h3>float: left</h3>
  <img src="https://www.ckefgisc.org/images/fgisc_star.png" class="left">
  <p>fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc&emsp;fgisc</p>
  <h3>float: right</h3>
  <img src="https://www.ckefgisc.org/images/ckeisc_mouse.png" class="right">
  <p>ckefgisc&emsp;ckefgisc&emsp;ckefgisc&emsp;ckefgisc&emsp;ckefgisc</p>
</div>

餐烤滋料

位置設定

position

static 依照預設
relative 依照原來位置可以根據上下左右屬性調整
absolute 依照最近的父層空間定位
fixed 相對瀏覽器窗口固定，即使滾動窗口也不改變位置

位置設定

position

<div class="kkk">
  <div class="sta">static</div>
  <div class="rela">relative (往右下移)</div>
  <div class="abs">
    <div class="absolute">absolute (貼在右上)</div>
  </div>
  <div class="fixed">fixed (右下角)</div>
</div>

.sta {
  position: static;
  border: 1px solid black;
}
.rela {
  position: relative; /* 相對定位 */
  top: 10px;   /* 向下移 10px */
  left: 10px;  /* 向右移 10px */
  border: 1px solid black; 
}
/* 容器用 relative 讓內部 absolute 可以參考 */
.abs {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid black; 
  margin-top: 20px; /* 上方間距 20px */
}
.absolute {
  position: absolute; 
  top: 0;    /* 貼到父元素上邊 */
  right: 0;  /* 貼到父元素右邊 */
  border: 1px solid black; 
}
.fixed {
  position: fixed;
  right: 10px;  /* 右邊距離視窗 10px */
  bottom: 10px; /* 下邊距離視窗 10px */
  border: 1px solid black;
}
.kkk {
  width: 250px; 
  background-color: #f1f1f1; 
}

background

background-color: 設定背景顏色
background-image:
- url(" ") 背景圖片，內填URL，可是設定一張以上圖片。
- linear-gradient("to 目標方向, 起始色彩, 結束色彩") 線性漸層
background: 簡寫以上兩種設定
background-repeat: 圖片重複
- repeat (預設值)/no-repeat/......
background-size: 圖片大小
background-position:圖片位置

background

/* 背景顏色 */
.color {
  width: 120px;
  height: 100px;
  background-color: lightblue; /* 背景顏色 */
  margin-bottom: 10px;
}
/* 背景圖片 */
.image {
  width: 120px;
  height: 100px;
  background-image: url("https://avatars.githubusercontent.com/u/108336252?s=280&v=40");
  background-repeat: no-repeat;  /* 不重複 */
  background-size: contain;   /* 讓整張圖都顯示在容器內 */
  background-position: center;   /* 放在中間 */
  background-color: lightgray;   /* 若圖片不滿，顯示背景色 */
  margin-bottom: 10px;
}
/* 線性漸層 */
.gradient {
  width: 120px;
  height: 100px;
  background-image: linear-gradient(to right, red, yellow); 
  /* 從左到右紅→黃 */
  margin-bottom: 10px;
}
/* 重複圖片 */
.repeat {
  width: 120px;
  height: 100px;
  background-image: url("https://avatars.githubusercontent.com/u/108336252?s=280&v=40");
  background-repeat: repeat;     /* 重複平鋪 */
  background-size: 50px 50px;   /* 每個圖的大小 */
  background-position: left top; /* 從左上角開始平鋪 */
  margin-bottom: 10px;
}
/* 調整大小 & 位置 */
.size-position {
  width: 120px;
  height: 100px;
  background-image: url("https://avatars.githubusercontent.com/u/108336252?s=280&v=4");
  background-size: 50px 50px; /* 設定圖片大小 */
  background-position: right bottom; /* 放在右下角 */
  background-repeat: no-repeat;
}

  <div class="color">背景顏色</div>
  <div class="image">背景圖片</div>
  <div class="gradient">線性漸層</div>
  <div class="repeat">重複圖片</div>
  <div class="size-position">大小 & 位置</div>

display

顯示模式設定
HTML 元素分為
- 區塊元素
- 行內元素
可以透過 display 屬性改變其原來的顯示模式
display：樣式；

inline 行內樣式
- 不可設定長寬，元素可在同一行
block 區塊樣式
- 可設定長寬，但仍會占滿一整行
inline-block 行內區塊樣式
- 可設定長寬，但同時有 inline 的設定，可水平排列
flex 適應不同螢幕尺寸

display

/* inline：行內元素，不可設定長寬 */
.inline {
  display: inline;
  background-color: lightblue;
  margin: 5px;
  padding: 5px;
}
/* block：區塊元素，可設定長寬，占滿一整行 */
.block {
  display: block;
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  margin: 5px 0;
  text-align: center;
  line-height: 50px; /* 垂直置中 */
}
/* inline-block：行內區塊元素，可設定長寬，水平排列 */
.inline-block {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}
/* flex：彈性盒子，子元素會自動排列 */
.flex {
  display: flex;
  gap: 10px; /* 子元素間距 */
}
.flex > div {
  width: 100px;
  height: 50px;
  background-color: lightyellow;
  text-align: center;
  line-height: 50px;
}

<h2>inline</h2>
<span class="inline">元素1</span>
<span class="inline">元素2</span>
<span class="inline">元素3</span>

<h2>block</h2>
<div class="block">元素1</div>
<div class="block">元素2</div>
<div class="block">元素3</div>

<h2>inline-block</h2>
<div class="inline-block">元素1</div>
<div class="inline-block">元素2</div>
<div class="inline-block">元素3</div>

<h2>flex</h2>
<div class="flex">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

display

/* inline：行內元素，不可設定長寬 */
.inline {
  display: inline;
  background-color: lightblue;
  margin: 5px;
  padding: 5px;
}
/* block：區塊元素，可設定長寬，占滿一整行 */
.block {
  display: block;
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  margin: 5px 0;
  text-align: center;
  line-height: 50px; /* 垂直置中 */
}
/* inline-block：行內區塊元素，可設定長寬，水平排列 */
.inline-block {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}
/* flex：彈性盒子，子元素會自動排列 */
.flex {
  display: flex;
  gap: 10px; /* 子元素間距 */
}
.flex > div {
  width: 100px;
  height: 50px;
  background-color: lightyellow;
  text-align: center;
  line-height: 50px;
}

<h2>inline</h2>
<span class="inline">元素1</span>
<span class="inline">元素2</span>
<span class="inline">元素3</span>

<h2>block</h2>
<div class="block">元素1</div>
<div class="block">元素2</div>
<div class="block">元素3</div>

<h2>inline-block</h2>
<div class="inline-block">元素1</div>
<div class="inline-block">元素2</div>
<div class="inline-block">元素3</div>

<h2>flex</h2>
<div class="flex">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

display

/* inline：行內元素，不可設定長寬 */
.inline {
  display: inline;
  background-color: lightblue;
  margin: 5px;
  padding: 5px;
}
/* block：區塊元素，可設定長寬，占滿一整行 */
.block {
  display: block;
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  margin: 5px 0;
  text-align: center;
  line-height: 50px; /* 垂直置中 */
}
/* inline-block：行內區塊元素，可設定長寬，水平排列 */
.inline-block {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}
/* flex：彈性盒子，子元素會自動排列 */
.flex {
  display: flex;
  gap: 10px; /* 子元素間距 */
}
.flex > div {
  width: 100px;
  height: 50px;
  background-color: lightyellow;
  text-align: center;
  line-height: 50px;
}

<h2>inline</h2>
<span class="inline">元素1</span>
<span class="inline">元素2</span>
<span class="inline">元素3</span>

<h2>block</h2>
<div class="block">元素1</div>
<div class="block">元素2</div>
<div class="block">元素3</div>

<h2>inline-block</h2>
<div class="inline-block">元素1</div>
<div class="inline-block">元素2</div>
<div class="inline-block">元素3</div>

<h2>flex</h2>
<div class="flex">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

display

/* inline：行內元素，不可設定長寬 */
.inline {
  display: inline;
  background-color: lightblue;
  margin: 5px;
  padding: 5px;
}
/* block：區塊元素，可設定長寬，占滿一整行 */
.block {
  display: block;
  width: 150px;
  height: 50px;
  background-color: lightgreen;
  margin: 5px 0;
  text-align: center;
  line-height: 50px; /* 垂直置中 */
}
/* inline-block：行內區塊元素，可設定長寬，水平排列 */
.inline-block {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}
/* flex：彈性盒子，子元素會自動排列 */
.flex {
  display: flex;
  gap: 10px; /* 子元素間距 */
}
.flex > div {
  width: 100px;
  height: 50px;
  background-color: lightyellow;
  text-align: center;
  line-height: 50px;
}

<h2>inline</h2>
<span class="inline">元素1</span>
<span class="inline">元素2</span>
<span class="inline">元素3</span>

<h2>block</h2>
<div class="block">元素1</div>
<div class="block">元素2</div>
<div class="block">元素3</div>

<h2>inline-block</h2>
<div class="inline-block">元素1</div>
<div class="inline-block">元素2</div>
<div class="inline-block">元素3</div>

<h2>flex</h2>
<div class="flex">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>