社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 《給所有人的權威 CSS 指南》中的掌握 CSS |第2部分

《給所有人的權威 CSS 指南》中的掌握 CSS |第2部分

Mary-Kate Olsen
發布： 2025-01-03 15:09:41
原創
990 人瀏覽過

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

目錄

No. Section Link
1 Responsive Design Principles Link
2 CSS Variables and Custom Properties Link
3 Animations and Transitions Link
4 Best Practices and Organization Link

響應式設計原則

在當今的多設備世界中，響應式設計不是可選的，而是必不可少的。無論是在智慧型手機還是大型桌面顯示器上查看，您的網站都應該看起來很棒。

媒體查詢

媒體查詢是您的響應式設計超能力：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
登入後複製
登入後複製
登入後複製

響應單位

使用相對單位使您的設計自然響應：

  • rem：相對於根元素的字體大小
  • em：相對於父元素的字體大小
  • vw/vh：相對於視口尺寸
  • %：相對於父元素的大小

實踐練習：回應服務部分

創建一個響應式服務部分，使用媒體查詢和靈活的單元無縫適應不同的螢幕尺寸。

HTML：

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
登入後複製

CSS：讓我們來探索一下服務部分的更具體的斷點。 

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}
登入後複製
登入後複製

參考：

  • MDN Web 文件 - 響應式設計基礎 - 響應式設計概念的精彩介紹，涵蓋視窗、斷點和靈活佈局。
  • FreeCodeCamp - 響應式網頁設計認證 - 涵蓋響應式設計原則、網格、媒體查詢和可訪問性的完整課程。
  • 我可以使用 - 檢查瀏覽器相容性以取得響應式設計功能，例如媒體查詢和 Flexbox。
  • 響應式設計備忘單 - 以易於理解的格式涵蓋關鍵的響應式設計屬性和技術。

CSS 變數和自訂屬性

CSS 變數（自訂屬性）為您的樣式表帶來類似程式設計的彈性。它們使維護更容易並實現動態造型。 

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}
登入後複製
登入後複製

實踐練習：用於主題化和可重複使用性的 CSS 變量 

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }
登入後複製

參考：

  • MDN Web 文件 - 使用 CSS 自訂屬性（變數） - 全面、適合初學者的解釋，包含定義、使用和更新 CSS 變數的範例。
  • W3Schools - CSS 變數 - 透過即時程式碼範例涵蓋 CSS 變數的基礎知識，以便快速練習。
  • CSS 技巧 - 自訂屬性完整指南 - 綜合指南，包含真實用例和進階變數使用技巧。
  • Freecodecamp - CSS 變數完整手冊 - 探索強大的技術，例如級聯效果、基於媒體查詢的變數和範圍管理。

動畫和過渡

為您的網站添加動感可創造引人入勝的使用者體驗。 CSS 提供了兩種主要的動畫製作方式：

過渡

非常適合簡單的狀態變更：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
登入後複製
登入後複製
登入後複製

關鍵影格動畫

對於更複雜的多步驟動畫：

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
登入後複製
登入後複製

先進的動畫技術

動畫中的 CSS 自訂屬性：

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}
登入後複製
登入後複製

進階關鍵影格動畫： 

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}
登入後複製
登入後複製

實踐練習：互動卡

建立具有懸停效果的互動式卡片：

HTML：

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
登入後複製
登入後複製
登入後複製

參考：

  • MDN Web 文件 - CSS 過渡 - 對 CSS 過渡的清晰介紹，解釋如何在更改樣式時創建平滑效果。
  • MDN Web 文件 - CSS 動畫 - 關鍵影格、動畫屬性和創建複雜動畫的逐步指南。
  • W3Schools - CSS 轉場 - 適合初學者使用即時程式碼編輯器以互動方式練習過渡和動畫。
  • W3Schools - CSS 動畫 - 關於使用關鍵影格和轉場為網站添加動畫的簡單易懂的指南。
  • CSS 技巧 - 動畫 - 討論響應式動畫、減少可訪問性的運動以及媒體查詢整合。
  • Animate.css - 一個流行的 CSS 庫，提供預先建立的動畫，您可以輕鬆添加到您的專案中。

最佳實踐和組織

CSS架構

  • 使用一致的命名約定
  • 依組件/功能組織 CSS 檔案
  • 盡可能保持較低的特異性
  • 有效註解你的程式碼 
<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
登入後複製
登入後複製

實踐練習：CSS 架構的最佳實踐 



    
    
    <title>CSS 架構練習</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- 重設預設瀏覽器樣式 -->
    <link rel="stylesheet" href="styles/layout.css"> <!-- 佈局相關的樣式 -->
     <!-- 標題元件樣式 -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- 卡片組件樣式 -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- 用於快速修復的實用程式類別 -->
頭>

    



<h3>
  
  
  參考：
</h3>
登入後複製
  • BEM - 區塊元素修飾符 - 一種流行的命名 CSS 類別和建立樣式以提高可重複使用性和可維護性的方法。
  • SMACSS - CSS 的可擴展和模組化架構 - 將 CSS 組織為邏輯和可維護類別的詳細框架。
  • Harry Roberts 的 CSS 指南 - 使用邏輯檔案結構和命名約定編寫可擴展、可維護的 CSS 的高品質指南。

建造時間到了！ ？

現在輪到你將所學付諸實踐了！這是你的挑戰：

  • 建立新的 CodePen（在 codepen.io 上免費）
  • 建立我們介紹的範例和練習
  • 分享您的創作！ 在下面的評論中加入您的 CodePen 連結

獎勵積分：在設計中加入自己的創意！我會親自審核並回覆評論中分享的每則 CodePen。

？ 專業提示：請記得在 CSS 中加入註解來解釋您的想法。它可以幫助其他人從您的程式碼中學習！

接下來是什麼？ ？

這是我們的 CSS 從零到英雄系列的第 2 部分。我們將在接下來的文章中更深入地探討更令人興奮的 CSS 概念。為了確保您不會錯過：

  1. ？ 為這篇文章加書籤以便在編碼時快速參考
  2. ❤️ 喜歡這篇文章如果您覺得它有幫助（它也可以幫助其他人找到它！）
  3. ？ 追蹤我觀看本系列的下一部分

讓我們聯絡吧！ ？

你有嘗試過練習嗎？有疑問嗎？在評論中分享您的經驗！我回覆每條評論並喜歡看到您的進步。

第三部分見！快樂編碼！ ??‍??‍?

以上是《給所有人的權威 CSS 指南》中的掌握 CSS |第2部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：dev.to
上一篇：如何在 PHP 中透過類別名稱尋找 DOM 元素？ 下一篇：為什麼 CSS 邊距和填充百分比與寬度相關，而不是與高度相關？
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2391
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2522
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2141
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
2017
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2093
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板