当前位置：首页 > news >正文

CSS 样式表的四种应用方式详解以及css注释的应用

news 来源：原创 2025/7/10 10:38:27

一、外部 CSS（推荐方式）

定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签引入 HTML。

优点：

实现内容与样式完全分离
多个页面可共享同一 CSS 文件
浏览器可缓存 CSS 文件，提升加载速度

案例：

创建 styles.css 文件：

css

/* styles.css */
body {font-family: Arial, sans-serif;background-color: #f4f4f4;
}
h1 {color: #333;text-align: center;
}

在 HTML 中引入：

html

预览

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="styles.css">
</head>
<body><h1>外部 CSS 示例</h1>
</body>
</html>

二、内部 CSS（嵌入样式）

定义：将 CSS 代码放在 HTML 文件的 <style> 标签内，通常位于 <head> 中。

适用场景：

单页网站
样式仅适用于当前页面
快速原型开发

案例：

html

预览

<!DOCTYPE html>
<html>
<head><style>body {background-color: lightblue;}h2 {color: navy;margin-left: 20px;}</style>
</head>
<body><h2>内部 CSS 示例</h2>
</body>
</html>

三、行内 CSS（内联样式）

定义：直接在 HTML 元素的 style 属性中添加 CSS。

特点：

优先级最高（会覆盖外部和内部 CSS）
不支持选择器，仅作用于当前元素
维护成本高，不推荐大量使用

案例：

html

预览

<!DOCTYPE html>
<html>
<body><h1 style="color:red; text-align:center;">行内 CSS 示例</h1><p style="font-size:16px; color:blue;">这是一个段落</p>
</body>
</html>

四、多个样式表的使用

方式 1：多个外部 CSS 文件

html

预览

<head><link rel="stylesheet" href="reset.css"> <!-- 重置样式 --><link rel="stylesheet" href="main.css">  <!-- 主样式 --><link rel="stylesheet" href="responsive.css"> <!-- 响应式样式 -->
</head>

加载顺序规则：

后加载的样式会覆盖前面冲突的样式
建议按 "通用→特定" 的顺序加载

方式 2：内部 CSS 与外部 CSS 混用

html

预览

<head><link rel="stylesheet" href="base.css"> <!-- 基础样式 --><style>/* 覆盖外部样式的特定规则 */h1 {color: purple; /* 会覆盖base.css中的h1颜色 */}</style>
</head>

五、CSS 注释规范

单行注释：

css

/* 这是一个单行注释 */
body {margin: 0; /* 设置边距为0 */
}

多行注释：

css

/*这是一个多行注释用于说明复杂的样式块例如：导航栏样式
*/
nav {background-color: #333;color: white;
}

注释的最佳实践：

为每个样式区块添加标题注释

css

/* 导航栏样式 */
nav { ... }/* 按钮样式 */
.btn { ... }

解释复杂的样式逻辑

css

/* 使用calc()动态计算宽度，减去滚动条宽度 */
.container {width: calc(100% - 17px); /* 减去垂直滚动条宽度 */
}

标记临时样式

css

/* TODO: 完成后删除 - 测试用样式 */
.temp-style {border: 1px solid red;
}

六、四种样式应用方式的优先级

当同一元素有多个冲突样式时，优先级从高到低：

行内 CSS（直接在元素的 style 属性中）
内部 CSS（位于 <style> 标签中）
外部 CSS（通过 <link> 引入，后加载的覆盖先加载的）
浏览器默认样式

记忆口诀：
行内 > 内部 > 外部 > 默认

七、性能与维护建议

优先使用外部 CSS
便于维护和缓存，提升网站性能
谨慎使用行内 CSS
仅在需要临时覆盖所有样式时使用
合理拆分样式文件
例如：base.css（基础样式）、layout.css（布局）、components.css（组件）
避免嵌套过深
保持选择器简洁，减少样式计算复杂度
使用注释组织代码
按功能模块分组，提高代码可读性

通过合理选择和组合使用这四种样式应用方式，可以构建出结构清晰、可维护性强的 CSS 代码库。建议初学者从外部 CSS 入手，掌握基本用法后再深入研究样式优先级和高级应用技巧。

CSS 样式表的四种应用方式详解以及css注释的应用

一、外部 CSS（推荐方式） 定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签引入 HTML。优点： 实现内容与样式完全分离多个页面可共享同一 CSS 文件浏览器可缓存 CSS 文件，提升加载速度 …...

编程日记 2025/7/10 10:38:27

IntentUri页面跳转

android browser支持支持Intent Scheme URL语法的可以在wrap页面加载或点击时，通过特定的intent uri链接可以打开对应app页面，例如 <a href"intent://whatsapp/#Intent;schememyapp;packagecom.xiaoyu.myapp;S.help_urlhttp://Fzxing.org;end&qu…...

编程日记 2025/7/10 10:22:32

蓝桥杯2114 李白打酒加强版

问题描述话说大诗人李白, 一生好饮。幸好他从不开车。一天, 他提着酒显, 从家里出来, 酒显中有酒 2 斗。他边走边唱: 无事街上走，提显去打酒。逢店加一倍, 遇花喝一斗。这一路上, 他一共遇到店 N 次, 遇到花 M 次。已知最后一次遇到的是花, 他正好把酒喝光了。…...

编程日记 2025/7/10 10:21:47

[ 计算机网络 ] 深入理解OSI七层模型

🎉欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ 🎉感谢各位读者在百忙之中抽出时间来垂阅我的文章，我会尽我所能向的大家分享我的知识和经验📖 🎉希望我们在一篇篇的文章中能够共同进步！！&…...

编程日记 2025/6/27 23:12:30

实战：基于Pangolin Scrape API，如何高效稳定采集亚马逊BSR数据并破解反爬虫？

引言：BSR数据——亚马逊运营的"指南针" 在竞争激烈的亚马逊市场，BSR (Best Sellers Rank) 数据已经成为卖家们不可或缺的"指南针"。这一数字化指标不仅反映商品在特定品类中的销售表现，更直接影响平台的流量分配和消费者…...

编程日记 2025/6/27 23:19:44

电子制造企业智能制造升级：MES系统应用深度解析

在全球电子信息产业深度变革的2025年，我国电子信息制造业正经历着增长与转型的双重考验。据权威数据显示，2025年一季度行业增加值同比增长11.5%，但智能手机等消费电子产量同比下降1.1%，市场竞争白热化趋势显著。叠加关税政策调整、…...

编程日记 2025/6/27 23:14:17

lambda架构和kappa架构区别

Lambda架构与Kappa架构是大数据处理领域的两种核心架构模式，主要差异体现在数据处理逻辑、系统复杂度和适用场景等方面。以下是二者的详细对比分析： 一、核心设计差异 ‌Lambda架构包含三层：批处理层（Batch Layer）、…...

编程日记 2025/6/27 23:26:26

【css知识】flex-grow: 1

目录一、基本概念：二、工作原理：多个元素的情况： 三、实际应用示例：常见使用场景：注意事项： 四、最佳实践：五、与其他 flex 属性配合： 🚀写在最后 flex-grow: 1是什么&a…...

编程日记 2025/6/27 23:08:13

六足连杆爬行机器人的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序 4.系统原理简介 5.完整工程文件 1.课题概述六足连杆爬行机器人的simulink建模与仿真。通过simulink，对六足机器人的六足以及机身进行simulink建模，模拟其行走，仿真输出机器人行走时六足的坐…...

编程日记 2025/6/27 23:35:45

软考软件测评师——系统安全设计（防火墙技术）

目录一、核心概念解析二、技术联动体系三、技术局限认知四、网络架构设计五、防护系统测试规范一、核心概念解析 1. 防火墙技术网络安全基础防护体系，通过软硬件结合方式在内外部网络间建立隔离屏障。核心作用包括流量监控、访问控制、日志记录三大模块…...

编程日记 2025/6/27 22:59:29

漏洞检测与渗透检验在功能及范围上究竟有何显著差异？

漏洞检测与渗透检验是确保系统安全的重要途径，这两种方法各具特色和功效，它们在功能上有着显著的差异。目的不同漏洞扫描的主要任务是揭示系统内已知的安全漏洞和隐患，这就像是对系统进行一次全面的健康检查，看是否有已知的疾…...

编程日记 2025/6/27 23:29:22

探秘「4+3原型驱动的交付模式」如何实现软件快速定制

软件行业长期受困于需求沟通难题：客户需求表达不清、频繁变更及真伪需求混杂难辨；终端业务部门参与度低加剧后期确认困难，加之调研结果传递失真引发功能实现偏差——"需求黑洞"始终是甲乙双方的共同痛点。然而，NC科技…...

编程日记 2025/7/10 10:27:32

C语言入门

一、认识C语言什么是C语言 C语言是一门通用计算机编程语言，广泛应用于底层开发。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。尽管C语言提供了许多低级处理的功能&#xff0c…...

编程日记 2025/7/10 10:24:04

java 异常验证框架validation，全局异常处理，请求验证

1、依赖异常验证框架validation<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>${spring-boot.version}</version></dependency> 当鼠标放在依…...

编程日记 2025/6/27 23:07:44

如何使用VH6501进行CAN采样点测试

Vector 的 VH6501 是一种专为 CAN 和 CAN FD 网络设计的干扰测试设备，集成了干扰生成和 CANoe 网络接口功能，支持通过 CAPL 脚本实现测试自动化。硬件规格如下： VH6501采样点测试原理是：干扰一帧报文中某一位的采样点附近的总线电…...

编程日记 2025/6/27 23:28:27

QT6 源（113）篇二：阅读与注释工具栏 QToolBar，给出源码

（9）本源码来自于头文件 qtoolbar . h ： #ifndef QDYNAMICTOOLBAR_H #define QDYNAMICTOOLBAR_H#include <QtWidgets/qtwidgetsglobal.h> #include <QtGui/qaction.h> #include <QtWidgets/qwidget.h>QT_REQUIRE_CONFIG(to…...

编程日记 2025/6/27 23:11:08

编程日志5.13

邻接表的基础代码 #include<iostream> using namespace std; //邻接表的类声明 class Graph {private: //结构体EdgeNode表示图中的边结点，包含顶点vertex、权重weight和指向下一个边结点的指针next struct EdgeNode { int vertex; int weight; …...

编程日记 2025/6/27 23:08:29

Java 08集合

集合 Collection 接口，不可以创建对象add clear remove contains(Object obj);判断是否存在 isEmpty 空返回为true sizeArrayList Collection<String> cnew ArraryList<>(); 以多态的方法创建集合对象，调用单列集合中的共有方法编译看…...

编程日记 2025/6/27 23:21:37

CSS 背景全解析：从基础属性到视觉魔法

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 一、background-color：背景颜色作用：设置元素的背景色，支持所有合法…...

编程日记 2025/6/27 23:33:54

2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现

华为OD全流程解析，备考攻略快捷目录华为OD全流程解析，备考攻略一、什么是华为OD？二、什么是华为OD机试？三、华为OD面试流程四、华为OD薪资待遇及职级体系五、ABCDE卷类型及特点六、题型与考点七、机试备考策略八、薪资与转正九、…...

编程日记 2025/6/27 23:35:53

中小型制造业信息化战略规划指南

1 引言在当今技术飞速发展和全球竞争日趋激烈的时代，信息化建设对于中小型制造企业（SME）而言，已不再是可有可无的选项，而是关乎生存、发展和保持持续竞争力的核心要素。在数字化浪潮席卷全球的背景下，制造…...

编程日记 2025/6/27 23:27:26

PowerBI 矩阵实现动态行内容(如前后销售数据)统计数据，以及过滤同时为0的数据

我们有一张活动表和一张销售表我们想实现如下的效果，当选择某个活动时，显示活动前后3天的销售对比图，如下： 实现方法： 1.新建一个表，用于显示列： 2.新建一个度量值，用SELECTEDVA…...

编程日记 2025/6/27 23:20:05

在QT中栅格布局里套非栅格布局的布局会出现父布局缩放子布局不跟随的问题

这个是 Qt Designer 设计界面中的一个“常见陷阱”。 🧠 结论先说： 在 Qt Designer 中使用栅格布局（Grid Layout）嵌套其他栅格布局，一般不会出问题，但如果嵌套的是水平布局（HBox）或垂…...

编程日记 2025/6/27 23:40:10

Pydantic数据验证实战指南：让Python应用更健壮与智能

导读：在日益复杂的数据驱动开发环境中，如何高效、安全地处理和验证数据成为每位Python开发者面临的关键挑战。本文全面解析了Pydantic这一革命性数据验证库，展示了它如何通过声明式API和类型提示系统，彻底改变Python数据处理模式。…...

编程日记 2025/7/7 14:46:24

深度解析 HDFS与Hive的关系

1. HDFS 和 Hive 如何协同我们将从 HDFS（Hadoop Distributed File System） 的架构入手，深入剖析其核心组成、工作机制、内部流程与高可用机制。然后详细阐述 Hive 与 HDFS 的关系，从执行流程、元数据管理、文件读写、计算耦合等…...

编程日记 2025/6/27 23:04:04

ArrayList源码分析

1. ArrayList默认初始化容量首先编写一个简单的初始化ArrayList的代码 List<String> li new ArrayList<>();然后进入ArrayList中，在无参数构造方法中可以查看到上面的绿色注释中写了构造一个空的集合并且初始化容量为10。接下来继续查看源码&#x…...

编程日记 2025/6/27 23:11:32

文件操作和IO-2 使用Java操作文件

Java操作文件的API 1、针对文件系统的操作。包括但不限于：创建文件、删除文件、重命名文件、列出目录内容…… 2、针对文件内容的操作。读文件/写文件 Java中针对文件的操作，使用File类来进行操作，这个类被存储在java.io这个包里面。 i&a…...

编程日记 2025/6/27 23:07:35

day 31

文件的拆分 1. 项目核心代码组织 src/（source的缩写）：存放项目的核心源代码。 2. 配置文件管理 config/ 目录：集中存放项目的配置文件，方便管理和切换不同环境（开发、测试、生产）的配置。 …...

编程日记 2025/6/27 22:59:43

基于Python批量删除文件和批量增加文件

一、为什么写这么一个程序其实原因也是很简单的，我去网上下载了一个文件夹，里面太多别人的文件了，我不喜欢，所以我就写了这么一个代码。二、安装Python和vscode 先安装Python在安装vscode Python安装 vscode的安装三、源码…...

编程日记 2025/7/5 1:18:07

【信息系统项目管理师】第12章：项目质量管理 - 26个经典题目及详解

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...

编程日记 2025/6/27 22:59:41

ShenNiusModularity项目源码学习（27：ShenNius.Admin.Mvc项目分析-12）

订单列表页面用于浏览、检索、维护商城模块的订单信息。订单列表页面的后台控制器类OrderController位于ShenNius.Admin.Mvc项目的Areas\Shop\Controllers内，页面文件位于同项目的Areas\Shop\Views\Order内，其中Index.cshtml页面为主页面，Det…...

编程日记 2025/6/27 23:18:45

(T_T)，不小心删掉RabbitMQ配置文件数据库及如何恢复

一、不小心删除今天是2025年5月15日，非常沉重的一天，就在今早8点左右的时候我打算继续做我的毕业设计，由于开机的过程十分缓慢（之前没有），加上刚开机电脑有卡死的迹象，再加上昨天晚上关电脑前…...

编程日记 2025/6/27 22:59:45

【Python装饰器深度解析】从语法糖到元编程实战

目录 🌟 前言🏗️ 技术背景与价值🩹 当前技术痛点🛠️ 解决方案概述👥 目标读者说明🧠 一、技术原理剖析📊 核心概念图解💡 核心作用讲解🔧 关键技术模块说明⚖️ 技术选型对比🛠️ 二、实战演示⚙️ 环境配置要求💻 核心代码实现案例1：基础计时装饰器案…...

编程日记 2025/6/27 23:39:18

操作系统学习笔记第5章（竟成）

目录第 5 章输入 / 输出 (I/O) 管理 5.1 I/O 管理基础 5.1.1 I/O 设备 1.I/O 设备的基本概念 2.I/O 设备的分类 3.I/O 接口 4.I/O 端口 (1) I/O 端口的概念 (2) I/O 端口的编址 ① 独立编址方式 ② 统一编址方式 5.1.2 I/O 控制方式 1. 程序查询方式 2. 程序中断方式 3. DMA …...

编程日记 2025/6/27 23:09:41

【DCGMI专题1】---DCGMI 在 Ubuntu 22.04 上的深度安装指南与原理分析（含架构图解）

目录一、DCGMI 概述与应用场景二、Ubuntu 22.04 系统准备 2.1 系统要求 2.2 环境清理（可选）三、DCGMI 安装步骤（详细图解） 3.1 安装流程总览 3.2 分步操作指南 3.2.1 系统更新与依赖安装 3.2.2 添加 NVIDIA 官方仓库 3.2.3 安装数据中心驱动与 DCGM 3.2.4 服务…...

编程日记 2025/7/9 15:12:15

C# 使用 OpenCV 基础

一、C#安装OpenCV 安装上面两个模块二、使用导入 using OpenCvSharp;加载图片 // 导入图片 Mat image Cv2.ImRead("C:\x5.bmp"); // 拷贝 Mat image2 image.Clone();// 打开窗口 Cv2.NamedWindow("image", WindowFlags.AutoSize); // 显示图片 Cv2…...

编程日记 2025/6/27 23:31:50

如何解决全局或静态变量被修改的bug

问题卡死程序原来设置Firware name 时N32G475，在程序运行时，程序崩溃，发现输出的固件名称没有了，这里说明固件名称被程序修改了程序在开机时都是对的打开map文件查找fw_name的内存地址，他的值被更改，就…...

编程日记 2025/6/27 23:38:16

[Java实战]Spring Boot整合Sentinel：流量控制与熔断降级实战（二十九）

[Java实战]Spring Boot整合Sentinel：流量控制与熔断降级实战（二十九） 一、Sentinel简介 Sentinel是阿里开源的分布式系统流量防卫组件，核心功能包括： 流量控制：根据QPS、线程数等指标限制资源访问熔断降…...

编程日记 2025/7/7 22:55:26

Linux系统中，Ctrl+C的运行过程是什么？

文章目录前言1.终端驱动捕获键盘输入2.信号发送到前台进程组3. 进程处理信号4. 信号传递的详细流程5. Shell 的后续处理关键机制说明扩展：其他相关信号总结前言今天看到有个小伙伴面试问到这个问题，感觉挺有意思，我们后端开发者相信都用过…...

编程日记 2025/7/7 20:36:52

((0 < ts_min(delta(close, 1), 5)) ? delta(close, 1) : ((ts_max(delta(close, 1), 5) < 0) ? delta(close, 1) : (-1 * delta(close, 1))))worldquant brain平台上调整后的语法： ((0 < min(close-ts_delay(close, 1), ts_delay(close, 1)-ts_delay(c…...

编程日记 2025/6/27 23:26:58

DAY28 超大力王爱学Python

知识点回顾： 类的定义pass占位语句类的初始化方法类的普通方法类的继承：属性的继承、方法的继承作业题目1：定义圆（Circle）类 import mathclass Circle:def __init__(self, radius1):self.radius radius # 半径属性…...

编程日记 2025/6/27 23:24:56

【C++算法】70.队列+宽搜_N 叉树的层序遍历

文章目录题目链接：题目描述：解法C 算法代码： 题目链接： 429. N 叉树的层序遍历题目描述： 解法使用队列层序遍历就可以了。先入根节点1。queue：1 然后出根节点1，入孩子节点2，3&a…...

编程日记 2025/6/27 23:29:54

常用UI自动化测试框架

🔍 常用UI自动化测试框架全览（Web / 移动 / 桌面 / AI驱动） UI（用户界面）测试框架是一类用于自动化测试应用图形界面的工具，帮助开发者和测试人员验证界面元素的功能性、交互性和视觉一致性。本文系统梳理了…...

编程日记 2025/7/3 16:42:49

C语言指针深入详解（五）：回调函数、qsort函数

目录一、回调函数 1、使用回调函数改造前 2、使用回到函数改造后二、qsort使用举例 1、使用qsort函数排序整型数据 2、使用qsort排序结构数据三、qsort函数模拟实现结语 🔥个人主页：艾莉丝努力练剑 🍓专栏传送门：《…...

编程日记 2025/6/27 23:09:11

# YOLOv5：目标检测的新里程碑

YOLOv5：目标检测的新里程碑在计算机视觉领域，目标检测一直是研究的热点和难点之一。近年来，随着深度学习技术的飞速发展，目标检测算法也取得了显著的进步。YOLO（You Only Look Once）系列算法以其高效的实…...

编程日记 2025/6/27 23:03:49

beanstalk一直被重新保留（reserved 状态）消息删除

说明：wallet是我的tube 完整流程示例暂停 tube（防止任务被重新保留）pause-tube wallet 300踢回并删除任务kick 100000 # 踢回所有 reserved 任务 delete 183723 # 删除目标任务恢复 tube（取消暂停）pause-tu…...

编程日记 2025/6/27 23:19:54

NLP学习路线图（二）：概率论与统计学（贝叶斯定理、概率分布等）

引言自然语言处理（NLP）作为人工智能的重要分支，致力于让机器理解、生成和操作人类语言。无论是机器翻译、情感分析还是聊天机器人，其底层逻辑都离不开数学工具的支持。概率论与统计学是NLP的核心数学基础之一，它们为…...

编程日记 2025/6/27 22:59:44

塔能智能照明方案——贵州某地区市政照明改造实践

在城市市政建设中，照明系统作为城市基础设施的重要组成部分，其能耗问题日益凸显。传统市政照明设备能耗高、运维效率低，成为城市绿色发展的阻碍。塔能科技针对这一痛点，为贵州某地区量身打造智能照明改造方案，通过技术…...

编程日记 2025/6/27 23:26:45

Mybatis的逆向工程Generator

Mybatis的逆向工程什么是逆向工程 generator 简单点说，就是通过数据库中的单表，自动生成java代码。 Mybatis官方提供了逆向工程，可以针对单表自动生成mybatis代码（mapper.java\mapper.xml\po类） 企业开发中&#…...

编程日记 2025/6/27 23:22:37

Runtime Suspend 专项训练

Q1. 什么是 Runtime PM？与 System Suspend 有什么区别？ 答： Runtime PM（运行时电源管理）是 Linux 内核为单个设备提供的自动挂起机制。其核心思想是在设备空闲期间，关闭其时钟、电源、总线连接等资源&…...

编程日记 2025/6/27 23:03:52

一、外部 CSS（推荐方式）

二、内部 CSS（嵌入样式）

三、行内 CSS（内联样式）

四、多个样式表的使用

五、CSS 注释规范

六、四种样式应用方式的优先级

七、性能与维护建议

相关文章：