WEB

網頁小社課-網頁基礎

By - 點點

Index

網頁運作模式

前端 vs 後端

前端網頁架構

HTML 語法

CSS 語法

網頁運作模式

web

  • 網路中的一"頁"
  • 一個適用於全球資訊網和網頁瀏覽器的檔案
  • 經由網址（URL）來辨識與存取
  • 通過瀏覽器解釋網頁的內容，再展示給使用者

維基百科

整理一下

再整理一下

web

存在某個電腦裡的網頁檔案

某個與網際網路相連的電腦

另一個使用者的電腦

這個檔案的網址

也就是 URL

就是在網際網路裡的地址

打上網址

網路瀏覽器

網頁檔案被傳送到使用者的電腦

讀取並解釋網頁內容

成為使用者看到的樣子

web

  • URL 網址
  • https 超文本傳輸安全協定 (HyperText Transfer Protocol Secure)
  • www 全球資訊網的簡稱 (World Wide Web)
  • 網頁 (page) 單一的頁面
  • 網站(web site) 多個網頁的集合

前端 vs 後端

前端

(Front-end)

又稱為靜態網頁，負責處理使用者看到跟操作的介面。

三大語言分別是：HTML、CSS、JavaScript

後端

(back-end)

又稱為動態網頁，負責處理資料庫及伺服器。

語言多樣，如 Python、Ruby、Java、JavaScript

 

前端 vs 後端

前端三大語言

HTML

超文本標記語言(HyperText Markup Language)，網頁的基礎架構。

CSS

階層樣式表 (Cascading StyleSheets)，為 HTML 添加樣式，也就是負責美化的部分。

jS

JavaScript，負責與使用者互動的部分，例如按鈕之類的

前端三大語言

HTML

超文本標記語言(HyperText Markup Language)，網頁的基礎架構。

CSS

階層樣式表 (Cascading StyleSheets)，為 HTML 添加樣式，也就是負責美化的部分。

jS

JavaScript，負責與使用者互動的部分，例如按鈕之類的

鋼骨結構

外觀裝修

水電串接

想像一下蓋房子

前端

(Front-end)

又稱為靜態網頁，負責處理使用者看到跟操作的介面。

三大語言分別是：HTML、CSS、JavaScript

後端

(back-end)

又稱為動態網頁，負責處理資料庫及伺服器。

語言多樣，如 Python、Ruby、Java、JavaScript

 

前端 vs 後端

想像一下蓋房子

鋼骨結構

外觀裝修

水電串接

電力中心供給住戶的用電需求

前端網頁架構

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>
    <h1>hello world </h1>
</body>
</html>
  • <!DOCTYPE html> 文件類型宣告
  • <html></html> 根元素，包住所有顯示在頁面上的資訊。
  • <head></head>一些不會在瀏覽網頁的時候看到的資訊。
  • <body></body>所有會顯示在頁面上的內容。

*這些基礎架構，只要按 " ! " + "Tab" 就會自動出現

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>
    <h1>hello world </h1>
</body>
</html>

<head></head> 

  • 包住使用者看不到的資訊，主要是寫給瀏覽器看的
  • 網頁概要
  • 網頁搜尋關鍵字
  • <title></title> 裡面放的是瀏覽器上分頁標籤會顯示的東西

*這些基礎架構，只要按 " ! " + "Tab" 就會自動出現

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>
    <h1>hello world </h1>
</body>
</html>

<body></body>

  • 顯示給使用者看的東西
  • 網頁頁面上顯示的內容

*這些基礎架構，只要按 " ! " + "Tab" 就會自動出現

HTML 語法

  • 標籤 (tags) 用 <> 包住標籤名稱
  • 元素 (elements) 用 <tagname></tagname> 包起來的東東，元素包含起始與結束標籤加上內容。
  • 大部分元素同時擁有起始標籤與結束標籤，結束標籤會在標籤裡加一個 "/" 
  • <  ></  >

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>
    <h1>hello world </h1>
</body>
</html>

起始標籤

結束標籤

  • 屬性，由 " 屬性名 " + " 屬性值 " 組成，用以為元素添加更多設定。
  • 屬性名 (attribute)，決定要添加什麼類型的資訊。
  • 屬性值 (value)，前後要加 " " 
  • 屬性包含在起始標籤的標籤名稱後方。

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>
    <h1>hello world </h1>
</body>
</html>

屬性

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>
    <h1>hello world </h1>
</body>
</html>

指定文件字元編碼

指定螢幕寬度為裝置寬度，畫面載入縮放比例

標題，出現在網頁頁籤上

  • 空元素，沒有內容的元素，這樣的元素他的標籤只有起始標籤，裡面可以有屬性的設定。

Body tags

<h1>~<h6>  不同層級的標題

<p> 內文

<b> 文字粗體

<u> 文字底線

<i> 文字斜體

<s> 文字刪除線

以上標籤都需要結束標籤

<!--註解長這樣-->

<br> 換行

<hr> 水平線

<h1>不同層級的標題</h1>

<p> 內文 </p>

<b> 文字粗體 </b>

<u> 文字底線 </u>

<i> 文字斜體 </i>

<s> 文字刪除線 </s>
<!--以上標籤都需要結束標籤-->

<!--註解長這樣-->
<br> 換行

<hr> 水平線

Body tags - 引用特殊字元

找規律："&" 開頭 "' ; " 結尾

字元 引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

Body tags - 引用特殊字元

找規律："&" 開頭 "' ; " 結尾

字元 引用
不換行空格 &nbsp;
1 全形空格 (em) &emsp;
1/2 半形空格 (en) &ensp;
1/6 窄空格 &thinsp;
Tab &#09;

空格們

詳細參考資料

*看懂就可以了不需要特別背，需要的時候再查

Body tags - 連結

<a href="URL">顯示文字</a>

<a> 屬性 :

  href=" "，雙引號裡放連結(網址)

  target=" "，雙引號裡面可以放的屬性值：

    _self：預設值，在當前視窗開啟

    _blank：在新視窗開啟

  download=" "，點擊連結時，下載指定資源，雙引號內放檔案。

詳細參考資料

*看懂知道有就可以了不需要特別背，需要的時候再查

Body tags - 圖片

<img src=" ">，空元素，不需要結束標籤。

<img> 屬性 (必須包含src) :

  *src=" "，雙引號裡放圖片連結/檔案。

  width=" "，用像素 (pixels) 指定圖片寬度。

  height=" "，用像素 (pixels) 指定圖片高度。

  alt=" "，圖片替代文字，圖片無法載入時顯示的文字。

  title=" "，滑鼠滑過該圖片時會顯示的文字。

詳細參考資料

網址&路徑

網址，http:// 或 https:// 開頭的一串咚咚。

路徑，檔案的開啟的路徑，根據目錄找到檔案的位置。

  -絕對路徑，本機或網路上的絕對位置，所以網址也是一種絕對路徑。

  -相對路徑，相對於現在檔案目錄的路徑而言，目標檔案的位置。

    . 同層目錄，" . " 可省略

    .. 上層目錄

    / 目錄之間的分隔，放在最前端為根目錄的意思

 

    

網址&路徑

舉例：

    現在所在位置：

    C:/Users/LENOVO/OneDrive/desktop/web/main.html 

    目標檔案：

    絕對路徑 ->      

     C:/Users/LENOVO/OneDrive/desktop/web/image.jpg

    相對路徑 ->

    image.jpg

    

body tags - List

有序清單

無序清單

<ul>

  <li>content</li>

  <li>content</li>

</ul>
<ol>

  <li>content</li>

  <li>content</li>

</ol>
  • content
  • content
  1. content
  2. content

body tags - Table

<table border="3">
  <caption>title</caption> <!--表格標題-->
  
  <thead>    <!--欄位標題-->
    <th>(0,0)</th> <!--加粗字體-->
    <th>x1</th>
    <th>x2</th>
  </thead>
  
  <tbody>   <!--表格主體-->
    <tr>              <!--一個橫列-->
      <th>y1</th>   <!--列裡面的每一格-->
      <td>(1,1)</td>
      <td>(2,1)</td>
    </tr>
    <tr>
      <th>y2</th>
      <td>(1,2)</td>
      <td>(2,2)</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th>表格尾</th>
    </tr>
  </tfoot>
</table>

比較完整的表格長這樣

body tags - Table

<table>
    <tr>              <!--一個橫列-->
      <td>(1,1)</td>
      <td>(2,1)</td>
    </tr>
    <tr>
      <td>(1,2)</td>
      <td>(2,2)</td>
    </tr>
</table>

簡略版

最基礎的表格長相

沒標題

沒隔線

沒欄位標題

沒表格尾

參考資料 - 更多表格設定

實作 

來做一個表格吧！(有時間的話)

必須包含圖片、名稱，需要表格、欄位標題

故宮博物院典藏資料

特展 - 愛硯成痴

body tags - select

<select>
  
  <option></option>
  
  <option></option>
  
</select>

基礎長這樣

下拉式選單

<select> 屬性

  name=" " 宣告欄位名稱

  disabled 禁用欄位，不用放屬性值

  required 必填欄位，不用放屬性值

  size=" " 表示一次顯示多少個選項給使用者看

  multiple 可多選的欄位，不用放屬性值

<select> 包住整個選單內容

<option> 為各個選項

body tags - select

參考資料 - 更多選單設定

<option> 屬性

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

  selected 預設選項，沒有設定的話默認為第一個選項，不用放屬性值。

  label=" " 用來說明選項，有設定時會替代選項文字。

  disabled 將選項設為不能選取，不用放屬性值。

 

<optgroup label=" "></optgroup> 選項分區

屬性 label=" " 設定分區名稱。 

body tags - form

參考資料 - 更多表單設定

表單 form，會回傳資料給伺服器 (後端)

<form> 屬性：一些針對表單的詳細設定

  action=" " 指定一個位址 (URL)，表示使用者送出表單後，要將內容送去哪。

  method=" " 指定資料傳輸用的 HTTP 協議，通常有 get 和 post 兩種。(詳細內容看參考資料，但暫時不會用到。)

  target=" " 指定瀏覽器要在哪裡顯示表單送出後伺服器回應的結果，如介紹連結的 target 屬性相同。

    _self：預設值，在當前視窗開啟

    _blank：在新視窗開啟

  autocomplete=" " 指定這個表單的欄位，是否可以使用瀏覽器自動填寫功能。

    on/off：是 (預設值) /否

body tags - form

參考資料 - 更多表單設定

<form> 元素：裡面可以放的元素們

  <input> 輸入欄位，為空元素，不須結束標籤。

  屬性：

  type=" " 欄位的種類，以下列舉幾種常見的屬性值。

    text：文字輸入欄位

    password：密碼輸入欄位

    checkbox：核取方塊

    radio：選項按鈕

    submit：送出表單按鈕

  value=" " 通常每一個 type 屬性的屬性值都可以搭配 value 屬性，例如 text 的 value 屬性的值就代表輸入框裡的預填文字，或者 button 的 value 就會代表按鈕上的名稱。

  

參考資料 - 更多 <input> 設定

body tags - form

參考資料 - 更多表單設定

<form> 元素：裡面可以放的元素們

  <textarea> 可以輸入多行文字的欄位，有結束標籤，起始與結束標籤之間可設定預設文字。

  屬性：

  rows=" " 一個整數，指定輸入框的高 (列數)。

  cols=" " 一個整數，指定輸入框的寬 (行數)。

  <select>、<option> 可以在表單內放入下拉式選單，設定如前面所述下拉式選單相同。

  <label> 欄位名稱，需要結束標籤。

body tags - form

參考資料 - 更多表單設定

表單元素可以用的屬性：

  name=" " 定義該欄位以什麼名稱回傳資料，伺服器可以透過名稱，取出對應的欄位值。

  autofocus 布林屬性，表單開啟後，直接將游標放 (聚焦 focus) 在該欄位。

  disabled 布林屬性，禁用該元素。

  value=" " 欄位預設。

<form>
    <input type="button" value="I am a button"><br><br>
    <input type="datetime" value="2024/10/24" autofocus><br><br>
    <input type="checkbox">checkme<br><br>
    <input type="password"><br><br>
    <input type="date"><br><br>
    <input type="week"><br><br>
    <select>
      <option>I am a cat</option>
      <option>I am a dog</option>
    </select>
 </form>

小實作

參考資料 - 更多表單與 type 相關的屬性設定

幫建北電資做一個放學聯課報名表單。

至少包含：姓名、課程選單、日期選擇、表單送出鍵。

延伸資料：可以試試看這個設定電話號碼。

時間：20min

大概長這樣

body tags - container

容器元素，用來包住 HTML 的部分區塊，針對其調整不同設定。

  <div> 區塊容器元素，需要結束標籤，功用是包覆其他 HTML 元素，針對特定區塊的元素進行調整，便於 CSS 與 JS 的設定。

  <span> 行內容器，與 <div> 不同的是，<span> 用來包文字，其餘設定大致相同。

  

body tags

參考資料 - HTML 標籤大全

更多 Tags 有興趣可以多看看！

HTML 部分結束啦。

CSS 語法

  • 階層樣式表
  • 控制外觀與排版
  • 為結構式文件添加樣式

CSS 簡介

cascading style sheets

開啟 CSS 檔

 

HTML 副檔名 .html

CSS 副檔名 .css

JavaScript 副檔名 .js

 

記得要打副檔名！！！！！！

忘記怎麼在 VSCode 建立檔案請回顧簡報

引入 CSS 

將 CSS 檔案連結至 HTML 檔

  • 建立 .css 檔
  • 在 HTML 的 head 標籤中連結 .css 檔
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="hello.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.....</title>
</head>
<body>
</body>
</html>

方法一

建議使用

引入 CSS 

方法二

  • 在 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>.....</title>
    <style>
        body{
            background-color: black;
        }
    </style>
</head>
<body>
    
</body>
</html>

引入 CSS 

方法三

  • 在 HTML 標籤內加入style
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.....</title>
</head>
<body>
    <h1 style="font-size: 12px;">ha ha ha</h1>
</body>
</html>

CSS 語法

selector{
	property:value;
}

選擇器 Selector：選擇 HTML 元素

屬性 Property

屬性值 Value

一些不是很重要的名詞...

  • 宣告塊(Declaration Block)
  • 一個宣告塊裡面包含數個宣告(Declaration)
  • 一個宣告由 屬性 + 屬性值 組成

CSS 語法

selector{
	property:value;
}

屬性 Property

補充奇怪小知識

還記得學 HTML 的時候也有 "屬性" 嗎？

差別是什麼？

英文不一樣 "attribute"？ "property" ？

CSS 語法

selector{
	property:value;
}

屬性 Property

=> HTML attributes are applied to a individual element, and provide additional information about a particular element. On the other hand, CSS properties help define a web page's overall layout, i.e., designing more than one element at a time.

沒有查到中文的，不過英文解釋很清楚

參考資料 - Difference between html attributes and css properties

CSS 語法

selector{
	property:value;
}

屬性 Property

還記得學 HTML 的時候也有 "屬性" 嗎？

差別是什麼？

英文不一樣 "attribute"？ "property" ？

簡而言之，attribute 為單一的 HTML 元素提供額外資訊，property 可為多個元素提供樣式。

CSS 語法 - selector

selector{
	property:value;
}

選擇器，用來選取要添加樣式的元素，選擇一個或多個元素。

CSS 語法 - selector

符號 選取方式 語法 名稱
* 就是選取全部元素的意思 * 通用選擇器
# 選取 ID 為對應名稱的元素，通常只能選一個元素 # ID 名稱 ID選擇器
. 選取對應 Class 名稱的元素，可以放在多個元素上 . Class 名稱 Class選擇器
選擇該元素，前面不放任何符號 elements (p. h1. h2......) 元素選擇器

字典

tag 標籤

elements 元素

 

CSS 語法 - selector

<body>
    <h1 class="cute">貓咪好可愛</h1>
    <h2 id="so cute">真的好可愛</h2>
</body>

標籤內加上 class 或 ID 名稱

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

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

CSS 語法 - selector

語法 說明
A B 選擇 A 元素內所有元素 B
A > B 選擇包在 A 元素裡面第一層的 B 
AB 選擇 A 且 B
A,B 選擇 A 或 B
A~b 選擇 A 後面所有與 A 同輩的元素 B

A、B 分別為兩個不同選擇器

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

(一四小卡學姊發現的酷遊戲)

複合選擇器

CSS 語法 - selector

<body>
  <div class="cute">
    <h1>貓咪好可愛</h1>
  	<p>貓咪好可愛</p>
    <p>貓咪好可愛</p>
    <div>
      <p>貓咪好可愛</p>
    </div>
  </div>
</body>
.cute p{
  color:blue;
}

A B：選擇 A 元素內所有元素 B

有空格

CSS 語法 - selector

.cute > p{
  color:blue;
}
<body>
  <div class="cute">
    <h1>貓咪好可愛</h1>
  	<p>貓咪好可愛</p>
    <p>貓咪好可愛</p>
    <div>
      <p>貓咪好可愛</p>
    </div>
  </div>
</body>

A > B：選擇 A 元素內所有第一層的元素 B

CSS 語法 - selector

p.cat{
  color:blue;
}
<body>
  <div class="cute">
    <h1>貓咪好可愛</h1>
  	<p class="cat">貓咪好可愛</p>
    <p>貓咪好可愛</p>
    <div>
      <p>貓咪好可愛</p>
    </div>
  </div>
</body>

可以是

class + class

Tag + class (有 Tag 一定要在前面)

id + class (比較少用)

兩個選擇器中間沒有空格

AB：選擇 A 且 B

CSS 語法 - selector

h1,.cat{
  color:blue;
}
<body>
  <div class="cute">
    <h1>貓咪好可愛</h1>
  	<p class="cat">貓咪好可愛</p>
    <p>貓咪好可愛</p>
    <div>
      <p>貓咪好可愛</p>
    </div>
  </div>
</body>

A,B：選擇 A 或 B

CSS 語法 - selector

h1~p{
  color:blue;
}
<body>
  <div class="cute">
    <h1>貓咪好可愛</h1>
  	<p class="cat">貓咪好可愛</p>
    <p>貓咪好可愛</p>
    <div>
      <p>貓咪好可愛</p>
    </div>
  </div>
</body>

A~B：選擇 A 後面所有與 A 同輩的元素 B

CSS 語法 - selector

A、B 分別為兩個不同選擇器

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

再看一次表格

語法 說明
A B 選擇 A 元素內所有元素 B
A > B 選擇包在 A 元素裡面第一層的 B 
AB 選擇 A 且 B
A,B 選擇 A 或 B
A~b 選擇 A 後面所有與 A 同輩的元素 B

CSS 語法 - selector

語法 說明
S[attr] 選擇有特定屬性的元素。
S[attr=val] 選擇有特定屬性並且指定其屬性值的元素。
S[attr~=val] 選擇有指定屬性，並且屬性值 "包含" 指定完整值的元素。
S[attr^=val] 選擇有特定屬性，且屬性值 "開頭" 為指定內容的元素。
S[attr$=val] 選擇有特定屬性，且屬性值以指定內容 "結尾" 的元素。
S[attr*=val] 選擇有指定屬性，且屬性值 "包含" 部分指定內容的元素。

與 attribute 和 value 有關的選擇器 (HTML)

S => selector, attr => attribute, val => value

參考資料 - CSS 選擇器

CSS 語法 - 偽類 & 偽類選擇器

偽類選擇器 條件
:hover 滑鼠滑過該元素時。
:visited 在瀏覽器歷史紀錄中已拜訪過的連結。
:link 在瀏覽器歷史紀錄中尚未點擊過的連結。
:active 滑鼠點擊該元素時。
:focus 當元素得到焦點 (Focus) 時。

偽類 (pseudo class)，當元素在特定條件下，CSS 設定才會成立，否則一般狀態下不會呈現。

偽類選擇器就是選擇偽類的選擇器。

參考資料 - CSS 選擇器

通常偽類以 '：' 符號開頭

用法與一般的 Class 類似，只是在特定條件下才會生效

CSS 語法 - 偽類 & 偽類選擇器

介紹一個偽類選擇器 :target，一個沒教過的 HTML 寫法！

參考資料 - CSS 選擇器

一次出現一堆不認識的名詞了呢！

定義：當瀏覽器網址的 # 錨點與元素 id 相同時產生效果。

錨點：'#' 開頭加上 id 名稱

href="#idname" 在網頁內達到跳轉到某部分的效果。

<a href="#p1">
   <button class="b">我是按鈕</button>
</a>

<h1>這是一篇文章</h1>
<p id="p1">我是第一個段落</p>
<p id="p2">我是第二個段落</p>
.b:hover{
  color: rgb(223, 139, 12);
}
:target{
  background-color: rgb(254, 223, 99);
}

以上為常用的偽類選擇器，餘下部分參考資料有詳細說明建議大家看看，寫得很清楚應該看得懂。

文字顏色

背景顏色

CSS 語法 - 偽元素 

偽類 條件
::before 在原始元素前新增一個偽元素
::after 在原始元素後新增一個偽元素
::first-letter 原始元素的第一個字
::first-line 原始元素的第一行

必須建構在已存在的元素上

before、after必須包含屬性 content

參考資料 - CSS 偽元素

通常偽類元素以 ' :: ' 符號開頭

CSS 語法 - 複習

selector{
	property:value;
}

選擇器 Selector：選擇 HTML 元素

屬性 Property

屬性值 Value

CSS 語法 - property

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

參考資料 - CSS properties

CSS 語法 - property

相對單位：

em 相對該元素本身文字大小的值。(常用)

ex 通常與字體 x 高度相同，有些字體會標註 ex 大小。

vh 螢幕高的百分比

vw 螢幕寬的百分比

參考資料 - em 使用技巧

 長度單位

絕對單位：

in 英吋

cm 公分

mm 毫米

pt point，1pt = 1/72 in

pc picas，1pc = 12pt

px pixel units，1px = 0.75 pt 

font-size

CSS 語法 - box model

margin：元素外部的間距，可以為負值，但會與其它元素重疊。

border：框線將內容包在裡面。

padding：元素內部的間距，不能為負。

content：內容任何 HTML 元素。

CSS 語法 - box model

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

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

.cat{
      /* 上下左右 */
  margin:20px;
  	   /*上下 左右 */
  margin:20px 30px;
       /* 上 右 下 左 */
  margin:20px 30px 40px 50px;
  		/* 上 左右 下 */
  margin:20px 30px 40px;
  
}

CSS 語法 - 通用屬性

border-width ： 填數值

border-radius ： 圓角 (也有分上下左右)填長度

border-style ： 框線樣式

border ： 寬度 樣式 顏色

border 框線設定

CSS 語法 - 通用屬性

參考資料 - display

display 顯示模式設定

HTML 元素分為區塊元素與行內元素，可以透過 display 屬性改變其原來的顯示模式。

display：樣式；

inline 行內樣式，不可設定長寬，元素可在同一行呈現。

block 區塊樣式，可設定長寬，但仍會占滿一整行。

inline-block 行內區塊樣式，可設定長寬，但同時有 inline 的設定，可水平排列。

flex 適應不同螢幕尺寸。

CSS 語法 - 通用屬性

position 位置設定

position : 定位方式 ;

  static 依照預設。

  relative 依照原來位置可以根據上下左右屬性調整。

  absolute 依照最近的父層空間定位。

  fixed 相對瀏覽器窗口固定，即使滾動窗口也不改變位置。

  (top/bottom/left/right)

CSS 語法 - text & font

text-align : ( left / right / center ) 段落置中、置左、置右

line-height 行高，可填長度單位、百分比。

font-size 字體大小，可填預設關鍵字、長度單位、百分比。

font-weight 字體粗細

color 字體顏色，可填 RGB、色碼、顏色。

font-family 字型，可以指定多個字形，以逗號分隔。

letter-space 字元間距

text-decoration 字元樣式

font-weight

  • normal：也就是預設字體厚度，其實可以不用特別寫出來。
  • bold：常用的粗體字。
  • bolder：比粗體更粗一點。
  • lighter：比一般字體更細。
  • 100~900：數字越大越厚。

網頁設計資源 - 配色網站

網頁設計資源 - google fonts

CSS 語法 - background

background-color: 設定背景顏色

background-image:

  url(" ") 背景圖片，內填URL，可是設定一張以上圖片。

  linear-gradient("to 目標方向, 起始色彩, 結束色彩") 線性漸層

background: 簡寫以上兩種設定。

background-repeat: 圖片重複

  repeat (預設值)/no-repeat/......

background-size: 圖片大小

background-position:圖片位置

參考資料 - background-image

參考資料 - background-repeat

參考資料 - background-size

參考資料 - background-position

CSS 語法 - background

參考資料 - background-image

參考資料 - background-repeat

參考資料 - background-size

參考資料 - background-position

body{
  background-image: url("tableCat.jpg");
  background-repeat: no-repeat;
  background-size: 50vh ;
  background-position:center;
        }

較完整的背景設定

小實作

還記得上次的實作嗎？請針對你上次實作課的作品，調整菜單排版，不要讓物件都擠在同一邊，調整圖片對齊大小。

請善用 div ！！！

RWD 

響應式網頁設計 Responsive Web Design

  • 網頁在不同裝置上都可以呈現的很合理
  • 便於使用者操作
  • 在每個裝置上用同一個網址呈現不同排版

RWD

維基百科

Grid

Grid

.container{
  display:grid;
  colum-gap:2vh;
  grid-template-columns:20vw 40vw 20vw;
  grid-template-rows:20vw 30vw 40vw;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Media Queries

CSS 3 以後出現的 @Media 針對不同裝置提供對應樣式

網頁會先詢問媒體屬性，在針對不同的媒體呈現不同樣式

邏輯式的判斷，根據媒體是否符合條件來套用樣式

Media Queries

使用 media 的方法

HTML：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

在視窗 "screen" 的時候使用 style.css

列印 "print" 則使用 print.css 

Media Queries

使用 media 的方法

CSS：

@media screen{
	// 樣式寫這裡
}
@media print{
	// 樣式寫這裡
}

在視窗 "screen" 的時候使用 style.css

列印 "print" 則使用 print.css 

Media Queries

使用 media 的方法

@import

@import "style.css" ;
@import "print.css" print ;

在視窗 "screen" 的時候使用 style.css

列印 "print" 則使用 print.css 

Bootstrap

官網

中文版網站

Bootstrap

  • 用於網站前端開發的開源框架
  • 提供各式元件及擴充套件

Bootstrap

Bootstrap

引入 (Bootstrap 5 版本)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

CSS 引入，放在 head 裡面

JS 引入，放在 body 結束之前

都寫在 HTML 檔裡面

Bootstrap

Button

有預先定義好的樣式，對照範例看

Bootstrap

Button

概念是幫你寫好一堆 Class 只要套上去就好

Class 特性：

.btn 通常和 button 元素一起用，但也可以套在一些不是 button 的地方，以達到相同的視覺效果。

.btn- 原始的按鈕樣式

.btn-outline- 去除背景色

.btn-lg/sm 調整大小 large/small

*註：一個元素可以套用多個 class 用空格區隔

Bootstrap

Bootstrap 裡的網格系統 (Grid)

columns & rows

以 12 個 columns 為基礎單位，以比例的方式調整寬度

row

row

row

12 columns

Bootstrap

一個 row 裡面有多少 col 就自動平分寬度

.row .col 就是 Bootstrap 內建表示 row & column 的 class

<div class="container"> <!--container 是 Bootstrap 裡面的容器 class -->
  <div class="row"> 
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Bootstrap

.col-數字 可以用比例分配寬度 (算數學時間)

.col-6 (6/12 = 1/2)

.col-3(3/12 = 1/4)

col-6

col-3

Bootstrap

.col-數字 可以用比例分配寬度 (算數學時間)

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Bootstrap

Bootstrap 裡的網格系統 (Grid)

有點像條件判斷，當裝置視窗到達特定寬度，就將排列方式設定為......

Bootstrap

段典範歷

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

達到斷點後，排列方式由堆疊(垂直)改成水平排列

此處斷點為 sm

Bootstrap

段典範歷

<div class="container">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

可以設置多個排列方式，在不同斷點呈現不同排列

到達斷點 md 後改為不同排列比例

Bootstrap

段典範歷

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

.row-cols-數字 一列放幾個

.row-cols-4 => 一列分四個等分 (一個佔 3/12 寬)

col-6 在一列裡可佔兩個 .col 寬度

Bootstrap

offset-   向左空出欄位

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

.row-cols-數字 一列放幾個

.row-cols-4 => 一列分四個等分 (一個佔 3/12 寬)

col-6 在一列裡可佔兩個 .col 寬度

CSS 動畫

轉場：在不同外觀(屬性)轉變之間的動畫

Transition

在 CSS 裡面常用在偽類的轉換上

還記得偽類 & 偽類選擇器嗎???

CSS 語法複習 - 偽類 & 偽類選擇器

偽類選擇器 條件
:hover 滑鼠滑過該元素時。
:visited 在瀏覽器歷史紀錄中已拜訪過的連結。
:link 在瀏覽器歷史紀錄中尚未點擊過的連結。
:active 滑鼠點擊該元素時。
:focus 當元素得到焦點 (Focus) 時。

偽類 (pseudo class)，當元素在特定條件下，CSS 設定才會成立，否則一般狀態下不會呈現。

偽類選擇器就是選擇偽類的選擇器。

參考資料 - CSS 選擇器

通常偽類以 '：' 符號開頭

用法與一般的 Class 類似，只是在特定條件下才會生效

動畫的兩個屬性設定：

transition

button{
  width: 15vh;
  height: 10vh;
  background-color: antiquewhite;
}
button:hover{
  background-color:rgb(223, 139, 12);
	width: 20vh;
    height: 15vh;
}

原始屬性設定

觸發條件後

transition 的目的是要讓不同屬性之間轉換更流暢

transition

transition-property 要轉場的屬性 (必填)

transition-duration 轉換持續時長，單位 s、ms 

transition-delay 延遲時長 (延遲多久後開始轉換)，單位 s、ms

transition-timing-function 轉換時的速度曲線，預設 ease

圖片來源

transition

簡寫較常用

transition : property duration timing-function delay

transition-timing-function： cubic-bezier(n, n, n, n)

0<= n <= 1，利用貝茲曲線調整

可以用這個網址玩玩看 cubic-bezier.com

transition

簡寫

transition : property duration timing-function delay

button{
  width: 15vh;
  height: 10vh;
  background-color: antiquewhite;
}

button:hover{
  background-color:rgb(223, 139, 12);
  width: 20vh;
  height: 15vh;
  transition: background-color 3s, width 3s, height 3s;
}

屬性一個一個寫很麻煩 不簡潔的簡寫

可以用 All 代替

transition

button{
  width: 15vh;
  height: 10vh;
  background-color: antiquewhite;
}

button:hover{
  background-color:rgb(223, 139, 12);
  width: 20vh;
  height: 15vh;
  transition: all 3s;
}

用 all 代替

乾淨漂亮多了

順帶一提，不是所有屬性都可以transition

transition

button{
  width: 15vh;
  height: 10vh;
  background-color: antiquewhite;
  transition: all 3s;
}

button:hover{
  background-color:rgb(223, 139, 12);
  width: 20vh;
  height: 15vh;
}

轉場結束後轉換回來有點生硬

transition 寫在原本的選擇器裡面

transition

button{
  width: 15vh;
  height: 10vh;
  background-color: antiquewhite;
  transition: all 1s linear;
}

button:hover{
  background-color:rgb(223, 139, 12);
  width: 20vh;
  height: 15vh;
  transition: all 3s ease;
}

兩次轉場可以不一樣

寫在原本的選擇器裡面是回來的轉場

寫在偽類選擇器裡面是出去的轉場

transition

提醒：

transition 在轉換時屬性值必須是明確的數值對數值的轉換

transition 必須有事件觸發，例如偽類或者 JS 的事件處理

Animation

  • 更細節的動畫
  • 不用觸發器
  • 用 keyframe 來觸發動畫

keyframe 關鍵影格

在平滑的動畫中定義關鍵動作的影格(幀)

Animation

用 @keyframe 寫動畫步驟

@keyframes animation-name{
  keyframes-selector{
    CSS-style
  }
  keyframes-selector{
    CSS-style
  }
}

animation-name 動畫命名

keyframes-selector 動畫選擇器 0%-100% or from-to

Animation

用 @keyframe 寫動畫步驟

@keyframes animation-name{
  from{
   width: 10vw;
  }
  to{
    width: 50vw;
  }
}

animation-name 動畫命名

keyframes-selector 動畫選擇器 0%-100% or from-to

Animation

用 @keyframe 寫動畫步驟

@keyframes animation-name{
  0%{
   width: 5vw;
  }
  20%{
    width: 50vw;
  }
  100%{
    width: 80vw;
  }
}

animation-name 動畫命名

keyframes-selector 動畫選擇器 0%-100% or from-to

Animation

animation-name 動畫名稱

animation-duration 動畫播放時長

animation-delay 延遲

animation-timing-function 播放速度曲線

以上屬性與 transition 同

Animation

animation-timing-functions:

-steps(num, start/end)

  num 為大於零正整數

  把動畫分段，一幕一幕的感覺

-step-start

  一開始直接跳到100%

-step-end

  保持 0% 直到最後的時刻跳到 100%

Animation

animation-iteration-count 播放次數，預設1

  number 

  infinite 連續播放

animation-direction 動畫播放方向，預設 normal

  normal 0% -> 100%

  reverse 100% -> 0%

  alternate 正逆輪流播放

  alternate-reverse 同樣輪流播放，由逆向開始

Animation

animation-fill-mode 動畫播放前後狀態，預設 none

  none 播放結束後回到最初狀態

  forwards 播放結束後呈現最後一個影格狀態

  backwards 播放結束後呈現第一個影格狀態

animation-playing-state 動畫播放、暫停，預設 running

  running

  pause

Animation-小實作

進度條動畫

由左往又拉進度條，還記得怎麼搞漸層可以用一個

類似像這樣 範例

clip-path

clip-path: polygon() 用座標等方式畫出想要的幾何圖形

沒有要在這裡教數學或玩三角函數

所以我們還是來善用工具

filter

filter: method(value)

 blur 模糊，填數值 (數字加單位)

 brightness 明度，百分比

contrast 對比度，百分比

grayscale 灰階，0~1

opacity 透明度，百分比

drop-shadow 陰影，對圖片非透明區域加陰影

......

backdrop-filter

 

對元素背後的背景作濾鏡

backdrop-filter: method(value);

可以用的濾鏡跟 filter 相同

 

Made with Slides.com