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

CSS 样式表的四种应用方式及css注释的应用小结

article 2025/5/31 20:35:58

CSS样式表的四种应用方式及注释应用小结

一、样式表应用方式

内联样式（行内样式）
```
<div style="color: #ff0000; font-size: 16px;">示例文本</div>
```
- 特点：直接写在HTML标签的style属性中
- 优先级：最高（覆盖其他方式）
- 适用场景：快速调试、临时样式调整
- 缺点：难以维护，破坏结构与样式分离原则
内部样式表（嵌入样式）
```
<head><style>.title {font-weight: bold;border-bottom: 2px solid #333;}</style>
</head>
```
- 特点：通过<style>标签嵌入HTML文档
- 优先级：次于内联样式
- 适用场景：单页面专用样式
- 缺点：不利于多页面复用
外部样式表（链接式）
```
<head><link rel="stylesheet" href="styles/main.css">
</head>
```
- 特点：通过<link>标签引入独立.css文件
- 优先级：低于内部样式表
- 适用场景：多页面项目、团队协作
- 优点：易于维护，支持浏览器缓存
@import导入式
```
/* 在.css文件或<style>标签内使用 */
@import url("theme/dark.css");
```
- 特点：CSS内置指令导入外部文件
- 注意事项：
  - 必须写在样式表开头
  - 同步加载可能阻塞渲染
  - 兼容性：主流浏览器均支持

二、CSS注释应用规范

基础语法

/* 单行注释 */
/*多行注释说明代码功能或标注修改记录
*/

典型用途

代码解释：

/* 主容器宽度限制：适配移动端 */
.container { max-width: 1200px; }

临时禁用代码：
```
/* 
.old-menu {display: block;
}
*/
```

条件标注：

/* IE9以下兼容方案 */
.box { background: url(fallback.png); }

注意事项
- 不支持嵌套注释（/* 外层 /* 内层 */ 错误 */）
- 注释内容不会出现在浏览器开发者工具中
- 敏感信息需避免写入注释（如API密钥）

三、优先级对比

$\text{内联样式} > \text{内部样式表} = \text{外部样式表} > \text{浏览器默认样式}$
（注：@import导入的样式优先级等同于外部样式表）

四、应用建议

大型项目优先使用外部样式表
组件化开发可结合<style>标签（如Vue单文件组件）
避免过度依赖内联样式
关键样式添加注释说明实现逻辑

示例：通过注释实现样式分段管理

/* ========== 头部样式 ========== */
.header { height: 80px; }/* 导航栏悬停效果 */
.nav-item:hover { transform: translateY(-2px); /* 微调提升交互感 */
}

CSS 样式表的四种应用方式及css注释的应用小结

CSS样式表的四种应用方式及注释应用小结一、样式表应用方式内联样式（行内样式） <div style"color: #ff0000; font-size: 16px;">示例文本</div>特点：直接写在HTML标签的style属性中优先级：最高&#xff…...

编程日记 2025/5/31 20:35:58

五、web安全--XSS漏洞（2）--XSS相关payload

XSS 主要是针对网页客户端的一种攻击，那么就要执行 JavaScript 代码，那么无疑需要用到 JavaScript 语言以及在 HTML 中可以解析 JavaScript 代码的标签。 1、标签类 （1）script <script></script>标签是最直接的 xS…...

编程日记 2025/6/1 1:14:19

AI架构师的新工具箱：ChatGPT、Copilot、AutoML、模型服务平台

AI架构师不仅要懂架构、懂AI服务，还需要具备使用AI工具提升工作效率的能力。新一代AI工具已经成为架构师不可或缺的“工具箱”，帮助他们更高效地进行设计、部署、编码与优化。以下介绍几类代表性工具，并说明它们在实际架构工作中的应用场景。一、ChatGPT：生成架构设计文…...

编程日记 2025/5/31 18:39:15

from flask import Flask, request, jsonify, render_template import requests import json # 用于解析嵌套的 JSON 字符串app Flask(__name__)COZE_BOT_ID 7508736911423963162 COZE_API_KEY pat_cHXqrFzcvtktfmmlp4pjF3O2qmjioQW46uU8UNbUugyvSlFZclklpunc53DbR8ws COZE…...

编程日记 2025/6/1 0:34:21

有铜半孔工艺的制造难点与工艺优化

技术难点剖析有铜半孔工艺在制造过程中面临多重挑战，主要集中在材料加工精度、孔壁完整性及良率控制三个方面： 铜层翘起与毛刺残留半孔成型时，铣刀高速切割可能导致孔壁铜层被拉扯，产生翘起或残留铜屑，影响导电性能…...

编程日记 2025/6/1 4:51:33

python分步合并处理excel数据

文章目录概要整体架构流程技术名词解释技术细节小结概要客户需求 1. 背景与目标用户需要将三个包含农业实验数据的Excel表格（AK、AN、AP）合并为一个结构化数据集，用于后续分析。每个表格包含相同类型的字段（如对照组与PSB处理组的样本数、均值、标准差），但需通过字…...

编程日记 2025/6/1 0:03:57

MC0309魔法项链

思路： 以数位贡献的思路来写这题， 统计每一位上为 1 的个数： 对于第 k 位，统计有多少个数在这一位上为 1，记作 cnts[k] 枚举每个数，逐位分析它对整体的贡献（即与其它数交互时的和）…...

编程日记 2025/5/31 22:41:55

为 Ubuntu 安装的软件创建桌面图标

如何为 Ubuntu 安装的软件创建桌面图标（.desktop 启动器） 在 Ubuntu 或其他 Linux 发行版中，我们常常通过压缩包（如 .tar.gz）或官方二进制方式安装软件。这种安装方式虽然灵活方便，但默认并不会将软件添加…...

编程日记 2025/6/1 0:38:52

uni-app 中开发问题汇总

uni-app 中 echarts 中的点击事件失效？ 在 main.js 中设置 window.wx{}，这个方式，如果需要调 wx 中的方法会失效（如果默认后续不会调 wx 中的方法推荐使用） 降低版本，安装一个低版本的，比如&a…...

编程日记 2025/5/31 20:10:20

https下git拉取gitlab仓库源码

git init 创建仓库参考下面创建公私秘钥对注意不要以root用户身份创建公私钥，确保保存在/home/username GitLab配置ssh key - 阿豪聊干货 - 博客园 Your identification has been saved in /home/xxx/.ssh/id_ed25519 Your public key has been saved in /ho…...

编程日记 2025/6/1 0:57:42

距离计算范围查找距离排序

一使用场景目前基于某个位置查附近的人，附近的商家等等，查出来的结果添加距离，或者查附近多大范围内的人或者商家，然后按距离排序已经是IT界一个很通用的功能了。二距离计算搜索(百万点集以下) 2.1 球的定义 2.2 两点之…...

编程日记 2025/5/31 22:39:56

PS linux 基础篇1-AXI_DMA

系列文章目录文章目录系列文章目录前言一、AXI DMA ip核二、BD工程三、PS linux工程1.使用开源的xilinx_axidma-master工程验证驱动2.按照其他的开源进行就行，没什么写的了前言 PL与PS之间快速的接口，本文为LOOP回环测试一、AXI DMA ip核 MM2S mem…...

编程日记 2025/5/31 22:44:45

AI大模型学习三十、ubuntu安装comfyui,安装插件，修改返回405 bug，值得一看喔

一、说明 ComfyUI是一个开源的、基于节点的Web应用。它允许用户根据一系列文本提示（Prompt）生成图像。 ComfyUI使用扩散模型作为基础模型，并结合 ControlNet、Lora和LCM低阶自适应等模型，每个工具都由程序中的一个节点表示二、开…...

编程日记 2025/5/31 22:44:43

11高可用与容错

一、Broker 高可用架构设计 1.1 RabbitMQ 镜像集群方案集群搭建步骤 # 节点1初始化 rabbitmq-server -detached rabbitmq-plugins enable rabbitmq_management# 节点2加入集群 rabbitmqctl stop_app rabbitmqctl join_cluster rabbitnode1 rabbitmqctl start_app# 创建镜像…...

编程日记 2025/5/31 22:11:03

百度之星2024 初赛第一场补给

百度之星2024 初赛第一场补给题干描述问题分析：C代码Java代码：Python代码补充说明： 题干描述参考自马蹄集OJ，原文链接1 可怕的战争发生了，小度作为后勤保障工作人员，也要为了保卫国家而努力。现在有 …...

编程日记 2025/5/31 21:17:39

Collection集合遍历的三种方法

1.foreach循环遍历格式：for（元素的数据类型变量名：数组或集合）{ } 2.使用迭代器遍历方法名称：Iterator<E> iterator（） 说明：返回集合中的迭代器对象，该迭代…...

编程日记 2025/5/30 17:25:39

Taro on Harmony C-API 版本正式开源

Taro 是由京东发起并维护的开放式跨端跨框架解决方案，支持以 Web 的开发范式来实现小程序、H5、原生 APP 的跨端统一开发，从 18 年开源至今，在 GitHub 已累计获得 36,000 Stars。 Taro x 纯血鸿蒙在过去的一年中，Taro 经历了显…...

编程日记 2025/5/31 22:11:05

知识隔离的视觉-语言-动作模型：训练更快、运行更快、泛化更好

25年5月来自PI的论文“Knowledge Insulating Vision-Language-Action Models: Train Fast, Run Fast, Generalize Better”。视觉-语言-动作 (VLA) 模型通过将端到端学习与来自网络规模视觉-语言模型 (VLM) 训练的语义知识迁移相结合，为机器人等物理系统训练控制策…...

编程日记 2025/5/31 22:01:32

[ARM][架构] 02.AArch32 程序状态

目录参考资料 1.程序状态 - PSTATE 2.用户模式的 PSTATE 信息 2.1.状态标志 2.2.溢出/饱和标志 2.3.大于等于标志 2.4.指令集状态 2.5.IT 块状态 2.6.端序控制 2.7.指令执行时间控制 3.用户模式访问 PSTATE - APSR 寄存器 4.系统模式的 PSTATE 信息 4.1.状态标志…...

编程日记 2025/5/31 21:19:30

Dockerfile正确写法之现代容器化构建的最佳实践

前言在容器化的世界里，Dockerfile是构建镜像的核心，但你真的确定自己写的Dockerfile是最佳实践吗？根据我多年的容器化经验，大多数开发者编写的Dockerfile存在效率低下、安全隐患和维护困难等问题。本文将分享现代容器化环境中Dockerfile的正确编写方式，帮助你构建更高效…...

编程日记 2025/5/31 21:20:21

React---day4

3、React脚手架生成的脚手架的目录结构什么是PWA PWA全称Progressive Web App，即渐进式WEB应用；一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线…...

编程日记 2025/5/31 19:10:55

ArkUI（方舟UI框架）介绍

ArkUI（方舟UI框架）介绍构建快速入门使用ArkWeb构建页面...

编程日记 2025/5/31 22:01:32

【Bug】定时任务中 Jpa Save 方法失效

【Bug】定时任务中 Jpa Save 方法失效首先说一下问题，在定时任务中调用 jpa 的 save 方法没有效果，但是通过外界调用，比如 controller 中注入 service 来调用是可以的，真是巨巨巨离谱，我被折磨了好几天。我这个问题…...

编程日记 2025/5/31 21:36:33

英语科研词汇现象及语言演变探讨

一、词汇形态学的进化困境希腊-拉丁语系遗存 "Pneumoconiosis"（πνεύμωνκονίαωσις）和"electroencephalogram"（ηλεκτρονεγκέφαλοςγράμμα）的构词方式反映了欧洲学者对古…...

编程日记 2025/5/31 22:26:09

C# 打印PDF的常用方法

这里先提供一个helper类的模板 1.使用默认程序打印 using System; using System.Collections.Generic; using System.Diagnostics; using System.Drawing.Printing; using System.IO; using System.Runtime.InteropServices;namespace PDF {public static class PrintHelper{#…...

编程日记 2025/5/31 22:15:39