CSS 速查表

上一頁
下一頁

CSS 代表 層疊樣式表 (Cascading Style Sheets)，簡稱 CSS，是一種簡單的設計語言，旨在簡化網頁設計過程。

什麼是 CSS 速查表？

CSS 速查表是所有可用於設計任何網站的 CSS 屬性和選擇器的集合。在本速查表中，我們將提供最常用的 CSS 屬性和以下列出主題的相關程式碼片段。

目錄

CSS 基礎

CSS 指定 HTML 元素如何在網頁上顯示。如果你將人體比作網頁，那麼 CSS 就是身體的造型部分，例如眼睛的顏色、鼻子的尺寸、膚色等等。

語法

selector { property: value; }

使用 CSS 的方法

有三種方法可以將 CSS 用於 HTML 文件。

  • 內聯 CSS：內聯 CSS 使用style 屬性直接應用於 HTML 元素。
  • 內部 CSS：內部 CSS 定義在 HTML 的 head 部分，位於<style> 標籤內，讓瀏覽器知道在哪裡查詢 CSS。
  • 外部 CSS：外部 CSS 定義在一個單獨的檔案中，該檔案只包含 CSS 屬性，這是在處理專案時推薦的使用 CSS 的方法。

CSS 選擇器

CSS 選擇器 用於選擇要在網頁上設定樣式的 HTML 元素。它們允許您定位特定的元素或元素組以應用樣式，例如顏色、字型、邊距等等。

下面提到了 12 種 CSS 選擇器。

屬性 描述 程式碼片段
通用選擇器 用於選擇所有 HTML 元素
元素選擇器 用於選擇特定的 HTML 元素，例如 p、span、header 等。
類選擇器 用於選擇您自己定義的類。
ID 選擇器 用於選擇您自己定義的 ID。
屬性選擇器 用於選擇特定的 HTML 屬性。
組選擇器 用於選擇多個元素並一起設定它們的樣式。
偽元素選擇器 用於選擇偽元素。
偽類選擇器 用於選擇偽類。
後代選擇器 在 CSS 中用於設定所有作為特定指定標籤子標籤的標籤的樣式。
子選擇器 用於選擇特定元素的所有直接子元素。
相鄰兄弟選擇器 用於選擇緊接在特定元素之前的元素。
通用兄弟選擇器 用於選擇所有在特定元素之前的元素。

CSS 偽類和偽元素

偽類和偽元素都有其各自的用途，如下所述。

CSS 偽類

偽類 在 CSS 中用於根據元素的狀態或在文件樹中的位置選擇和設定元素的樣式，而無需向 HTML 元素新增額外的類或 ID。

CSS 偽類的示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ::backdrop {
            background-image: url(border.png);
        }

        :modal {
            border: 8px inset blue;
            background-color: lightpink;
            box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
        }
    </style>
</head>

<body>
    <dialog>
        <button autofocus>Close</button>
        <p>The modal dialog has a beautiful backdrop!</p>
        <p>And see my styling using :modal pseudo-class</p>
    </dialog>
    <button>Open the dialog</button>

    <script>
        const dialog = document.querySelector("dialog");
        const showButton = document.querySelector("dialog + button");
        const closeButton = document.querySelector("dialog button");

        // "Show the dialog" button opens the dialog modally
        showButton.addEventListener("click", () => {
            dialog.showModal();
        });

        // "Close" button closes the dialog
        closeButton.addEventListener("click", () => {
            dialog.close();
        });
    </script>
</body>

</html>

CSS 偽元素

偽元素 用於設定元素特定部分的樣式。偽元素不是 DOM（文件物件模型）的一部分，並且不存在於 HTML 標記中，但是可以使用 CSS 定位和設定它們的樣式。

CSS 偽類的示例

<html>
<head>
<style>
   p::first-letter { 
      font-size: 2em;
      color: green;
   }
</style>
</head>
<body>
   <p>
      Tutorialspoint
   </p>
</body>
</html>

字型屬性

CSS 字型 是一組具有統一設計和樣式的文字字元。它包括字型中字元的形狀、大小、粗細和其他屬性。

屬性 描述 程式碼片段
font 字型簡寫屬性。
font-family 指定用於文字的字體系列或字體系列列表。
font-feature-settings 控制 OpenType 字型中的高階排版功能。
font-kerning 確定特定字母對的間距方式。
font-language-override 覆蓋特定語言的字型行為。
font-optical-sizing 設定是否應最佳化文字渲染以在不同尺寸下檢視。
font-palette 允許使用字型中包含的各種調色盤之一。
font-size 設定文字的大小。
font-size-adjust 指定控制字型 x 高度的字型縱橫比（數值比率）。
font-stretch 調整文字的寬度（壓縮或擴充套件）。
font-style 指定文字的樣式，例如“italic”、“oblique”或“normal”。
font-weight 設定文字的粗細或粗體。
font-synthesis 字型合成簡寫屬性。
font-synthesis-small-caps 確定瀏覽器是否應該合成在字體系列中缺失的小寫字母字型。
font-synthesis-style 確定瀏覽器是否應該合成在字體系列中缺失的斜體字型。
font-synthesis-weight 確定瀏覽器是否應該合成在字體系列中缺失的粗體字型。
font-variant 控制文字中小寫字母是否使用小型大寫字母。
font-variant-alternates 控制備用字形的用法。
font-variant-caps 控制大寫字母備用字形的用法。
font-variant-east-asian 控制中日韓等東亞文字備用字形的用法。
font-variant-ligatures 控制元素的文字內容，以確定應使用哪個連字或上下文形式。
font-variant-numeric 控制數字、分數和序數標記的備用字形的用法。
font-variant-position 控制作為上標或下標定位的備用、較小字形的用法。
font-variation-settings 指定可變字型特性的四字母軸名稱。

文字屬性

文字 指的是以單詞或字元形式書寫或列印的資訊，可以閱讀和理解。文字可以包含書籍、文章、電子郵件、訊息、網頁等內容。

文字樣式涉及修改文字的外觀，使其更具視覺吸引力或傳達特定資訊。本章演示如何使用 CSS 屬性操作文字。

屬性 描述 程式碼片段
color 設定元素的顏色。
direction 定義元素內容流的方向。
line-height 設定相鄰文字基線之間的距離。
text-align 設定元素的文字對齊樣式。
text-decoration 定義文字的任何裝飾；值可以組合。
text-indent 定義元素中第一行文字的縮排；預設為 0。
text-shadow 建立具有不同顏色和偏移量的文字投影。
text-transform 相應地轉換元素中的文字。
vertical-align 設定元素的垂直位置。
white-space 定義如何處理元素內的空白。
word-spacing 在單詞之間插入額外的空格。

背景屬性

CSS 背景 屬性用於操作元素的背景。它可以用來應用單個背景影像或多個背景影像，以及定義背景顏色、大小、位置、重複行為和其他相關屬性。

屬性 描述 程式碼片段
background 背景相關屬性的簡寫。
background-attachment 指定背景相對於視窗的位置，固定或可滾動。
background-clip 控制背景影像延伸到元素的填充或內容框之外的程度。
background-color 設定元素的背景顏色。
background-image 在一個元素上設定一個或多個背景影像。
background-origin 設定背景的原點。
background-position 設定背景中每個影像的初始位置。
background-position-x 設定背景中每個影像的初始水平位置。
background-position-y 設定背景中每個影像的初始垂直位置。
background-repeat 控制背景中影像的重複。
background-size 控制背景影像的大小。
background-blend-mode 確定元素的背景影像如何相互混合。

陰影屬性

CSS中存在兩種型別的陰影屬性，如下所述。

  • 文字陰影 (Text Shadow): 用於向文字新增陰影效果。它允許你指定陰影的顏色、偏移量、模糊半徑和擴充套件半徑。
  • 盒子陰影 (Box Shadow): 用於在元素周圍新增陰影效果。可以新增一個或多個陰影效果，用逗號分隔。
屬性 描述 程式碼片段
text-shadow 用於向文字新增陰影效果。
box-shadow 用於在元素周圍新增陰影效果。

邊框屬性

邊框 (Border) 屬性用於在元素周圍建立邊框，例如 div、影像或文字。它允許你自定義邊框的外觀，包括其顏色、寬度和樣式。

屬性 描述 程式碼片段
border 在一個宣告中設定所有邊框屬性
border-bottom 設定元素的下邊框。
border-bottom-color 設定元素下邊框的顏色。
border-bottom-width 設定元素下邊框的寬度。
border-bottom-style 設定元素下邊框的樣式。
border-color 設定元素的邊框顏色。
border-left 設定元素的左邊框。
border-left-color 設定元素左邊框的顏色。
border-left-width 設定元素左邊框的寬度。
border-left-style 設定元素左邊框的樣式。
border-right 設定元素的右邊框。
border-right-color 設定元素右邊框的顏色。
border-right-width 設定元素右邊框的寬度。
border-right-style 設定元素右邊框的樣式。
border-style 設定元素邊框的樣式
border-top 設定元素的上邊框。
border-top-color 設定元素上邊框的顏色。
border-top-width 設定元素上邊框的寬度。
border-top-style 設定元素上邊框的樣式。
border-width 設定元素邊框的寬度。
border-image 設定邊框影像。
border-image-outset 設定影像突出顯示，即邊框影像區域超出邊框框的程度。
border-image-repeat 定義邊框影像是否應重複、圓角、間距或拉伸。
border-image-source 設定作為邊框傳遞給元素的影像的源/路徑。
border-image-slice 此屬性顯示如何在邊框中分割影像。
border-image-width 設定要設定為邊框的影像的寬度。

CSS Flexbox

Flexbox 在容器內沿單個維度組織元素，該維度可以是水平或垂直對齊的。

屬性 值 示例
flex-direction 設定彈性專案的彈性方向。
flex-wrap 設定彈性專案是否應換行。
justify-content 設定彈性專案沿主軸的對齊方式。
align-items 設定彈性專案沿交叉軸的對齊方式。
align-content 設定彈性容器內彈性行的對齊方式和間距。
flex-flow 同時設定 flex-direction 和 flex-wrap 屬性。
flex-grow 設定彈性專案在彈性容器內增長。
flex-shrink 設定彈性專案縮小尺寸以適應可用空間。
flex-basis 設定彈性專案的初始大小。
flex 簡寫屬性，組合三個與 flex 相關的屬性：flex-grow、flex-shrink 和 flex-basis。
align-self 設定特定彈性專案沿交叉軸的對齊方式。
order 用於指定彈性專案在其彈性容器內出現的順序。

CSS Grid

CSS Grid 是一種方便簡潔的方式來定義元素的網格佈局。

屬性 描述 程式碼片段
display 定義元素是網格容器還是內聯網格容器。
gap 定義行和列之間的間隙。
grid-area 定義網格專案在網格佈局中的位置和大小。
grid-column 控制網格專案在網格容器中沿列方向的放置。
grid-row 控制網格專案在網格容器中沿行方向的放置。
grid-template 指定網格列、網格行和網格區域。
grid-auto-columns 確定自動生成的網格列軌道的尺寸或此類軌道的模式。
grid-auto-rows 確定自動生成的網格行軌道的尺寸或此類軌道的模式。
grid-auto-flow 指定網格專案在網格中的排列。

漸變

CSS 漸變 允許透過在兩種或多種顏色之間建立平滑過渡來為 HTML 元素設計自定義顏色。

CSS 定義了三種類型的漸變。

  • 線性漸變 (Linear Gradient): 從左到右、從上到下或對角線漸變。
  • 徑向漸變 (Radial Gradient): 從中心到邊緣漸變。
  • 圓錐漸變 (Conic Gradient): 圍繞中心點旋轉。

程式碼片段

在這個片段中，你可以檢查三種類型的漸變。

linear-gradient()
/* to right, black, yellow, green */
radial-gradient()
/* circle, black, yellow, green */
conic-gradient()
/* black, yellow, green */

漸變示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .InnerFrame-container {
            font-family: Arial, sans-serif;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 110px;
        }
        .InnerFrame-color-picker {
            display: flex;
        }
        .InnerFrame-color-options {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            width: 100%;
            gap: 10px;
        }
        .InnerFrame-color-options button {
            background-color: rgb(0, 153, 51);
            border: 2px solid grey;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            color: white;
            font-family: monospace;
        }
        .InnerFrame-color-options button:hover {
            background-color: rgb(0, 125, 51);
        }
        .InnerFrame-output-display {
            border: 2px solid grey;
            width: 110px;
            border-radius: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="InnerFrame-container">
        <div class="InnerFrame-color-picker">
            <div class="InnerFrame-bg InnerFrame-color-options">
                <button onclick="setGradient(this, 'linear')">Linear Gradient</button>
                <button onclick="setGradient(this, 'radial')">Radial Gradient</button>
                <button onclick="setGradient(this, 'conic')">Conic Gradient</button>
            </div>
            <div class="InnerFrame-output-display" id="InnerFrame-colorDisplay">
                Choose a gradient for background
            </div>
        </div>
    </div>

    <script>
        let previousButton = null;

        function setGradient(button, type) {
            let colorDisplay = document.getElementById('InnerFrame-colorDisplay');
            if (type === 'linear') {
                colorDisplay.style.backgroundImage = 'linear-gradient(to right, black, yellow, green)';
            } else if (type === 'radial') {
                colorDisplay.style.backgroundImage = 'radial-gradient(circle, black, yellow, green)';
            } else if (type === 'conic') {
                colorDisplay.style.backgroundImage = 'conic-gradient(black, yellow, green)';
            }

            if (previousButton) {
                previousButton.style.backgroundColor = 'rgb(0, 153, 51)';
            }

            button.style.backgroundColor = 'rgb(0, 100, 25)';
            previousButton = button;
        }
    </script>
</body>
</html>

分類屬性

CSS 分類 屬性允許你控制如何顯示元素，設定影像將在另一個元素中顯示的位置，設定元素相對於其正常位置的位置，使用絕對值設定元素的位置，以及如何控制元素的可見性。

屬性 描述 程式碼片段
clear 設定元素的哪些邊距不能與浮動元素相鄰；元素向下移動，直到該邊距清除。
cursor 定義游標的形狀。
display 控制元素的顯示方式。
float 確定元素是否浮動到左側或右側，允許文字環繞它或以內聯方式顯示。
position 設定元素的定位模型。
visibility 確定元素在文件或表格中是否可見。

CSS 函式

CSS 函式可用於為你的網站或應用程式新增樣式和格式，並可以極大地改善使用者體驗。

請參閱以下函式型別列表以瞭解每個函式。

CSS 函式 描述 程式碼片段
變換函式 (Transform Functions) 這些函式用於表示視覺變換，並用作 transform 屬性中的值。
數學函式 (Math Functions) 這些函式可用於 CSS 中，使用數學函式表示數值。
濾鏡函式 (Filter Functions) 這些函式表示能夠改變輸入影像外觀的圖形效果。它用於 filter 和 backdrop-filter 屬性中。
顏色函式 (Color Functions) 這些函式用於定義表示顏色的各種方法。
影像函式 (Image Functions) 這些函式提供影像或漸變的圖形表示。
計數器函式 (Counter Functions) 理論上，CSS 計數器函式可以在任何可用 的地方使用，但它們通常與 content 屬性一起使用。
形狀函式 (Shape Functions) 這些函式表示視覺形狀，並用於 clip-path、offset-path 和 shape-outside 等屬性中。
引用函式 (Reference Functions) 為了引用在其他地方定義的值，這些函式用作屬性的值。
網格函式 (Grid Functions) 這些函式用於定義 CSS 網格。
字型函式 (Font Functions) 這些函式透過結合使用 CSS 字型函式和 font-variant-alternates 屬性來管理。
緩動函式 (Easing Functions) 這些函式用於過渡和動畫屬性來自以下函式。

注意： 要詳細瞭解每個函式，請檢視文章 CSS 函式。

媒體查詢

媒體查詢 允許根據檢視頁面的裝置或瀏覽器的特性將 CSS 樣式應用於網頁。使用媒體查詢，我們可以建立適應不同螢幕尺寸、解析度和方向的設計。

CSS 媒體型別 描述 程式碼片段
all 適用於所有裝置。
print 適用於分頁的不透明材料和在螢幕上以列印預覽模式檢視的文件。請參閱關於分頁媒體的部分。
screen 主要用於彩色計算機螢幕。
CSS 媒體特性 描述 程式碼片段
orientation 檢查裝置的螢幕或頁面是縱向還是橫向。
aspect-ratio 檢查視口或渲染表面的縱橫比。
display-mode 檢查 Web 應用程式的顯示模式。
overflow-block 確定使用者裝置如何處理垂直方向上超出初始容器邊界的內容。
overflow-inline 確定使用者裝置如何處理水平方向超出初始容器邊界的內容。
高度 確定視窗的高度。
寬度 確定視窗的寬度。

結論

遵循本速查表將幫助您回顧 CSS 知識。如果您是 CSS 新手，我們建議您學習我們的免費CSS 教程。

您可以檢視我們的其他速查表
列印頁面
上一頁
下一頁
廣告