HTML 中的 CSS 使用說明

CSS 使用說明

1. CSS 概述

CSS (Cascading Style Sheets) 是一種用于描述 HTML 或 XML（包括如 SVG、MathML 等 XML 方言）文檔呈現的樣式表語言。CSS 描述了元素應該如何在屏幕、紙張或其他媒體上顯示。

2. CSS 的基本語法

CSS 規則由兩個主要部分組成：選擇器和聲明塊。

選擇器 { 屬性: 值; 屬性: 值; ... }

例如：

p { color: red; font-size: 16px; }

3. CSS 引入方式

3.1 內聯樣式（Inline Style）

直接在 HTML 元素的 style 屬性中定義 CSS。

<p style="color: red; font-size: 16px;">這是紅色文本</p>

3.2 內部樣式表（Internal Style Sheet）

在 HTML 文檔的 <head> 部分使用 <style> 標簽定義 CSS。

<head><style>p { color: red; font-size: 16px; }</style>
</head>

3.3 外部樣式表（External Style Sheet）

創建單獨的 .css 文件，然后在 HTML 中通過 <link> 標簽引入。

<head><link rel="stylesheet" href="styles.css">
</head>

4. 選擇器

4.1 基本選擇器

  • 元素選擇器：選擇特定類型的元素

    p { color: blue; }

  • ID 選擇器：選擇具有特定 ID 的元素（ID 是唯一的）

    #header { background-color: gray; }

  • 類選擇器：選擇具有特定類的元素

    .container { width: 100%; }

  • 通用選擇器：選擇所有元素

    * { margin: 0; padding: 0; }

4.2 組合選擇器

  • 后代選擇器：選擇元素內的所有后代元素

    div p { color: green; }

  • 子選擇器：選擇元素的直接子元素

    div > p { color: purple; }

  • 相鄰兄弟選擇器：選擇緊接在另一個元素后的元素

    p + ul { margin-top: 10px; }

  • 通用兄弟選擇器：選擇在另一個元素后的所有兄弟元素

    p ~ ul { margin-left: 20px; }

4.3 屬性選擇器

選擇具有特定屬性或屬性值的元素

[href] { color: blue; }
[href="https://example.com"] { color: green; }
[class^="box-"] { border: 1px solid black; }
[class$="-active"] { background-color: yellow; }

4.4 偽類和偽元素

  • 偽類：選擇處于特定狀態的元素

    a:hover { color: red; }
p:first-child { font-weight: bold; }
input:focus { border: 2px solid blue; }

  • 偽元素：選擇元素的特定部分

    p::first-line { font-size: 120%; }
p::before { content: "? "; }
p::after { content: " ..."; }

5. 常用 CSS 屬性

5.1 文本相關

  • color：設置文本顏色
  • font-family：設置字體類型
  • font-size：設置字體大小
  • font-weight：設置字體粗細
  • text-align：設置文本對齊方式（left、right、center、justify）
  • text-decoration：設置文本裝飾（none、underline、overline、line-through）
  • line-height：設置行高

5.2 背景相關

  • background-color：設置背景顏色
  • background-image：設置背景圖片
  • background-repeat：設置背景圖片是否重復
  • background-position：設置背景圖片位置
  • background-size：設置背景圖片大小

5.3 盒模型相關

  • width、height：設置元素的寬度和高度
  • margin：設置元素外部邊距
  • padding：設置元素內部填充
  • border：設置元素邊框
  • box-sizing：設置盒模型計算方式（content-box、border-box）

5.4 定位相關

  • position：設置元素定位方式（static、relative、absolute、fixed、sticky）
  • top、right、bottom、left：設置元素的偏移量
  • display：設置元素的顯示類型（block、inline、inline-block、none 等）
  • float：設置元素的浮動方式（left、right、none）
  • clear：清除浮動（left、right、both、none）

5.5 其他常用屬性

  • opacity：設置元素透明度
  • cursor：設置鼠標指針樣式
  • z-index：設置元素的堆疊順序
  • overflow：設置元素溢出內容的處理方式

6. CSS 盒模型

CSS 盒模型是 CSS 布局的基礎，它由以下部分組成：

  1. 內容區域（content）：顯示實際內容的部分
  2. 內邊距（padding）：內容與邊框之間的空白
  3. 邊框（border）：圍繞內邊距的邊界
  4. 外邊距（margin）：元素與其他元素之間的空白

盒模型示意圖

.box {width: 300px;height: 200px;padding: 20px;border: 5px solid black;margin: 15px;box-sizing: border-box; /* 設置為 border-box 時，width/height 包含 padding 和 border */
}

7. CSS 布局技術

7.1 Flexbox（彈性盒子）

Flexbox 是一種一維布局模型，用于創建靈活的布局結構。

.container {display: flex;flex-direction: row; /* row | row-reverse | column | column-reverse */justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around */align-items: center; /* stretch | flex-start | flex-end | center | baseline */flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

7.2 Grid（網格布局）

Grid 是一種二維布局模型，可同時處理行和列。

.container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 創建3個等寬列 */grid-template-rows: 100px 200px; /* 創建2行，高度分別為100px和200px */grid-gap: 10px; /* 網格項之間的間距 */
}

7.3 響應式設計

使用媒體查詢（Media Queries）創建適應不同屏幕尺寸的布局。

/* 當屏幕寬度小于 768px 時應用的樣式 */
@media (max-width: 768px) {.container {flex-direction: column;}.sidebar {display: none;}
}

8. CSS 優先級和繼承

8.1 優先級

當多個選擇器應用于同一個元素時，CSS 會按照以下優先級順序應用樣式：

  1. 內聯樣式（style 屬性）
  2. ID 選擇器
  3. 類選擇器、屬性選擇器、偽類
  4. 元素選擇器、偽元素
  5. 通用選擇器

可以使用 !important 覆蓋任何樣式，但應謹慎使用。

8.2 繼承

某些 CSS 屬性會從父元素繼承到子元素，如 color、font-family 等。
可以使用 inherit、initial 或 unset 控制屬性的繼承行為。

div {color: red; /* 所有子元素默認會繼承這個顏色 */
}p {color: inherit; /* 顯式繼承父元素的顏色 */
}span {color: initial; /* 使用屬性的初始值 */
}

9. CSS 變量（自定義屬性）

CSS 變量允許您定義可重用的值，有助于維護和主題化。

:root {--primary-color: #3498db;--secondary-color: #2ecc71;--spacing-unit: 16px;
}.header {background-color: var(--primary-color);padding: var(--spacing-unit);
}.button {background-color: var(--secondary-color);margin: calc(var(--spacing-unit) * 2);
}

10. 最佳實踐

  1. 組織和維護

    • 使用有意義的選擇器名稱
    • 按邏輯分組相關樣式
    • 使用注釋解釋復雜樣式
    • 考慮使用 CSS 預處理器（如 Sass、Less）提高代碼可維護性

  2. 性能優化

    • 減少選擇器的復雜性
    • 避免過度使用 !important
    • 合并和壓縮 CSS 文件
    • 使用 CSS 變量代替重復值

  3. 可訪問性

    • 確保文本與背景的對比度符合 WCAG 標準
    • 避免依賴顏色來傳達信息
    • 確保交互元素有適當的狀態指示（hover、focus 等）

  4. 響應式設計

    • 使用相對單位（如 em、rem、%、vh、vw）
    • 采用移動優先的設計方法
    • 使用媒體查詢適配不同設備
    • 測試不同屏幕尺寸下的布局

11. 示例代碼

以下是一個綜合示例，展示了 CSS 的多種用法：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 示例</title><style>/* CSS 變量定義 */:root {--primary-color: #3498db;--text-color: #333;--background-color: #f5f5f5;--border-radius: 8px;--spacing: 20px;}/* 重置默認樣式 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Arial', sans-serif;color: var(--text-color);background-color: var(--background-color);line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: var(--spacing);}header {background-color: var(--primary-color);color: white;padding: calc(var(--spacing) * 1.5);text-align: center;border-radius: var(--border-radius) var(--border-radius) 0 0;}nav {background-color: white;padding: var(--spacing);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}nav ul {display: flex;list-style: none;gap: var(--spacing);}nav a {text-decoration: none;color: var(--text-color);padding: 8px 16px;border-radius: 4px;transition: background-color 0.3s;}nav a:hover {background-color: var(--background-color);}.main-content {display: grid;grid-template-columns: 2fr 1fr;gap: var(--spacing);margin: var(--spacing) 0;}article {background-color: white;padding: var(--spacing);border-radius: var(--border-radius);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}aside {background-color: white;padding: var(--spacing);border-radius: var(--border-radius);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}footer {background-color: #2c3e50;color: white;text-align: center;padding: var(--spacing);border-radius: 0 0 var(--border-radius) var(--border-radius);}/* 響應式設計 */@media (max-width: 768px) {.main-content {grid-template-columns: 1fr;}nav ul {flex-direction: column;}}</style>
</head>
<body><div class="container"><header><h1>CSS 示例頁面</h1></header><nav><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">聯系我們</a></li></ul></nav><div class="main-content"><article><h2>主要內容</h2><p>這是一個使用 CSS 布局的示例頁面。</p></article><aside><h3>側邊欄</h3><p>這里是側邊欄內容。</p></aside></div><footer><p>&copy; 2023 CSS 示例。保留所有權利。</p></footer></div>
</body>
</html>

12. 學習資源

  • MDN Web Docs - CSS
  • CSS-Tricks
  • W3Schools CSS 教程
  • CSS Diner - 學習 CSS 選擇器的游戲
  • Flexbox Froggy - 學習 Flexbox 的游戲
  • Grid Garden - 學習 Grid 布局的游戲

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/921554.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/921554.shtml
英文地址，請注明出處：http://en.pswp.cn/news/921554.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

gitlab推送失敗，內存不足的處理

gitlab推送失敗，內存不足的處理

git提交時報錯&#xff1a; 2025-09-03 20:03:32.583 [info] > git push origin master:master [4866ms]2025-09-03 20:03:32.583 [info] fatal: Out of memory, malloc failed (tried to allocate 1048576000 bytes)看了下服務器內存&#xff0c;空余的只有幾百M了。 用hto…
閱讀更多...
【FastDDS】Discovery （ 05-Discovery Server Settings）

【FastDDS】Discovery （ 05-Discovery Server Settings）

發現服務器設置 這種機制基于客戶端-服務器發現模式，即元流量（域參與者之間用于識別彼此的消息交換）由一個或多個服務器域參與者管理（左圖），而在簡單發現（右圖）中，元流量通過IP多播協議等消息廣播機制進行交換。有一款發現服務器工具可簡化發現服務器的設置和測試。 …
閱讀更多...
Xilinx ZYNQ 開發環境中搭建Qt環境

Xilinx ZYNQ 開發環境中搭建Qt環境

在 Xilinx ZYNQ 開發環境中搭建 Qt 環境，意味著你要開發運行在 ZYNQ 嵌入式 Linux 系統上的 GUI 應用程序。這比在 PC 上搭建 Qt 要復雜一些，因為它涉及交叉編譯：在你的 PC（主機）上編譯出能在 ZYNQ 芯片（目標機）的 ARM Cortex-A9 核心上運行的程序。 整個過程可以分為以…
閱讀更多...
【數學建模】用代碼搞定無人機煙幕：怎么擋導彈最久？

【數學建模】用代碼搞定無人機煙幕：怎么擋導彈最久？

前言&#xff1a;歡迎各位光臨本博客&#xff0c;這里小編帶你直接手撕**&#xff0c;文章并不復雜&#xff0c;愿諸君耐其心性&#xff0c;忘卻雜塵&#xff0c;道有所長&#xff01;&#xff01;&#xff01;&#xff01; **&#x1f525;個人主頁&#xff1a;IF’Maxue-CSDN…
閱讀更多...
linux Kbuild詳解關于fixdep、Q、quiet、escsq

linux Kbuild詳解關于fixdep、Q、quiet、escsq

linux Kbuild詳解關于if_changed_rule的any-prereq和arg-check原理及info調試關于fixdep沒有展開&#xff0c;這里說下。 文章目錄1. escsq2. Q、quiet2. 1 make V(0、1、2&#xff09;2. 2 make V(0、1)來控制Q、quiet3. fixdep3. 1 fixdep是什么3. 2 fixdep為什么3.2.1 .conf…
閱讀更多...
notepad++ 正則表達式

notepad++ 正則表達式

在 Notepad 中&#xff0c;正則表達式&#xff08;Regular Expressions, Regex&#xff09; 是一個強大的搜索和替換工具&#xff0c;可以高效地處理文本。以下是 Notepad 正則表達式 的指南&#xff1a;1. 如何在 Notepad 中使用正則表達式打開搜索窗口&#xff1a;快捷鍵 Ctr…
閱讀更多...
MySQL Cluster核心優缺點

MySQL Cluster核心優缺點

MySQL Cluster 是 MySQL 官方提供的 分布式、內存優先、高可用 的數據庫解決方案&#xff08;基于 NDB 存儲引擎&#xff09;。它采用 Share-Nothing 架構&#xff0c;數據自動分片&#xff08;Sharding&#xff09;并分布在多個節點上&#xff0c;適用于需要極高可用性和實時性…
閱讀更多...
訓練+評估流程

訓練+評估流程

訓練評估流程1、要求2、訓練評估&#xff08;PyTorch TensorBoard &#xff09;完整代碼&#xff08;單文件示例&#xff09;運行方法功能對應表3、pytorch自定義評估要繼承哪個類&#xff1f;4、HF Trainer和SB35、 匯總1. PyTorch Lightning TensorBoard ModelCheckpoint …
閱讀更多...
【開題答辯全過程】以 基于Android的點餐系統為例，包含答辯的問題和答案

【開題答辯全過程】以 基于Android的點餐系統為例，包含答辯的問題和答案

個人簡介一名14年經驗的資深畢設內行人&#xff0c;語言擅長Java、php、微信小程序、Python、Golang、安卓Android等開發項目包括大數據、深度學習、網站、小程序、安卓、算法。平常會做一些項目定制化開發、代碼講解、答辯教學、文檔編寫、也懂一些降重方面的技巧。感謝大家的…
閱讀更多...
【音視頻】Http-FLV 介紹

【音視頻】Http-FLV 介紹

一、Http-FLV 原理 HTTP-FLV 是基于 HTTP 協議的 FLV&#xff08;Flash Video&#xff09;流媒體傳輸方式。它使用 HTTP 協議而不是傳統的 RTMP 協議來傳輸 FLV 格式的視頻流。HTTP-FLV 在 Web 視頻直播場景中得到了廣泛應用&#xff0c;尤其是在不支持或不希望使用 RTMP 協議的…
閱讀更多...
uniapp vue頁面傳參到webview.nvue頁面的html或者另一vue中

uniapp vue頁面傳參到webview.nvue頁面的html或者另一vue中

在app內部使用 uni.$emit(collectiones, { data: gx });傳到webview.nvue頁面 在webview.nvue頁面接受 uni.$on(collectiones, (data) > {console.log(接收到的數據:, data.data);});使用evalJS方法 nvue webview通信示例 這塊使用receiveMessageFromNvue方法這樣傳入的 u…
閱讀更多...
美團大模型“龍貓”登場，能否重塑本地生活新戰局？

美團大模型“龍貓”登場，能否重塑本地生活新戰局？

美團大模型“龍貓”登場&#xff0c;能否重塑本地生活新戰局&#xff1f; 美團大模型登場&#xff1a;行業投下重磅炸彈 在大模型技術迅猛發展的當下&#xff0c;每一次新模型的發布都如投入湖面的石子&#xff0c;激起層層漣漪。美團推出的龍貓大模型 LongCat-Flash&#xff0…
閱讀更多...
shell(十三)參數代換

shell(十三)參數代換

shell參數代換xargs. 產生命令的參數1. cut -d : -f 1 /etc/passwd | head -n 3 | xargs finger2. 執行前詢問用戶cut -d : -f 1 /etc/passwd | head -n 3 | xargs -p finger如果直接按回車就退出3. 指定查閱參數個數cut -d : -f 1 /etc/passwd | xargs -p -n 5 finger4. 指定遇…
閱讀更多...
Proteus 仿真 + STM32CubeMX 協同開發全教程：從配置到仿真一步到位

Proteus 仿真 + STM32CubeMX 協同開發全教程：從配置到仿真一步到位

為幫助你精準掌握「Proteus 仿真 STM32CubeMXSTM32F103R6」的協同開發流程&#xff0c;本文將聚焦該芯片的特性&#xff0c;從工具適配、分步實操到進階案例&#xff0c;用富文本格式清晰呈現細節&#xff0c;尤其適合新手入門 32 位單片機開發&#xff1a;ProteusSTM32CubeMX…
閱讀更多...
WIN10+ubuntu22.04.05雙系統裝機教程

WIN10+ubuntu22.04.05雙系統裝機教程

最近DIY了一臺5070TI顯卡主機&#xff0c;目的是跑IsaacSim5.0仿真&#xff0c;記錄雙系統裝機過程。 1.Ubuntu22.04.05系統盤制作 參考教程&#xff1a;01_【U盤制作ubuntu22.04啟動盤并為電腦安裝系統記錄】_制作ubuntu22.04安裝u盤-CSDN博客 U盤因為是64G的&#xff0c;而…
閱讀更多...
構建高可用二級緩存系統

構建高可用二級緩存系統

二級緩存機制原理詳解1. 整體架構MyBatis-Plus二級緩存采用裝飾器模式實現&#xff0c;核心組件包括&#xff1a;?Cache接口?&#xff1a;定義緩存基本操作?PerpetualCache?&#xff1a;基礎緩存實現&#xff08;HashMap&#xff09;?裝飾器?&#xff1a;如LruCache、Fif…
閱讀更多...
MacOS微信雙開，親測有效

MacOS微信雙開，親測有效

本機配置打開終端運行以下命令 第一步&#xff1a;sudo cp -R /Applications/WeChat.app /Applications/WeChat2.app第二步&#xff1a;sudo /usr/libexec/PlistBuddy -c "Set :CFBundleIdentifier com.tencent.xinWeChat2" /Applications/WeChat2.app/Contents/Info…
閱讀更多...
Drupal XSS漏洞復現：原理詳解+環境搭建+滲透實踐（CVE-2019-6341）

Drupal XSS漏洞復現：原理詳解+環境搭建+滲透實踐（CVE-2019-6341）

目錄 一、Drupal XSS漏洞 二、環境搭建 1、確保系統已安裝 Docker 和 Docker-Compose 2、下載 Vulhub 3、進入漏洞環境 4、啟動漏洞環境 5、查看環境狀態 6、初始化Drupal環境 &#xff08;1&#xff09;訪問 Drupal 安裝頁面 &#xff08;2&#xff09;完成圖形化安…
閱讀更多...
Redis復制延遲全解析:從毫秒到秒級的優化實戰指南

Redis復制延遲全解析:從毫秒到秒級的優化實戰指南

Redis主從延遲飆升導致數據不一致&#xff1f;訂單丟失、緩存穿透頻發&#xff1f;本文深入剖析8大復制延遲元兇&#xff0c;并提供解決方案&#xff0c;讓你的復制延遲從秒級降到毫秒級&#xff01; 一、復制延遲:分布式系統的隱形殺手 ?? 什么是復制延遲&#xff1f; 當主…
閱讀更多...
數據預處理與特征工程全流程指南：數據清洗、缺失值填補、類別特征編碼、特征縮放歸一化、特征選擇與降維（PCA/LDA）實戰解析

數據預處理與特征工程全流程指南：數據清洗、缺失值填補、類別特征編碼、特征縮放歸一化、特征選擇與降維（PCA/LDA）實戰解析

1. 數據預處理與特征工程 “數據清洗、缺失值填補、類別特征編碼、特征縮放/歸一化、特征選擇與降維&#xff08;PCA、LDA&#xff09;” 等流程&#xff0c;雖然被反復提到&#xff0c;但要在復雜的實際數據集中一步步落實&#xff0c;難度很大。 摘要 在機器學習與深度學習…
閱讀更多...
最新文章

Copyright @ 2022~2023