CSS 浮動與清除 浮動（Float） 和 清除（Clear） 是 CSS 中用於控制元素排列的基本屬性。了解這兩個屬性的作用和應用有助於創建靈活的佈局，特別是在設計多欄佈局和文字環繞效果時。 1. 浮動（Float） 浮動（float） 屬性允許將元素從標準文檔流中移出，並使其向左或向右對齊。當元素浮動時，後面的內容將環繞在其周圍。 語法： float: left |...

佈局基礎 CSS 佈局基礎涉及到如何排列和定位網頁上的元素。掌握 CSS 佈局是創建響應式和易於使用的網頁設計的重要技能。以下是 CSS 佈局的幾個關鍵概念和技術，包括 標準文檔流、浮動（float）、清除（clear）、定位（position） 和 Flexbox、Grid 等現代佈局工具。 1. 標準文檔流 在默認情況下，HTML 元素遵循 標準文檔流（normal documen...

邊框（Border）和圓角（Border Radius） CSS 的 邊框（Border） 和 圓角（Border Radius） 是用來裝飾和設計元素外觀的重要屬性。邊框可用於設定元素的外邊框樣式、寬度和顏色，而圓角則用於控制元素邊框的圓滑程度。 1. 邊框（border） 邊框（Border） 屬性用於設置元素的邊框，它由三個主要部分組成：邊框寬度（Width）、邊框樣式（Styl...

外距（Margin）和內距（Padding） 在 CSS 盒模型中，外距（Margin） 和 內距（Padding） 是控制元素之間距離和內部間距的重要屬性。它們用於調整元素的外部空間（外距）和內容與邊框之間的內部空間（內距），從而實現更靈活的佈局設計。 1. 外距（margin） 外距（Margin） 是元素邊框外部的空白區域，用於調整元素與其他元素之間的距離。margin 可以控制...

盒模型（Box Model） CSS 的盒模型是網頁設計中的核心概念之一，它定義了每個 HTML 元素在網頁上所佔據的空間和顯示方式。理解盒模型可以幫助我們更好地控制元素的大小、邊距、填充、邊框等特性，以實現更精確的佈局設計。 1. 盒模型結構 盒模型由四個主要部分組成，從內到外分別是： 內容（Content）：元素的實際內容，例如文字、圖片或其他子元素。 內邊距（Padd...

字體和文本樣式 CSS 提供了多種屬性來控制網頁上的字體和文本樣式，這些屬性讓開發者可以調整字體的外觀、大小、顏色、間距和其他文本相關的效果，以提升網頁的可讀性和視覺吸引力。 1. 字體系列（font-family） font-family 屬性用於設置文本的字體系列（如 Arial, Times New Roman 等）。可以指定多個字體名稱，以逗號分隔，當第一個字體無法使用時，瀏覽...

顏色和背景 CSS 提供了多種方式來設定網頁元素的顏色和背景。透過使用這些屬性，我們可以設計出更吸引人的網頁。以下是 CSS 中控制顏色和背景的常用屬性和方法。 1. 顏色屬性（color） color 屬性用於設定文字的顏色。可以使用顏色名稱（如 red）、十六進位顏色值（如 #ff0000）、RGB 顏色值（如 rgb(255, 0, 0)）、RGBA 顏色值（如 rgba(255...

CSS 選擇器 CSS 選擇器（Selector）用來選擇 HTML 元素，以應用相應的樣式規則。選擇器是 CSS 語法的核心部分，它們決定了樣式規則將應用於哪些元素。根據不同的需求，我們可以使用各種類型的選擇器來匹配特定的元素。 常見的 CSS 選擇器類型 1. 元素選擇器（Type Selector） 選擇特定的 HTML 標籤。 語法：直接使用 HTML 標籤名稱。 ...

CSS 簡介 什麼是 CSS？ CSS（層疊樣式表，Cascading Style Sheets）是一種用於描述 HTML 文件樣式的語言。它決定了網頁的外觀，包括文字顏色、字體、佈局、背景圖片和其他視覺效果。通過使用 CSS，我們可以將網頁的內容（由 HTML 定義）和其樣式分開，使得網頁設計更靈活和易於維護。 CSS 的用途 樣式化網頁：通過 CSS，我們可以控制整個網頁的...

以下是設計的30天CSS教學課程，每天涵蓋一個主題，逐步引導從基礎到進階的CSS概念。 CSS 30天教學課程 第1週：CSS基礎 CSS 簡介：什麼是CSS，CSS的用途，以及如何在HTML中使用CSS。 CSS 選擇器：了解基本的CSS選擇器（如元素、類別、ID等）。 顏色和背景：設置顏色和背景，了解HEX、RGB、HSL等色彩表示法。 字體和文本樣式：字體屬性、字...