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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈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