Html & CSS note

作者:

HTML：Web 內容的基礎

HTML（超文本標記語言）是所有網頁的支柱。它會建構文字、圖像和媒體等內容，定義元素在瀏覽器中的顯示方式。

CSS：網頁樣式

CSS（層疊樣式表）透過定義網頁的視覺佈局來增強 HTML。

JavaScript：讓網頁栩栩如生

JavaScript 為 HTML 的靜態結構引入了功能性和互動性。

Web 可訪問性

鍵盤導航：確保所有互動元素（例如選單、表單和按鈕）均可透過鍵盤導航。這可幫助行動障礙人士與網站充分互動。

螢幕閱讀器相容性：語意 HTML 和 ARIA 屬性可協助螢幕閱讀器準確解釋內容，進而改善視障用戶的體驗。

文字替代：為圖像和標題提供替代文本，或為多媒體內容提供文字記錄，確保所有資訊均可訪問，即使對於無法與視覺或音頻元素互動的人也是如此。

顏色對比：文字和背景之間適當的顏色對比有助於視障使用者。 WCAG 建議標準文本的對比為 4.5:1。

可見性和焦點：CSS 可以在互動元素（例如按鈕）處於焦點狀態時突出顯示它們。這有助於依賴鍵盤導航的使用者更輕鬆地與內容互動。

響應式文字和佈局：使用相對單位（em、rem）設定文字大小，並使用 Flexbox 和 Grid 等 CSS 工具進行靈活佈局，內容可以很好地適應不同的裝置和螢幕尺寸，從而增強可讀性和可用性。

Emmet 語法 

產生結果範例 

說明 

! + Tab 

基本 HTML 頁面結構 

一鍵生成完整的 <html>, <head>, <body> 結構。 

.className + Tab 

<div class=”className”></div> 

快速建立帶有指定 class 的 div。 

#idName + Tab 

<div id=”idName”></div> 

快速建立帶有指定 id 的 div。 

tag.className + Tab 

p.intro -> <p class=”intro”></p> 

為指定 Tag 建立 class。 

tag#idName + Tab 

div#main -> <div id=”main”></div> 

為指定 Tag 建立 id。 

> (子層) + Tab 

ul>li>p + Tab 

建立巢狀（子層）的 HTML 結構。<ul><li><p></p></li></ul> 

+ (兄弟層) + Tab 

div+h1+h2 + Tab 

建立平級（兄弟層）的 HTML 結構。<div></div><h1></h1><h2></h2> 

* (重複) + Tab 

ul>li*5 + Tab 

建立重複的 Tag 元素。<ul><li></li><li></li><li></li><li></li><li></li></ul> 

{} (文字內容) + Tab 

li{這是清單} + Tab 

在 Tag 內部填入指定文字。<li>這是清單</li> 

$ (編號) + Tab 

li{清單編號：$} + Tab 

自動生成編號，每個重複元素遞增。<li>清單編號：1</li><li>清單編號：2</li>… 

$@-(編號降冪) + Tab 

li{編號：$@-} + Tab 

編號從大到小遞減。<li>編號：5</li><li>編號：4</li>… 

[] (輸入屬性) + Tab 

a[href=”www” target=”_blank”] + Tab 

為 Tag 加入屬性及其值。<a href=”www” target=”_blank”></a> 

這些是構成網頁內容的基礎 building blocks !

標題： 

<h1> 到 <h6>：定義文章標題，數字越小字體越大 (例如 <h1> 最大，<h6> 最小)。 

文字段落： 

<p> </p>：用來包裝獨立的文字段落。 

清單： 

<ul> </ul> (Unordered List)：無序清單，項目符號通常是圓點。 

<ol> </ol> (Ordered List)：有序清單，項目符號通常是數字或字母。 

<li>  </li> (List Item)：清單中的單個項目，必須放在 <ul> 或 <ol> 裡面。 

強調語氣 / 斜體： 

<em> </em> (Emphasis)：語氣上的強調，通常顯示為斜體。 

<strong> </strong> (Strong Importance)：內容上的重要強調，通常顯示為粗體。 

<i> </i> (Italic)：純粹的斜體顯示，沒有語義上的強調。 

換行： 

<br> </br> (Break)：強制文字換行，無需新段落。 

水平線： 

<hr> </hr>(Horizontal Rule)：顯示一條水平分隔線。 

超連結： 

<a> </a> (Anchor)：用於創建超連結。 

href=”” 屬性：指定連結的目標 URL。 

圖片： 

<img> </img> (Image)：用於在頁面中嵌入圖片。 

 <video> </video> : 嵌入視頻。

src=”” 屬性：指定圖片檔案的路徑。 

alt=”” 屬性：圖片無法顯示時的替代文字，對 SEO 和無障礙設計很重要。 

區域容器： 

<div> </div>(Division)：區塊 (Block) 容器，會獨佔一行，通常用於組織和分組大型內容區塊。 

<span> </span>(Span)：行內 (Inline) 容器，不會獨佔一行，通常用於包裹一小段文字或行內元素，以便應用樣式。 

<body> ：包含頁面上所有可見的內容，例如文字、圖片和連結。使用者在網頁上看到的所有內容都位於 <body> 標籤內。

<section> ：將相關內容歸類到特定標題下。

<article> ：表示獨立的內容，例如部落格文章或新聞文章。

<nav> : 組織您網站的導覽連結。

<main>: 定義頁面的主要內容。

<footer> : 在頁面底部新增版權資訊、聯絡資訊或社群媒體連結。

用於有行列顯示需求的數據 !

<table> </table>：整個表格的容器。 

<tr> </tr> (Table Row)：代表表格中的一行，用來包裹 <th> 或 <td>。 

<th> </th> (Table Header)：表格的標題單元格，通常會粗體並置中顯示。 

<td> </td> (Table Data)：表格的資料單元格，放置具體的數據。 

用於收集用戶資料，並將數據提交到伺服器 !

<form> </form>：整個表單的容器。 

<label> </label>：為表單輸入控件提供標籤，點擊 label 會聚焦到相關的輸入框，提升使用者體驗。通常搭配 for=”” 屬性與輸入框的 id 關聯。 

<input> </input>：各種形式的輸入控件，type 屬性決定其功能和外觀。 

type=”text”：標準的文字輸入框。 

type=”password”：密碼輸入框，輸入的內容會自動隱藏 (例如顯示為星號或圓點)。 

placeholder=”提示文字”：在輸入框空白時顯示的提示文字。 

type=”color”：顏色選擇器，提供一個調色盤讓用戶選擇顏色。 

type=”radio”：單選按鈕，通常以小圓點顯示，多個選項中只能選擇一個 (透過設定相同的 name 屬性來分組)。 

type=”submit”：送出按鈕，點擊後會提交表單數據。 

<select> </select> 標籤 (下拉選單筆記本)：下拉選單裡面的每一個選項，需要用 <option> </option> 標籤來定義。 

使用 <form> 標籤收集用戶資料。例如：

<form action=”submit.php” method=”POST”>

    <input type=”text” name=”username” placeholder=”Enter your name”>

    <input type=”email” name=”email” placeholder=”Enter your email”>

    <button type=”submit”>Submit</button>
<button type=”submit”>提交</button>

</form>

  • 定義 action 屬性來指定表單資料提交到哪裡，並使用 POST 方法確保安全的資料傳輸。

<textarea> </textarea> 標籤 (專門的多行文字筆記本)：可以透過 rows (行數)和 cols (列數、字元寬度)屬性來設定，還有透過placehold來設定懸浮文字。

範例: 

<label for=”feedback”>您的意見：</label> 

    <textarea id=”feedback” name=”user_feedback” rows=”5″ cols=”30″  placeholder=”請輸入您的意見”>

    </textarea> 

一個 element 可以有無數個 class 可是只能有一個 id  !!!

Id= #idName        口訣： 唯一識別，精準操作，頁內跳轉。 

Class =.className 口訣： 重複樣式，群組操作，狀態切換。 

name =”value”        口訣： 表單必備，數據命名，單選分組。 

CSS 讀取的優先順序為：  

行內樣式 (Inline Style) 

: 直接寫在 HTML 標籤的 style=”” 屬性裡的樣式，擁有最高的優先順序。 

ID 選擇器 (#) 

: 透過元素的 id 屬性選取的樣式，優先順序第二高。 

類別選擇器 (.) / 屬性選擇器 ([]) / 偽類 (:)   

: 透過元素的 class 屬性、其他屬性，或元素狀態選取的樣式，優先順序第三高。 

當有特殊狀況時，只需加上 !important 就可以強制覆蓋 element 內的 style 了。

1.inline用法，直接在HTML加上屬性 style 

<div style=”color:red”> hello </div>   

2.Tag用法，可以指定內容的添加屬性 

<style　type = “text/css”> 

    h1{ 
        color:red; 
    }    

    h2{ 
        color:blue; 
    }

</style> 

3.Link Tag用法，在相同根目錄建立一個 name.css 檔案，檔案只需要放入指定內容的添加屬性即可，不用另外放標籤，然後在html檔案內使用link標籤，就可以將整個檔案都套用css設定的屬性 

.css檔案 

h1{ 
    color:red; 
    }    
h2{ 

    color:blue;
    } 

Html檔案 (放入<head></head區塊內) 

<link rel = “stylesheet” type=”text/css” href=”name.css> 

rel = ” “ (Relationship) 可使用的其他定義值:

stylesheet: 表示被連結的資源是一個樣式表。瀏覽器會下載這個檔案，並將其中的樣式應用到 HTML 文件上。 

icon 、shortcut icon： 表示被連結的資源是網站的圖標 (favicon)，也就是顯示在瀏覽器標籤頁、書籤、網址列旁邊的小圖標。 

alternate： 表示被連結的資源是當前文件的替代版本，例如不同語言的版本、RSS Feeds 等。 

prev / next： 表示文件是系列中的上一頁/下一頁。 

preload / prefetch： 這是性能優化相關的值，告訴瀏覽器提前下載或預取某個資源，以提高頁面載入速度。 

 

type=” “ 可使用的其他定義值: 

text/css： 表示這個檔案是純文字格式的 CSS 樣式表。這是引入 CSS 檔案時的標準值。 

image/x-icon 、 image/vnd.microsoft.icon： 表示這個檔案是 ICO 格式的圖片（用於 favicon）。 

image/png： 表示這個檔案是 PNG 格式的圖片。 

application/json： 表示這個檔案是 JSON 格式的數據。 

application/javascript： 表示這個檔案是 JavaScript 代碼（通常用於 <script> 標籤，但在 <link rel=”preload”> 時也可能用到）。 

 

href (Hypertext Reference)=” ” 代表引用的路徑位置: 

相對路徑： 相對於當前 HTML 檔案的路徑。 

href=”name.css”：表示name.css檔案就在 HTML 檔案的同一個目錄下。 

href=”css/name.css”：表示檔案在 HTML 檔案所在目錄下的 css 資料夾裡。 

href=”../name.css”：表示檔案在 HTML 檔案所在目錄的上一級目錄裡。 

絕對路徑： 完整的網址，或者從網站根目錄開始的路徑。 

href=”https://example.com/styles/name.css”：一個完整的網路 URL。 

href=”/styles/name.css”：從網站的根目錄 (/) 開始的路徑。 

 

color的16進位表示法 (#000000;) : 

在數字前面加上# 

1~2位表示紅色  

3~4位表示綠色  

5~6位表示藍色 

可參考w3s網站 

 

color的 rgba表示法: 

格式為，rgba(0~255, 0~255, 0~255, 1 ); 

分別代表紅色、綠色、藍色、透明度 

 

Background 常用定義方式： 

background-color 顏色： 

顏色： red, blue, lightblue, black, white….。 

十六進位碼： #RRGGBB …..。 

RGB 值： rgb(red, green, blue)。 

RGBA 值： rgba(red, green, blue, alpha) 。 

範例：background-color: rgba(0, 0, 0, 0.5); (半透明黑色)。 

 

background-image 背景: 

url(‘圖片路徑’)：指定背景圖片的 URL 路徑。 

範例：background-image: url(‘images/bg.png’); 

none：不使用背景圖片。 

漸層 (Gradients)： 不是真正的圖片，但他也是 background-image 的一種值。 

linear-gradient(…)：線性漸層。 

radial-gradient(…)：放射性漸層。 

範例：

background-image: linear-gradient(<方向>, <顏色1> [色標點], <顏色2> [色標點], …);

background-image: linear-gradient(to top, red 50%, blue 10px, …);  

<方向> :to top, to bottom, to left, to right,deg (度數) 或 turn (圈數) 

[色標點]: 在顏色值後面加上一個百分比 (%) 或長度單位 (px, em 等)，表示該顏色在這個漸層軸上的位置。 

 

background Repeat 背景重複: 

repeat：預設值，圖片會水平和垂直方向重複，直到填滿元素。 

repeat-x：圖片只在水平方向重複。 

repeat-y：圖片只在垂直方向重複。 

no-repeat：圖片只顯示一次，不重複。 

round：圖片會重複並縮放，使其剛好能完整填充。 

space：圖片會重複並在圖片之間平均分配空間。 

 

background-position 背景位置 : 

top, bottom, left, right, center (可以組合，如 top right)。 

範例:

background-position: 50% 50%; (水平垂直都置中)。 

background-position: 10px 20px; (水平偏移 10px，垂直偏移 20px)。 

 

background-size 背景大小: 

auto：預設值，保持圖片原始大小。 

length：background-size: 100px 50px; (寬 100px, 高 50px)。 

percentage：background-size: 50% 100%; (寬度是元素寬度的 50%, 高度是元素高度的 100%)。 

cover：圖片會縮放以完全覆蓋元素，可能會裁剪圖片的某些部分。 

Contain：圖片會縮放以完全包含在元素內，保持圖片的完整性，可能會留下空白。 

 

background-attachment 背景附件: 

scroll：預設值，背景圖片隨元素內容一起滾動。 

fixed：背景圖片固定在視口 (viewport) 中，不隨頁面滾動。 

local：背景圖片隨元素內容區塊滾動 (與 scroll 相似，但更精確)。 

 

background-clip 背景剪裁 : 

border-box (預設，包含邊框), padding-box (只在內邊距區域), content-box (只在內容區域)。 

 

background 可以將多個屬性簡寫到同一個屬性內， 

順序通常是：

background: color image repeat attachment position / size origin clip; 

文字常用屬性設定:

font-family: “Microsoft YaHei”, “微軟正黑體”, sans-serif;
(用於定義文字字體，多字體可用逗號來間隔) 

font-size: px (可以改變字體的大小) 

font-size: 1em (文字大小可以根據其父元素動態調整1em=1倍) 

font-size: 1rem(文字大小只根據根目錄大小調整，預設16px) 

font-weight: 100; (字重的調整方式，100~800; 或是normal、bold)

line-height: 1; (定義行高) 

text-align: center; (定義對齊方式:left、right、center、justify、start、end) 

text-shadow: 5px 5px 5px red;  (文字陰影:左右偏移量、上下偏移量、模糊度、顏色) 

範例(多層疊加效果):

.long-shadow{ 
    color: #f0f0f0;  /* 文字本身的顏色，通常是淺色，讓陰影更明顯 */
        text-shadow:
            1px 1px 0 #333, 
            2px 2px 0 #333,
            3px 3px 0 #333,
            4px 4px 0 #333,
            5px 5px 0 #333;  
    }
 

text-decoration: none; (線條樣式) 

none (無裝飾)：這是最常用的值之一，特別是用來移除超連結預設的下劃線。 

underline (下劃線)、 overline (上劃線)、 line-through (刪除線 / 貫穿線) 

text-decoration-color (線條顏色) 

text-decoration-color: red; 

text-decoration-style (線條樣式)  

text-decoration-style: wavy;   

solid (實線，預設)、 double (雙實線)、 dotted (點線)、 dashed (虛線)、 wavy (波浪線) 

text-decoration-thickness (線條粗細) 

text-decoration-thickness: 2px; 

可以使用像素 px、em 等單位，或者 auto、from-font 。

可以將這些子屬性一起寫在 text-decoration 的簡寫中。
順序通常是 line color style thickness (雖然順序不嚴格，但這樣寫最清晰) 

響應式網頁佈局的步驟

    • Media 使用媒體查詢進行螢幕適配，根據裝置特性（如螢幕寬度）套用不同的樣式
    • 根據螢幕特性（寬度、高度）套用不同的樣式。
  • @media (max-width: 600px)
    • 例如，為行動裝置 （最大寬度：480px） 
    • 平板電腦 （481px 至 768px） 
    • 桌面螢幕 （769px 以上） 設定斷點 。

CSS 動畫和轉場

.button {

transition: background-color 0.5s ease;  # 背景顏色 0.5s，緩和轉場；

}

.button:hover {  

background-color: #333;    # 背景顏色

transform: scale(1.1);  # 放大比例 (1.1)

}

使用@keyframes 定義元素如何隨時間變化，例如移動或調整大小。

@keyframes slide {  

from { transform: translateX(0); }

to { transform: translateX(100px); }

}

.animated-element {

animation: slide 2s ease-in-out;  # 動畫：滑動 2 秒緩出

}

元素之間的結構關係 

逗號(,): 不是組合器，他的意思是「或者 (OR)」 ，當你想對多個不同的元素應用相同的樣式時，使用逗號可以避免重複撰寫 CSS 規則。 

div, p { color: blue; /* <div> 和 <p> 元素都會被選取 */ } 
<div>
    <p>這是 div 會被選取 p</p>
        <span>
            <p>這是 div 裡面的 span 裡面的 p 會被選取 </p>
       </span>

</div>
<p>這個 p 會被選取</p>

 

空格 ( ): 選取所有作為 A 元素的後代（子元素、孫元素、曾孫元素…）的 B 元素。 

div p { color: blue; /* 選取所有在 <div> 裡面的 <p> 元素 */ }
<div>
    <p>這是 div 裡面的 p</p>
        <span>
            <p>這是 div 裡面的 span 裡面的 p</p>
        </span>
</div>
<p>這個 p 不會被選取</p>

 

大於符號 (>)：選取所有作為 A 元素的直接子元素的 B 元素。 

ul > li { list-style-type: square; /* 選取所有作為 <ul> 的直接子元素的 <li> */ }
<ul>
    <li>這是 ul 的直接子元素</li>
    <li>這是 ul 的直接子元素
        <ul>
            <li>這個 li 不會被選取，因為它是內層 ul 的子元素</li>
        </ul>
    </li>
</ul>

 

加號 (+)：選取緊跟在 A 元素後面且與 A 元素有相同父元素的第一個 B 元素。 

h1 + p { margin-top: 0; /* 選取緊跟在 <h1> 後面的第一個 <p> 元素 */ } 

<h1>標題</h1>
<p>這段文字會被選取</p>
<p>這段文字不會被選取</p> 

 

波浪號 (~)：選取所有在 A 元素之後且與 A 元素有相同父元素的 B 元素（不限於第一個）。 

p ~ span { color: gray; /* 選取所有在 <p> 之後且與 <p> 有相同父元素的 <span> 元素 */ }
<div>
    <p>段落</p>
        <span>第一個 span 會被選取</span>
        <span>第二個 span 也會被選取</span>
        <em>em 元素 不會被選取</em>
        <span>第三個 span 也會被選取</span>
</div>

代表元素的特殊狀態或位置 ，它們就像在問：「這個元素現在是什麼狀態？」或「這個元素是不是第一個？」 

用戶行為偽類 (User Action Pseudo-classes)： 

用於增加元素的互動性和使用者體驗。 

:hover：滑鼠指標懸停在元素上時。 

範例： a:hover { color: red; } (滑鼠移到連結上變紅色) 

:active：元素被用戶激活時 (例如滑鼠點擊不放時)。 

範例： button:active { background-color: darkblue; } 

:focus：元素獲得焦點時 (例如點擊輸入框、使用 Tab 鍵切換到某元素時)。 

範例： input:focus { border-color: blue; } 

結構偽類 (Structural Pseudo-classes)： 

精確選取列表中、表格中或任何結構中的特定位置元素，常用於奇偶行變色、去除列表最後一個元素的邊框等。 

:first-child：作為其父元素的第一個子元素。 

範例： li:first-child { font-weight: bold; } (列表中的第一個項目變粗) 

:last-child：作為其父元素的最後一個子元素。 

範例： li:last-child { border-bottom: none; }(列表項目的底邊框被移除了) 

:nth-child(n)：作為其父元素的第 n 個子元素。n 可以是數字、關鍵字（odd 奇數, even 偶數）或表達式。 

範例： li:nth-child(2n) { background-color: #f0f0f0; } (奇偶行交替變色) 

:only-child：作為其父元素的唯一子元素。 

表單相關偽類 (Form-related Pseudo-classes)： 

根據表單元素的狀態改變其樣式。 

:checked：選取被選中的單選按鈕 (<input type=”radio”>) 或複選框 (<input type=”checkbox”>)。 

範例：  
css:
input[type=”checkbox”]:checked + label {
    color: green;
    font-weight:
    bold;
    }/* 當複選框被選中時，讓其後面的 label 文字變綠色並加粗 */ 
input[type=”radio”]:checked ~ .option-box {
    background-color: lightblue;
    border-color: blue;
    }/* 當單選按鈕被選中時，讓其父容器有藍色背景 */
html:
<input type=”checkbox” id=”agree”>
    <label for=”agree”>我同意服務條款</label>
<div> <input type=”radio” id=”opt1″ name=”choice” value=”1″>
    <label for=”opt1″>選項一</label>
        <div class=”option-box”>詳細描述一</div>
</div>

:disabled：選取處於禁用狀態（即有 disabled HTML 屬性）的表單元素。通常這些元素不能被點擊或編輯。 

/* 禁用狀態的輸入框顯示灰色背景，並禁用鼠標事件 */  

範例:
css:
input:disabled {
    background-color: #f0f0f0;
    color: #aaa;
    cursor: not-allowed;
    } 
html:
<input type=”text” value=”這是可用的” enabled>
<input type=”text” value=”這是禁用的” disabled> 

:enabled：選取處於可用狀態（即沒有 disabled HTML 屬性）的表單元素。 

範例:
css:
input:enabled:focus {
    border-color: blue; /* 可用的輸入框在獲得焦點時邊框變藍 */  
    outline: none;   /* 移除預設的藍色外框 */
    } 

:read-only (唯讀)：只有讀取功能，設定了 readonly屬性的輸入框或文本區。 

範例:
css:
input:read-only {
    background-color: #f8f8f8;
    border-style: dashed;
    color: gray;
    } 
html:
<input type=”text” value=”可編輯的輸入框”>
<input type=”text” value=”只讀的輸入框” readonly> 

:required (必填)：必須填寫的功能，設定了 required HTML 屬性的表單元素。 

範例:
css:
input:required {
    border-left: 5px solid red; /* 必填欄位左側顯示紅色邊條 */
} 
html:
<input type=”text” placeholder=”選填”>
<input type=”text” placeholder=”必填” required> 

:valid (有效)：內容符合其類型（例如 type=”email” 但內容不是郵箱格式）或 pattern 屬性定義的合法格式的表單元素。 

範例:
css:
input:valid {
    border-color: green;   /* 合法內容顯示綠色邊框 */
    } 
html:
<input type=”email” placeholder=”請輸入郵箱”> 

:invalid (無效)：內容不符合其類型或 pattern 屬性定義的非法格式的表單元素。 

範例:
css:
input:invalid {
    border-color: red;   /* 非法內容顯示紅色邊框 */
    } 
html:
<input type=”email” placeholder=”請輸入郵箱”> 

 

鏈接偽類 (Link Pseudo-classes):

鏈接偽類主要用於超連結 <a> 標籤，根據連結的不同「狀態」來應用樣式。

順序通常建議遵循 L-V-H-A (LoVe HAte) 原則， link, visited, hover, active。

:link (未訪問的連結)：設定連結還沒被點擊過時的樣式。

範例:
a:link {
    color: blue; /* 未訪問的連結顯示藍色 */
    text-decoration: underline; /* 預設有下劃線 */
    }

:visited (已訪問的連結)：設定訪問連結後的樣式。

範例:
a:visited {
    color: purple; /* 已訪問的連結顯示紫色 */
    text-decoration: none; /* 移除下劃線 */
    }

:hover (滑鼠懸停在連結上)：設定滑鼠指標移動到連結上方時的樣式，增加互動感。

範例:
a:hover {
    color: red; /* 滑鼠懸停時變紅色 */
    text-decoration: underline wavy; /* 下劃線變成波浪線 */
    cursor: pointer; /* 鼠標變成手型 (預設就是手型) */
    }

:active (連結被激活 / 點擊時)：設定連結被點擊時（滑鼠按下不放）的樣式。這個狀態非常短暫。

範例:
a:active {
    color: orange; /* 點擊時變橘色 */
    font-weight: bold; /* 文字變粗 */
    }

Pseudo-Elements (偽元素)：

元素的一部分或虛擬內容

::before：在選取元素的內容「之前」插入一個虛擬的子元素。這個虛擬元素本身並不存在於 HTML 結構中。

範例:
li::before {
    content: “→ “; /* 在每個列表項目前面插入一個箭頭 */
    color: gray;
    }

::after：在選取元素的內容「之後」插入一個虛擬的子元素。

範例:
a::after {
    content: ” (外部連結)”; /* 在連結後面加上提示文字 */
    font-size: 0.8em;
    }

::first-line：選取塊級元素文本的第一行。

範例:
p::first-line {
    font-weight: bold; /* 段落的第一行文字加粗 */
    }

::first-letter：選取塊級元素文本的第一個字母。

範例:
p::first-letter {
    font-size: 2em; /* 段落的第一個字母放大 */
    color: red;
    }

::selection：選取用戶用滑鼠高亮選中的文本部分。

範例:
::selection {
    background-color: yellow; /* 改變用戶選中文字的背景色 */
    color: black;
    }

clearfix : 用於防止浮動元素的兩側有其他浮動元素。

範例:
.clearfix::after {
    content: “”; /* 必須有 content 屬性，即使是空字串 */
    display: block; /* 讓這個虛擬元素變成塊級元素，才能應用 clear */
    clear: both; /* 清除左右兩側的浮動 */
    visibility: hidden; /* 隱藏這個虛擬元素本身，不佔用視覺空間 */
    height: 0; /* 確保它不佔用高度 */
    } /* 使用方式：給包含浮動子元素的父元素添加 .clearfix 類別 */

.container.clearfix { /* 可套用其他樣式，例如邊框或背景 */
    border: 1px solid red;
    }

每一個 HTML 元素都被視為一個矩形的「盒子」，這個盒子從內到外，由四個部分組成： 

content (內容區)：盒子最核心的部分，也就是你實際的內容，比如文字、圖片、影片等等。

大小由 width (寬度) 和 height (高度) 屬性控制。 

word-wrap: break-word; 當文字太長時，會在任意地方強迫截斷換行，來防止超出容器邊界。 

overflow: <下方屬性值>; 用來控制當元素的內容超出其指定的寬度和高度時，瀏覽器應該如何處理。 

visible (預設值)：超出容器的內容會溢出到容器外面，並保持可見。 
hidden：超出容器的內容會被剪裁掉，不可見。例如:固定頭像框。 
scroll：無論內容是否超出容器，都會強制顯示水平和垂直滾動條。 
auto：只有當內容超出容器時，才會顯示滾動條。如果內容沒有超出，則不會顯示滾動條。

 

box-sizing設定: 

box-sizing:border-box;  能夠防止內容超過自身邊框。 
box-sizing:content-box; 寬度為內容寬度，所以能夠超出邊框。 

想像： 你的樂高積木的「實心」部分，或是你家裡的「實際房間空間」。 

 

padding (內邊距 / 填充區)：位於內容區和邊框之間的透明區域。它增加了內容與邊框之間的距離。

大小由 padding 屬性或其子屬性（ padding:10px; padding-top， padding-right, padding-bottom, padding-left）控制。 

特性： Padding 的背景色會是內容區的背景色（如果有的話）。Padding 是元素內部的空間。 

想像： 房間裡的「牆壁厚度」，或是積木實心部分外圍的一圈「透明保護層」。 

 

border (邊框)：位於內邊距和外邊距之間的線條或圖案。它是內容的邊界。

大小： 由 border 屬性或其子屬性（border-width, border-style, border-color）控制。 

常用寫法:border: width style color; (例如 border: 1px solid black;) 

(邊框樣式：solid 實線, dashed 虛線, dotted 點線, double 雙線, none 無) 

border-width: 5px 4px 5px 4px ; 

border-style: dashed solid double dotted; 

Border-color: blue green yellow orange;  

(可以分別設定上、右、下、左的屬性樣式) 

特性： Border 有自己的顏色和樣式。 

想像： 房間的「牆體本身」，或是積木最外層的那道「實際邊界線」。 

 

margin (外邊距)：位於邊框之外的透明區域。它增加了元素與周圍其他元素之間的距離。

大小： 由 margin 屬性或其子屬性（ margin: 10px; margin: auto; margin-top, margin-right, margin-bottom, margin-left）控制。 

增加外框顏色(陰影):box-shadow: 0 0 20px red; (水平偏移量、垂直偏移量、模糊度、顏色) 

特性： Margin 永遠是透明的，它會顯示其父元素的背景色（如果有的話）。Margin 是元素外部的空間。 

想像： 房子周圍的「院子」或「人行道」，或是樂高積木和旁邊其他積木之間的「預留空間」。  

display：定義 Flex 容器，如果沒有使用display就沒有flex的屬性。
display: flex; :將元素定義為塊級 Flex 容器。它會佔據一整行的寬度。
display: inline-flex; 將元素定義為行內 Flex 容器，只佔據內容所需的空間。

flex-direction：定義主軸方向，決定 Flex 項目是水平排列還是垂直排列，以及它們的起點方向。

row (預設值)： 主軸從左到右（水平方向）。Flex 項目會水平排列。
row-reverse： 主軸從右到左（水平方向），項目反向排列。
column： 主軸從上到下（垂直方向）。Flex 項目會垂直排列。
column-reverse： 主軸從下到上（垂直方向），項目反向排列。

flex-wrap：定義當空間不足時，Flex 項目是否要壓縮或換行。

nowrap (預設值)： 所有 Flex 項目都在一行（或一列）中，可能會溢出容器。
wrap： Flex 項目會在必要時換行到多行（或多列）。
wrap-reverse： Flex 項目會在必要時換行，但方向與 wrap 相反。

flex-flow：用於flex-direction 和 flex-wrap 的簡寫。

範例： flex-flow: row wrap;

flex-grow：定義 Flex 項目的伸展能力，預設0(不會伸展)。
flex-shrink：定義 Flex 項目的收縮能力，預設1(空間不足時收縮)。
flex-basis：定義 Flex 項目的初始大小，預設auto， (px, %, em )
order：定義 Flex 項目的排列順序，越小越排前面，可以為負值。

flex: <flex-grow> <flex-shrink> <flex-basis>; 簡寫語法。

常見值：
flex: auto; (等同於 1 1 auto)
flex: none; (等同於 0 0 auto)
flex: 1; (等同於 1 1 0%，讓項目伸展並佔據所有可用空間)

justify-content：定義主軸(水平)的對齊方式。

flex-start (預設值)： 項目向主軸的起始位置對齊（例如：水平排列時靠左）。
flex-end： 項目向主軸的結束位置對齊（例如：水平排列時靠右）。
center： 項目在主軸上居中對齊。
space-between： 第一個項目對齊主軸起始點，最後一個項目對齊主軸結束點，其餘項目之間的空間平均分佈。
space-around： 每個項目周圍的空間平均分佈，結果是容器兩側的空間會是項目之間空間的一半。
space-evenly： 所有項目之間的空間以及項目與容器邊緣之間的空間都完全相等。

align-items：定義交叉軸(垂直)的對齊方式(單行元素)。

stretch (預設值)： Flex 項目被拉伸以佔滿交叉軸的整個容器空間（如果沒有設定高度/寬度）。
flex-start： 項目向交叉軸的起始位置對齊（例如：水平排列時垂直靠上）。
flex-end： 項目向交叉軸的結束位置對齊（例如：水平排列時垂直靠下）。
center： 項目在交叉軸上居中對齊（例如：水平排列時垂直置中）。
baseline： 項目基於它們的內容的基線對齊。

align-self: 定義單一子元素的交叉軸(垂直)的對齊方式(會覆蓋父元素的設定)，與 align-items相似。

stretch ： Flex 項目被拉伸以佔滿交叉軸的整個容器空間（如果沒有設定高度/寬度）。
flex-start： 項目向交叉軸的起始位置對齊（例如：水平排列時垂直靠上）。
flex-end： 項目向交叉軸的結束位置對齊（例如：水平排列時垂直靠下）。
center： 項目在交叉軸上居中對齊（例如：水平排列時垂直置中）。
baseline： 項目基於它們的內容的基線對齊。

align-content：定義交叉軸(垂直)的對齊方式(多行元素)。

stretch (預設值)： 多行被拉伸以佔滿交叉軸上的剩餘空間。
flex-start： 多行向交叉軸的起始位置對齊。
flex-end： 多行向交叉軸的結束位置對齊。
center： 多行在交叉軸上居中對齊。
space-between： 第一行對齊交叉軸起始點，最後一行對齊交叉軸結束點，其餘行之間的空間平均分佈。
space-around： 每行周圍的空間平均分佈。

display：定義 Grid 容器
grid： 將元素定義為塊級 Grid 容器。它會佔據一整行的寬度。
inline-grid： 將元素定義為行內 Grid 容器。它會只佔據內容所需的空間。

grid-template-columns：定義列的數量和寬度
grid-template-rows：定義行的數量和高度
固定寬度單位： px, em, rem, %

grid-template-columns: 100px 200px auto; (第一列 100px，第二列 200px，第三列自動寬度)
彈性單位 fr： fr (fraction) 單位:代表網格容器中可用空間的一部分。
grid-template-columns: 200px 1fr 1fr; (總共三份，第一列 200px，剩餘空間由第二列和第三列平分)
repeat() 函數： 重複定義列

範例：grid-template-columns: repeat(3, 1fr); (創建 3 個寬度相等的列)
範例：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); (響應式常見用法，自動適應，每列最小 200px，最大佔 1fr)

grid-auto-columns/grid-auto-rows : 定義 grid 內每個網格的寬高且每個網格寬高均會一致。
grid-auto-columns: 100px; (每個網格高寬都是100px)

gap：設定網格單元格之間、沿著網格線的間距，避免使用 margin 產生額外複雜性。

gap: <row-gap> <column-gap>; (如果只給一個值，行和列間隙相同)
gap: 20px; (行間隙和列間隙都是 20px)
gap: 10px 30px; (行間隙 10px，列間隙 30px)

justify-items：定義 Grid 項目在網格內水平方向的對齊方式

stretch (預設值)： 項目會拉伸以填滿整個單元格的寬度。
start： 項目靠單元格的起始邊（左側）對齊。
end： 項目靠單元格的結束邊（右側）對齊。
center： 項目在單元格內部水平居中。
用途： 當 Grid 項目比其所在的單元格小時，控制項目在水平方向上的對齊。

align-items：定義 Grid 項目在網格單內垂直方向的對齊方式

stretch (預設值)： 項目會拉伸以填滿整個單元格的高度。
start： 項目靠單元格的起始邊（頂部）對齊。
end： 項目靠單元格的結束邊（底部）對齊。
center： 項目在單元格內部垂直居中。
用途： 當 Grid 項目比其所在的單元格小時，控制項目在垂直方向上的對齊。

justify-content：定義整個網格在 Grid 容器內部水平方向的對齊方式

start： 整個網格靠容器左側對齊。
end： 整個網格靠容器右側對齊。
center： 整個網格水平居中。
space-between： 第一行網格對齊容器左邊，最後一行網格對齊容器右邊，行之間平均分配空間。
space-around： 每行網格周圍的空間平均分佈。
space-evenly： 所有網格行之間的空間以及與容器邊緣的空間都相等。
用途： 當整個網格的總寬度小於 Grid 容器的寬度時，控制網格在容器內的水平對齊方式。

align-content：定義整個網格在 Grid 容器內部垂直方向的對齊方式

start： 整個網格靠容器頂部對齊。
end： 整個網格靠容器底部對齊。
center： 整個網格垂直居中。
space-between： 第一列網格對齊容器頂部，最後一列網格對齊容器底部，列之間平均分配空間。
space-around： 每列網格周圍的空間平均分佈。
space-evenly： 所有網格列之間的空間以及與容器邊緣的空間都相等。
用途： 當整個網格的總高度小於 Grid 容器的高度時，控制網格在容器內的垂直對齊方式。

grid-column：控制 Grid 項目佔據哪些列。
grid-row : 控制 Grid 項目佔據哪些行。

grid-column: 1 / 3; (從第 1 條列線開始，到第 3 條列線結束，跨越第 1 和第 2 列)
grid-row: 2 / 4; (從第 2 條行線開始，到第 4 條行線結束，跨越第 2 和第 3 行)
grid-column: 3; (簡寫，只在第 3 列)
grid-row: 1 / span 3; (從第 1 條行線開始，向下跨越 3 行)

grid-template-areas:用於定義 grid 每一個網格的名稱，每一列的網格名稱可以重複出現但不可分離，因此 “aaa bbb bbb aaa” 是錯誤的，所以如果兩側都要有aaa的話可以定義成這樣 “aaa1 bbb bbb aaa2“。

範例(3*3):
.container{
    grid-template-areas:
        “header header header”
        “content content side”
        “botton botton botton”;
    }

grid-area：簡寫設定項目在網格中的精確位置和跨度。也可以用於給網格區域命名。
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
grid-area: header; (定義在header區塊中)

float: left;  float: right; 可以讓元素(照片或區塊)向左或是向右浮起來，但是這會導致其他元素被浮動影響而向上或是向右移動，所以要設定正確大小的BoxModel，或是使用clear:both設定，他能夠防止元素出現在浮動元素的旁邊，確保都會在他的下方。

.clearfix::after
{
    content: “”; /* 必須有內容，即使是空的 */
    display: block; /* 讓這個隱形內容變成塊級元素 */
    clear: both; /* 關鍵！清除左右兩邊的浮動 */
    visibility: hidden; /* 讓它隱形，不佔用視覺空間 */
    height: 0; /* 確保它不佔用高度 */
}

postion:static (靜態定位):屬性預設值，設定後就無法透過其他偏移屬性 (top, right, bottom, left) 來移動他。

postion:relative (相對定位): 根據其原始位置進行偏移( top, right, bottom, left )，在偏移後還是會佔有原始的位置，讓其他元素不會填補它被移動後留下的空位。

postion:absolute (絕對定位): 元素會完全脫離正常的文檔流(就像一張自由浮動的貼紙 )，不再佔據空間。

根據( top, right, bottom, left )屬性，相對於其最近的非 static 定位的父級元素進行定位，如果沒有任何已定位的祖先元素，它會相對於 <body> 元素來定位（也就是相對於瀏覽器視窗）。
常用於製作彈出視窗、工具提示、下拉菜單、圖片上的文字覆蓋等效果。

postion:fixed (固定定位): 元素會完全脫離正常的文檔流(跟absolute一樣)，並且它的位置是相對於瀏覽器視口 (viewport) 的某個位置來確定的，即使頁面滾動，這個元素也會固定不動，始終停留在螢幕上。

使用(top, right, bottom, left)來設定準確位置。

postion:sticky (黏性定位): 它在大部分時間跟 position: relative;的效果一樣 ，當元素達到或超過 top, right, bottom, left 所設定的閾值時，它就會像 position: fixed; 一樣「黏」在螢幕上。

發佈留言