CSS 快速指南

上一頁
下一頁

使用我們的快速指南學習 CSS 基礎知識。本指南涵蓋了重要的 CSS 主題，幫助您快速有效地提高您的 Web 開發技能。在本文中，我們提供了所有 CSS 概念的快速概述以及示例。請務必將其加入書籤，以便您可以輕鬆地複習 CSS 以進行任何面試準備。

如果您想了解更多關於我們涵蓋的主題的資訊，只需訪問附加的連結，在那裡我們為每個主題都設定了一個專門的章節。

CSS 簡介

CSS 是層疊樣式表 (Cascading Style Sheets) 的縮寫。它有助於將 HTML 元素的表示定義為一個單獨的檔案，稱為 CSS 檔案，副檔名為 .css。

什麼是 CSS？

  • CSS 代表層疊樣式表 (Cascading Style Sheets)，用於描述網頁的展示和設計。
  • 使用 CSS，您可以控制文字的顏色、字型的樣式、段落之間的間距、列的大小和佈局方式、使用的背景影像或顏色等。
  • CSS 可以一次控制多個網頁的佈局。

CSS 在 Web 開發中的重要性

CSS 提供對 HTML 元素表示的精確控制，允許開發人員自定義佈局、排版、顏色和其他視覺屬性。

基本語法和結構

CSS 語法

selector { 
    property: value 
}
CSS 語法的分解
  • 選擇器： 選擇器是將應用樣式的 HTML 標籤。
  • 屬性： 屬性是 HTML 標籤的一種屬性型別。簡而言之，所有 HTML 屬性都被轉換為 CSS 屬性。
  • 值： 值被分配給屬性。
CSS Syntax Breakdown

在 HTML 中包含 CSS 的方法

在 HTML 文件中包含 CSS 有三種方法。

  • 內聯 CSS： 內聯 CSS 直接應用於 HTML 元素，它是這三種 CSS 中優先順序最高的。這將覆蓋任何外部或內部 CSS。
  • 內部 CSS： 內部 CSS 在 HTML 的 head 部分的 <style> 標籤內定義，以讓瀏覽器知道在哪裡查詢 CSS。
  • 外部 CSS： 外部 CSS 在單獨的檔案中定義，該檔案只包含 CSS 屬性，這是在處理專案時使用 CSS 的推薦方法。它易於維護，可以建立多個 CSS 檔案，並且您可以透過在 HTML 文件中使用 HTML <link> 標籤將其匯入來使用它們。

更多參考請檢視，CSS 引入方式。

CSS 選擇器

CSS 選擇器 用於定位特定的元素或元素組以應用樣式，例如顏色、字型、邊距等。

基本選擇器

  • 元素選擇器： 當我們想要對文件中的所有 <p> 標籤或 <h1> 標籤應用類似樣式時使用。
  • 類選擇器： 類選擇器定位具有特定類屬性值的元素以對其進行樣式設定。
  • ID 選擇器： ID 選擇器定位具有特定 ID 屬性值的單個元素以對其進行樣式設定。

高階選擇器

  • 屬性選擇器： 屬性選擇器根據元素上的特定屬性或屬性值來定位元素。
  • 偽元素選擇器： 偽類選擇器用於為元素的特定狀態設定樣式，例如 :hover 用於在懸停時為元素設定樣式。
  • 偽類選擇器： 偽元素選擇器用於為元素的特定部分設定樣式，而不是元素本身。

顏色和背景

CSS 顏色 可以使用預定義的顏色名稱、RGB、RGBA、HSL、HSLA 和十六進位制值來指定。這些顏色可以應用於網頁中任何元素的背景、邊框、文字、輸入游標等。

顏色值

以下是 CSS 支援的顏色值型別。

  • 十六進位制 (hex)： 這是使用十六進位制程式碼表示紅色、綠色和藍色值的六字元表示形式（例如，#3498db）。
  • RGB： 使用 0 到 255 之間的三個數字表示紅色、綠色和藍色的強度（例如，rgb(52, 152, 219)）。
  • HSL： 使用色相、飽和度和亮度值指定顏色（例如，hsl(204, 70%, 53%)）。

背景屬性

CSS 中的背景屬性用於控制 HTML 元素的背景圖形。我們可以為所有 HTML 元素結構設定純色、影像、漸變。

CSS 盒模型

CSS 盒模型 是一個佈局概念，描述了元素如何在網頁上顯示。此模型將每個元素視為一個矩形框，由內容、填充、邊框和外邊距區域組成。下圖顯示了盒模型的示例。

CSS Box Model

盒模型型別

  • 標準盒模型： 在此模型中，元素的內容區域僅由元素的高度和寬度定義。填充、邊框和外邊距新增到內容區域之外。
    • .box {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
    box-sizing: content-box; /* This is the default value */
}
  • 替代盒模型： 在此模型中，元素的內容區域包括元素的高度、寬度、填充、外邊距和邊框。
    • .box{
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
    box-sizing: border-box; /* Margin & padding not included in content area */
}

過渡和動畫

CSS 過渡和動畫用於透過新增流暢的互動效果來增強使用者體驗。過渡使更改感覺更流暢，而動畫則建立連續的運動，例如旋轉、淡入淡出或元素反彈。

無過渡
有過渡

 

基本過渡

CSS 過渡 用於在指定的時間內平滑地更改 CSS 屬性。以下程式碼模擬當用戶將滑鼠懸停在按鈕上時，按鈕的背景顏色從淺藍色平滑過渡到深天藍色的效果。

.button {
    background-color: lightblue;
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}

.button:hover {
    background-color: deepskyblue;
}

關鍵幀動畫

關鍵幀動畫 用於透過定義一系列階段來建立更復雜的運動。每個階段都在動畫的不同點指定樣式。以下程式碼生成一個方塊向左滑動的動畫。

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.box {
    animation: slideIn 1s ease-out; /* Slides box in from the left */
    background-color: lightcoral;
    width: 100px;
    height: 100px;
}

CSS 排版

CSS 排版屬性用於控制和增強網頁上文字的外觀。這些包括用於設定字型樣式的字型屬性，以及用於設定文字樣式的文字屬性。

字型屬性

文字屬性

佈局技術

CSS 提供多種佈局技術，可以有效地組織和定位網頁上的元素。常用的佈局技術包括 Flexbox、CSS Grid 和定位方法。以下部分簡要概述了這些技術。

Flexbox 佈局系統

Flexbox 是 CSS 中的一維佈局系統，用於在容器內水平或垂直排列專案。此係統使用多個屬性進行專案大小和對齊調整，從而確保響應式設計。該圖顯示了容器中的 Flexbox 佈局。

Flexbox Example

設計 Flexbox 系統非常簡單。我們只需要將容器的display 屬性設定為 flex。然後，我們可以使用與 flex 相關的屬性來控制容器內專案的對齊方式。以下程式碼顯示了 Flex 佈局系統的示例。

.container {
    display: flex;
    justify-content: space-between; /* Ensures Evenly spaced items */
    align-items: center; /* Centering items Vertically */
}
.item {
    background-color: lightcoral;
    padding: 20px;
    border: 3px solid #ccc;
}

Grid 佈局系統

Grid 佈局 是一個二維佈局系統，用於透過在容器中定義行和列來建立網頁的複雜基於網格的結構。它提供了對佈局結構的高階控制，包括區域、間隙和對齊方式。下圖顯示了網頁的基於網格的佈局系統。

Grid Layout Example

要使用 Grid 佈局，請將容器的display 屬性設定為 grid。然後，我們可以使用 grid-template-rows 和 grid-template-columns 等屬性定義行和列的數量和大小。以下示例程式碼顯示了一個基本的 Grid 佈局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns */
    grid-template-rows: auto; /* Rows adjust based on content height */
    gap: 10px; /* Space between grid items */
}
.item {
    background-color: lightblue;
    padding: 20px;
    border: 2px solid #ddd;
}

CSS 定位

CSS 定位 控制元素在佈局中的位置。這些用於在不遵循佈局系統規則的情況下，手動將專案放置在容器內。下圖顯示了定位元素的示例。

Positioning Example

在 CSS 中，position 屬性 用於手動定位容器內的元素。透過它，我們可以建立浮動側邊欄、靜態定位元素、相對定位元素和絕對定位元素。以下是 position 屬性的值。

  • 靜態 (Static): 預設定位，元素遵循正常的文件流。
  • 相對 (Relative): 相對於其正常位置定位元素，允許調整而不影響周圍元素。
  • 絕對 (Absolute): 相對於其最近的已定位祖先元素定位元素，將其從文件流中移除。
  • 固定 (Fixed): 相對於視口固定元素的位置，使其不受滾動影響。
  • 粘性 (Sticky): 相對定位和固定定位的混合，當您滾動時，元素會粘滯在指定位置，直到到達邊界。

響應式設計

響應式設計是指建立可在多種螢幕尺寸和裝置上流暢執行的網頁。這種方法確保佈局、影像和內容在任何裝置上（從桌上型電腦到智慧手機）都能平滑地調整。

媒體查詢

CSS 中的媒體查詢 用於根據螢幕尺寸、解析度和使用者裝置的其他特性應用不同的 CSS 樣式。媒體查詢使用 @media 規則在滿足特定條件時包含額外的 CSS 屬性塊。

.container{   /* General styles for container element */
    display: flex;
    flex-direction: row; 
}

@media (max-width: 768px) { /* Styles for screen width less than 768 */
    .container {
        flex-direction: column; 
        /* Stacks items vertically on smaller screens */
    }
}

上面的程式碼使用媒體查詢在螢幕尺寸縮小到 768px 時更改專案的堆疊順序。

響應式單位

當我們需要根據螢幕尺寸縮放元素的尺寸和字型大小時，可以使用響應式單位。

響應式設計中最常用的單位是：

  • 百分比 (%): 相對父元素設定大小。例如，100% 的寬度表示使用父元素的整個寬度。
  • em: 用於相對於最近的父元素的字型大小設定字型大小。
  • 視口寬度 (vw): 基於視口寬度 1% 的單位，非常適合水平縮放元素。(1vw = 當前視口寬度的 1%)
  • 視口高度 (vh): 基於視口高度 1% 的單位，有助於垂直縮放元素。(1vh = 當前視口高度的 1%)

檢視有關CSS 單位 的文章，以瞭解有關響應式單位及其與普通單位的區別的更多資訊。

用於列印的 CSS 樣式

CSS 為網頁的可列印版本提供特殊功能和屬性。使用這些特定於列印的樣式表和屬性，我們可以控制內容在紙張上的顯示方式，確保佈局清晰易讀，且沒有不必要的元素。對於列印頁面樣式，最好使用淺色主題，因為它可以減少墨水消耗。

為列印設定網頁樣式

要專門為列印設定網頁樣式，我們可以在 CSS 中使用@media print 規則。這可用於調整應該在紙張上不同顯示的元素，例如移除導航欄、調整字型大小以及將背景顏色設定為白色。

@page 規則 用於設定列印文件的頁面佈局屬性，例如邊距、頁面方向和尺寸。以下部分顯示瞭如何在 css 中使用媒體列印和 @page。

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: none; /* Removes background colors */
    }
    .no-print {
        display: none; /* Hides elements like ads or navigation */
    }
}

@page {
    size: A4;
    margin: 1in;
}

@page :first {
    margin-top: 2in; /* Extra top margin for the first page */
}

特定於列印的屬性

一些 CSS 屬性對列印樣式特別有用。這些包括：

  • page-break-before 和 page-break-after: 控制列印內容中頁面中斷的位置，允許您在新頁面上開始新部分。
  • color-adjust: economy; 透過調整顏色以減少墨水使用來啟用省墨模式，這對於節省墨水量大的文件的資源非常有用。
  • size: 定義列印頁面的尺寸，例如 size: A4; 用於標準 A4 紙。

CSS 變數

CSS 變數 是自定義屬性，允許您在整個 CSS 程式中儲存和重複使用值。這類似於其他程式語言中的變數。

宣告和使用 CSS 變數。

CSS 變數通常在:root 選擇器內定義。以下是宣告 CSS 變數的語法：

:root {
    --variable-name: value;
}

要使用 CSS 變數，請遵循以下語法：

selector {
    var(--variable-name, fallback-value);
}

回退值用於確保即使未定義或定義不正確的變數，CSS 程式碼仍然有效並能正常工作。

使用 CSS 變數的示例

以下簡單的設定顯示瞭如何在 CSS 中使用變數。

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;/* Shade for white */
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color, white);
            color: var(--black-color, black);/* Uses fallback value */
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
    </div>
</body>

</html>

CSS 函式

CSS 函式 用於執行計算、建立漸變、定義顏色和應用效果。以下部分解釋了 CSS 中一些重要的函式類別。

數學函式

數學函式用於動態計算響應式元素的大小。

  • calc(): 此函式直接在 CSS 中執行計算，例如加法、減法。例如，width: calc(100% - 50px);
  • min()、max() 和 clamp(): 這些函式設定值的限制。例如，width: max(100%, 100px); 這將寬度設定為 100% 的父級寬度和 100px 中的最大值。

漸變函式

漸變函式用於為背景樣式建立平滑的顏色過渡。以下是漸變函式的型別：

  • linear-gradient(): 沿指定方向建立線性顏色漸變。例如，background: linear-gradient(to right, #3498db, #2ecc71);
  • radial-gradient(): 從中心點開始建立圓形漸變。例如，background: radial-gradient(circle, #ff9a9e, #fad0c4);
  • conic-gradient(): 建立圍繞中心點旋轉的漸變，產生錐形效果。
選擇背景漸變

要了解如何生成漸變，請檢視CSS 漸變章節。

顏色函式

顏色函式提供對顏色的精確控制，包括不透明度和各種顏色模型，以實現細微的效果。

  • rgb() 和 rgba(): 這些函式使用紅、綠、藍值定義顏色。rgba() 包括用於不透明度的 alpha 通道，例如，rgba(52, 152, 219, 0.5)。
  • hsl() 和 hsla(): 使用色相、飽和度和亮度來定義顏色，hsla() 新增 alpha 以實現透明度。例如，hsla(210, 50%, 50%, 0.8)。

檢視CSS 顏色以瞭解有關顏色函式的更多資訊。

濾鏡函式

濾鏡函式將視覺效果應用於元素，例如模糊、亮度調整和顏色變化。

示例：blur() 新增模糊效果，brightness() 調整光照水平，contrast() 更改對比度，grayscale() 應用灰度濾鏡，hue-rotate() 旋轉影像中的顏色。

CSS 特異性順序

CSS 特異性 決定了當使用多個選擇器宣告多個 CSS 規則時，哪個 CSS 規則適用於某個元素。下圖顯示了 CSS 選擇器的特異性順序。

Specificity Order

例如，如果使用類選擇器和 ID 選擇器在 HTML 元素上指定兩個或多個 CSS 規則，則將在該元素上應用特異性值最高的選擇器（在本例中為 ID 選擇器）中宣告的屬性。

覆蓋特異性規則

如果某個屬性被標記為 !important，則特異性順序變得無關緊要。這意味著，如果任何選擇器中的任何屬性都被標記為 important，則無論使用哪個選擇器，該屬性都具有最高的優先順序。檢視關於!important 規則 的章節以瞭解更多資訊。現在，讓我們來看一個覆蓋特異性規則的示例。

<!DOCTYPE html> 
<html>

<head>
    <style>
        p {
            color: black;
            font-weight: bold;
        }
        .special {
            color: blue;
        }
        #unique {
            color: darkgreen;
        }
        p {
            color: darkred !important;
        }
    </style>
</head>

<body>
    <p id="unique" class="special">
        This paragraph is darkred. The !important keyword wins 
        over every other selector!!! 
    </p>

    <p class="special" style="color: green">
        This paragraph is darkred. The !important keyword wins 
        even over inline style!!! 
    </p>
</body>

</html>

CSS 簡寫屬性

CSS 中的簡寫屬性用於將多個屬性宣告組合成單個屬性。這些對於減少程式碼行數至關重要。以下是 CSS 中的簡寫屬性。

邊距和填充簡寫屬性

屬性 margin 是以下屬性的簡寫

類似地，padding 也是其各個屬性的簡寫。讓我們來看一個關於兩者的示例。

margin: [top] [right] [bottom] [left];
padding: [top] [right] [bottom] [left];

/* Example */
margin: 10px 20px 10px 20px;
padding: 5px 20px 20px 10px;

邊框和輪廓簡寫屬性

屬性 border 是以下屬性的簡寫

類似地，outline 也是其各個屬性的簡寫。讓我們來看一個關於兩者的示例。

border: [width] [style] [color];
outline: [width] [style] [color];

/* Example */
border: 1px solid black;
outline: 2px dashed red;

背景簡寫屬性

屬性 background 是以下屬性的簡寫

以下是使用背景簡寫屬性的語法

background: [bg-color] [bg-image] [bg-position]/[bg-size] [bg-repeat]
            [bg-origin] [bg-clip] [bg-attachment];

/* Example */
background: green url('image.jpg') top/20% no-repeat border-box 
            content-box fixed;

如果要新增 `background-size`，則必須將其緊跟在 `background-position` 之後，並用 '/' 分隔。例如：“left/50%”。

字型簡寫屬性

屬性 font 是以下屬性的簡寫

  • font-style：指定字型的樣式，例如普通、斜體或傾斜。
  • font-variant：控制替代字形的用法，例如小型大寫字母。
  • font-weight：設定字型的粗細或粗體。
  • font-size：定義字型的尺寸。
  • line-height：控制文字行之間的間距。
  • font-family：指定要用於文字的字體系列，例如 Arial 或 Times New Roman。

以下是使用字型簡寫屬性的語法

font: [font-style] [font-variant] [font-weight] [font-size]
      /[line-height] [font-family];

/* Example */
font: italic small-caps bold 16px/1.5 Arial, sans-serif;

Flex 和 Grid 簡寫屬性

屬性 flex 是以下屬性的簡寫

  • flex-grow：定義彈性專案相對於其餘專案的增長能力。
  • flex-shrink：設定彈性專案在必要時收縮的能力。
  • flex-basis：指定彈性專案的初始主要尺寸。

類似地，屬性 grid 也是其各個屬性的簡寫。讓我們來看一個關於兩者的示例。

flex: [grow] [shrink] [basis];
grid: [rows] [columns] [template];

/* Example */
flex: 1 0 auto;
grid: 1fr 2fr / repeat(3, 1fr);

動畫和過渡簡寫屬性

屬性 animation 是以下屬性的簡寫

類似地，屬性 transition 也是其各個屬性的簡寫。讓我們來看一個關於兩者的示例。

animation: [name] [duration] [timing-function] [delay] [iteration-
            count] [direction] [fill-mode] [play-state];
transition: [property] [duration] [timing-function] [delay];

/* Example */
animation: slide 2s ease-in 0s infinite alternate;
transition: opacity 0.5s ease-in;

CSS 重置和規範化

每個瀏覽器都有其自己的預設樣式，如果管理不當，會導致設計不一致。CSS 重置和規範化是確保不同瀏覽器樣式一致的兩種方法。讓我們詳細瞭解一下。

  • CSS 重置：重置透過使用通用選擇器 (*) 將幾乎所有 CSS 屬性設定為基線（例如，邊距、填充、字型大小等通常設定為零）來刪除所有預設瀏覽器樣式。透過這種方法，我們可以從“乾淨的底板”開始，根據需要新增樣式。我們還可以使用外部重置工具，例如Eric Meyer 的 CSS 重置。
    • /* Resetting using universal selector */
*{
    margin: 0;
    padding: 0;
}
  • CSS 規範化：規範化與重置不同，它保留有用的預設樣式，只修改瀏覽器之間不一致的地方，這樣可以保留在大多數瀏覽器中樣式相似的元素。

CSS 預處理器

CSS 預處理器是用於透過新增程式設計功能（例如變數、巢狀和函式）來擴充套件 CSS 功能的工具。然後，這些預處理器中編寫的程式碼將被編譯成標準 CSS，供瀏覽器解釋。以下是流行的 CSS 預處理器。

SASS 預處理器

SASS 代表 Syntactically Awesome Style Sheets，是一種流行的 CSS 預處理器，用於向 CSS 新增程式設計功能。它支援變數、巢狀規則、mixin（可重用樣式）和函式。SASS 檔案通常使用 .scss 或 .sass 副檔名，並編譯成標準 CSS。以下是一個 SASS 檔案的示例程式碼。

/* Example of SASS syntax */
$primary-color: #3498db;

.container {
    color: $primary-color;
    .item {
        padding: 10px;
        &:hover {
            background-color: lighten($primary-color, 20%);
        }
    }
}

LESS 預處理器

LESS 是另一個 CSS 預處理器，它提供與 SASS 類似的功能，例如變數、巢狀和 mixin。LESS 的語法比 SASS 更簡單，尤其是在使用 @ 符號宣告變數時。LESS 檔案使用 .less 副檔名，可以編譯成 CSS，也可以使用 JavaScript 在瀏覽器中執行。

/* Example of LESS syntax */
@primary-color: #2ecc71;

.container {
    color: @primary-color;
    .item {
        padding: 15px;
        &:hover {
            background-color: darken(@primary-color, 10%);
        }
    }
}

新的 CSS 框架

CSS 框架是預先編寫的庫，使用現成的元件和實用程式簡化 Web 開發。以下是流行的 CSS 框架。

Bootstrap CSS 框架

Bootstrap 是一個流行的 CSS 框架，用於建立響應式網站。它具有各種預構建元件，例如導航欄、按鈕、網格和表單控制元件，以及靈活的網格系統。使用 Bootstrap，您可以快速開發適應不同螢幕尺寸的佈局。

Tailwind CSS 框架

Tailwind CSS 是一個實用優先的 CSS 框架，它提供低階實用程式類來構建自定義設計。Tailwind 不會像 Bootstrap 框架那樣提供預定義的元件。相反，它專注於透過提供邊距、填充、對齊等實用程式來賦予開發人員完全的控制權。

用於輔助功能的 CSS

CSS 可用於使網站對所有使用者（包括殘疾使用者）都可訪問。使用 CSS 增強輔助功能可確保內容更容易感知、理解和導航，從而創造更具包容性的網路體驗。以下是使 CSS 可訪問的一些步驟。

輔助功能最佳實踐

CSS 中的以下最佳實踐可以增強輔助功能和可用性

  • 對比度和可讀性：確保文字和背景顏色之間的對比度足夠高，以確保可讀性。使用諸如 WebAIM 對比度檢查器之類的工具來驗證對比度比。
  • 使用語義化 HTML 並避免使用樣式進行結構設計：使用 CSS 進行演示，而不是建立結構，因為 HTML 語義將頁面的層次結構傳達給輔助技術。
  • 避免無法訪問的隱藏內容：僅在需要時才使用 CSS 屬性（如 visibility: hidden 或 display: none）謹慎地隱藏內容。
  • 支援高對比度模式：使用媒體查詢來調整作業系統上高對比度模式下的樣式，以幫助視力障礙使用者。
  • 謹慎地將 ARIA 角色與 CSS 配合使用：確保 CSS 更改與 ARIA 角色保持一致，以提高與螢幕閱讀器的相容性。

CSS 效能最佳化

最佳化 CSS 將有助於提高網頁的載入時間和渲染效能。高效編寫的 CSS 樣式表可以減少頁面膨脹，即使在較慢的網路或功能較弱的裝置上也能確保更好的使用者體驗。

編寫最佳化的 CSS 的技巧

以下是編寫最佳化的 CSS 樣式表的一些技巧

  • 最小化選擇器：使用簡單的選擇器來減少渲染時間。深度巢狀和過於具體的選擇器需要時間來處理，從而使網站變慢。
  • 使用簡寫屬性：簡寫屬性有助於減少 CSS 程式碼的整體大小，使其更容易維護和載入速度更快。
  • 避免冗餘 CSS：刪除未使用的或重複的 CSS 規則以減小檔案大小，這反過來會減少頁面載入時間。
  • 使用模組化 CSS 進行組織：將 CSS 分解成可重用的元件（例如，使用實用程式類）以最大限度地減少重複程式碼。使用像 Tailwind CSS 這樣的框架來獲得內建的實用程式類和元件。

用於最佳化 CSS 效能的工具

一些工具可以幫助分析和最佳化 CSS 效能，例如

  • Chrome DevTools：使用 Chrome 的內建 DevTools 檢查、編輯和最佳化 CSS。它允許您識別未使用的 CSS 並衡量效能指標。
  • CSS Stats：提供有關 CSS 檔案大小、選擇器計數、唯一顏色等的詳細報告，以幫助簡化您的 CSS。
  • PurgeCSS：透過分析網頁上實際使用的樣式來幫助刪除未使用的 CSS，從而減小最終 CSS 的大小。
  • Autoprefixer： 自動新增 CSS 供應商字首，使程式碼與不同的瀏覽器相容，無需為每個字首編寫額外的程式碼。
  • PostCSS： 一個使用外掛處理 CSS 的工具，用於最佳化，例如縮小、自動新增字首和媒體查詢組織。

常見問題和故障排除

在使用 CSS 時，某些常見問題可能會破壞設計和佈局。瞭解如何識別和解決這些問題非常重要。

常見問題及解決方法

  • 意外的邊距和填充：有時瀏覽器會自動將預設邊距和填充應用於元素，這可能會導致佈局不一致。要解決此問題，請使用萬用字元選擇器將所有元素的 margin: 0 和 padding: 0 設定為 0。
  • 元素重疊：由於定位或浮動問題，元素可能會重疊。您可以透過檢查 z-index 值並根據需要確保正確使用 position 屬性（例如 relative、absolute 或 fixed）來解決此問題。
  • Flexbox 或 Grid 對齊錯誤： Flex 和 Grid 佈局有時可能出現對齊錯誤。請確認容器和專案屬性（如 justify-content、align-items 和 grid column/row 設定）是否正確應用。
  • 使用註釋：在程式碼中添加註釋以解釋複雜的樣式，這也有助於未來的開發者理解 CSS 規則的目的和功能。

CSS 除錯

除錯工具用於解決程式碼中的邏輯錯誤。以下是除錯 CSS 樣式表的一些常用方法。

  • 審查元素工具：使用 Chrome 和 Firefox 等瀏覽器中的“審查元素”工具來檢查樣式的應用位置。此工具突出顯示繼承的樣式，並有助於發現意外的覆蓋。
  • CSS 驗證：CSS 驗證工具，例如W3C CSS 驗證器，可以幫助識別語法錯誤和不受支援的屬性，從而防止渲染問題。
  • 檢查控制檯警告：大多數 CSS 錯誤都可以透過正確分析瀏覽器中的控制檯警告來解決。
  • 使用開發者版瀏覽器：開發者版瀏覽器專為開發者設計，具有額外的除錯和測試功能。

CSS 最佳實踐

遵循 CSS 最佳實踐有助於建立簡潔、有序且高效的樣式表，使程式碼更易於維護和改進。這包括保持程式碼模組化、使用命名約定以及採用預處理器等實用工具以獲得額外功能。

編寫簡潔易維護的 CSS

編寫易於維護的 CSS 涉及邏輯地組織樣式並使用一致的命名。對類似樣式進行分組，註釋程式碼，並遵循諸如 BEM（塊元素修飾符）之類的命名約定，以提高畫質晰度和可重用性。這些實踐使管理樣式隨著專案增長變得更容易。

/* BEM Naming Convention Example */
.button {
    background-color: #007bff;
}

.button--large {
    padding: 1rem 2rem;
}

使用 CSS 預處理器

如前幾節所述，CSS 預處理器，例如SASS和LESS，為樣式表提供了程式語言的功能。透過這些，我們可以使用變數、巢狀規則、mixin 等。

$primary-color: #007bff;

.button {
    background-color: $primary-color;
    
    &--large {
        padding: 1rem 2rem;
    }
}
列印頁面
上一頁
下一頁
廣告