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

HTML嵌入CSS样式超详解（尊享）

article 2026/3/12 3:00:58

一、行内样式（Inline CSS）

1. 定义与语法

行内样式是直接在HTML标签中使用style属性来定义样式。这种方式只对当前标签生效。

<tagname style="css 样式">

2. 示例

<p style="color: red; font-size: 14px;">这是一个红色的段落文字。</p>
<div style="width: 200px; height: 100px; background-color: lightblue;"></div>

3. 优点

精准控制：可以对单个HTML元素进行精确的样式设置。
简单直接：无需额外的CSS文件或<style>标签，直接在标签中定义样式。

4. 缺点

可维护性差：每个元素都需要单独设置样式，修改时需要逐个修改。
代码冗余：如果多个元素有相同的样式，会导致代码重复。

5. 适用场景

适用于需要对单个元素进行临时样式调整的情况，或者在开发过程中进行快速样式测试。

二、内部样式表（Internal CSS）

1. 定义与语法

内部样式表是将CSS样式定义在HTML文件的<style>标签中，通常放在<head>部分。这种方式对整个HTML文档生效。

<head><style>选择器 {css 样式}</style>
</head>

2. 示例

<head><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}h1 {color: blue;text-align: center;}p {color: green;line-height: 1.6;}</style>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个段落文字。</p>
</body>

3. 优点

集中管理：所有样式都在一个地方定义，便于维护和修改。
减少代码冗余：可以为多个元素定义相同的样式，避免重复代码。

4. 缺点

文件内嵌：样式代码嵌入在HTML文件中，如果HTML文件较大，可能会增加文件体积。
无法复用：样式仅在当前HTML文件中有效，无法在其他页面中复用。

5. 适用场景

适用于单个HTML文件的样式定义，或者在开发过程中进行样式测试和调试。

三、外部样式表（External CSS）

1. 定义与语法

外部样式表是将CSS样式定义在一个单独的.css文件中，然后在HTML文件中通过<link>标签引入。这种方式适用于多个HTML文件共享相同的样式。

2. 步骤

创建一个CSS文件（例如styles.css）。
在HTML文件的<head>部分使用<link>标签引入CSS文件。

3. CSS文件（styles.css）示例

body {font-family: Arial, sans-serif;background-color: #f0f0f0;
}
h1 {color: blue;text-align: center;
}
p {color: green;line-height: 1.6;
}

4. HTML文件示例

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个段落文字。</p>
</body>

5. 优点

高度复用：一个CSS文件可以被多个HTML文件引用，便于统一管理样式。
提高可维护性：修改样式时只需修改CSS文件，所有引用该文件的HTML页面都会自动更新。
分离结构与表现：HTML文件专注于内容结构，CSS文件专注于样式表现，符合网页设计的最佳实践。

6. 缺点

额外文件：需要创建和维护额外的CSS文件。
加载时间：浏览器需要额外请求CSS文件，可能稍微增加页面加载时间（但可以通过缓存优化）。

7. 适用场景

适用于大型网站或项目，尤其是多个页面需要共享相同样式的情况。

四、选择器的使用

在CSS中，选择器用于选择要应用样式的HTML元素。常见的选择器包括：

元素选择器：选择特定的HTML元素。
```
h1 {color: blue;
}
```
类选择器：选择具有特定类属性的元素。
```
.my-class {color: green;
}
```
ID选择器：选择具有特定ID属性的元素。
```
#my-id {width: 200px;
}
```
组合选择器：可以组合使用多种选择器，精确选择元素。
```
div p {color: red;
}
```

五、CSS样式的作用范围

全局样式：在<style>标签或外部CSS文件中定义的样式，对整个文档或所有引用的HTML文件生效。
局部样式：在特定的HTML标签中使用style属性定义的样式，仅对该标签生效。

六、CSS样式的优先级

当多种样式规则同时作用于一个HTML元素时，优先级规则如下（从高到低）：

行内样式：直接在HTML标签中定义的样式。
内部样式表：在<style>标签中定义的样式。
外部样式表：在单独的CSS文件中定义的样式。

如果优先级相同，则后定义的样式会覆盖先定义的样式。

七、总结

行内样式：适用于单个元素的临时样式调整。
内部样式表：适用于单个HTML文件的样式定义。
外部样式表：适用于多个HTML文件共享的样式定义，便于维护和复用。

HTML嵌入CSS样式超详解（尊享）

一、行内样式（Inline CSS） 1. 定义与语法行内样式是直接在HTML标签中使用style属性来定义样式。这种方式只对当前标签生效。 <tagname style"css 样式">2. 示例 <p style"color: red; font-size: 14px;">这是一个红…...

编程日记 2025/11/19 9:02:07

[C语言基础]13.动态内存管理

动态内存管理 1. 动态内存分配2. 动态内存函数的介绍2.1 malloc2.2 free2.3 calloc2.4 realloc 3. 动态内存错误3.1 NULL指针解引用3.2 动态开辟空间越界访问3.3 非动态开辟内存使用free释放3.4 free释放动态开辟内存的一部分3.5 同一块动态内存多次释放3.6 动态开辟内存未释放…...

编程日记 2026/1/7 9:19:31

200多种算法应用于二维和三维无线传感器网络（WSN）覆盖场景

2.1 二元感知模型在当前无线传感器网络（WSN）覆盖场景中，最常见且理想的感知模型是二元感知模型[27]。如图2所示， Q 1 Q_1 Q1和 Q 2 Q_2 Q2代表平面区域内的两个随机点。 Q 1 Q_1 Q1位于传感器的检测区域内，其感…...

编程日记 2026/3/11 23:51:54

模拟类似 DeepSeek 的对话

以下是一个完整的 JavaScript 数据流式获取实现方案，模拟类似 DeepSeek 的对话式逐段返回效果。包含前端实现、后端模拟和详细注释： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…...

编程日记 2026/3/11 6:08:15

鸿蒙（OpenHarmony）开发实现息屏/亮屏详情

官网参考链接实现点击关闭屏幕，定时5秒后唤醒屏幕权限 {"name": "ohos.permission.POWER_OPTIMIZATION"}代码实现 import power from ohos.power;Entry Component struct Page3 {private timeoutID: number | null null; // 初始化 timeout…...

编程日记 2026/2/10 15:28:33

Flutter PopScope对于iOS设置canPop为false无效问题

这个问题应该出现很久了，之前的组件WillPopScope用的好好的，flutter做优化打算“软性”处理禁用返回手势，出了PopScope，这个组件也能处理在安卓设备上的左滑返回事件。但是iOS上面左滑返回手势禁用，一直无效。当然之…...

编程日记 2026/3/5 10:36:24

SpringBoot + ResponseBodyEmitter 实时异步流式推送，优雅！

ChatGPT 的火爆，让流式输出技术迅速走进大众视野。在那段时间里，许多热爱钻研技术的小伙伴纷纷开始学习和实践 SSE 异步处理。我当时也写过相关文章，今天，咱们换一种更为简便的方式来实现流式输出，那就是 Respon…...

编程日记 2026/3/5 2:43:53

网络运维学习笔记（DeepSeek优化版） 016 HCIA-Datacom综合实验01

文章目录综合实验1实验需求总部特性分支8分支9 配置一、基本配置（IP二层VLAN链路聚合）ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

编程日记 2026/3/11 3:14:13

版本说明首先我使用ffmpeg版本是4.2.1 QT使用版本5.14.2 我选择是c编译在02Day.pro⾥⾯添加ffmpeg头⽂件和库⽂件路径 win32 { INCLUDEPATH $$PWD/ffmpeg-4.2.1-win32-dev/include LIBS $$PWD/ffmpeg-4.2.1-win32-dev/lib/avformat.lib \$$PWD/ffmpeg-4.2.1-win32-dev/l…...

编程日记 2026/2/28 3:57:30

vue-treeselect 【单选/多选】的时候只选择最后一层（绑定的值只绑定最后一层）

欢迎访问我的个人博客 ｜snows_ls BLOGhttp://snows-l.site 一、单选 1、问题： vue-treeselect 单选的时候只选择最后一层（绑定的值只绑定最后一层） 2、方法 1、只需要加上 :disable-branch-nodes"true" 就行&#xff0…...

编程日记 2026/3/11 7:10:09

焊接机器人与线激光视觉系统搭配的详细教程

以下是关于焊接机器人与线激光视觉系统搭配的详细教程，包含核心程序框架、调参方法及源码实现思路。本文综合了多个技术文档与专利内容，结合工业应用场景进行系统化总结。一、系统硬件配置与视觉系统搭建 1. 硬件组成焊接机器人系统通常由以下模块构…...

编程日记 2026/1/18 2:05:07

微信小程序实现根据不同的用户角色显示不同的tabbar并且可以完整的切换tabbar

直接上图上代码吧 // login/login.js const app getApp() Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函…...

编程日记 2026/3/11 10:35:17

Git 本地常见快捷操作

Git 本地常见快捷操作 📌 1. 基本操作操作命令初始化 Git 仓库git init查看 Git 状态git status添加所有文件到暂存区git add .添加指定文件git add <file>提交更改git commit -m "提交信息"修改最后一次提交信息git commit --amend -m "新…...

编程日记 2025/12/14 22:24:10

Elastic Stack 8.16.0 日志收集平台的搭建

简介 1.1 ELK 介绍 ELK 是 ‌Elasticsearch‌、‌Logstash‌、‌Kibana‌ 三款开源工具的首字母缩写，构成了一套完整的日志管理解决方案，主要用于日志的采集、存储、分析与可视化‌。 1）Logstash：数据管道工具，负责从…...

编程日记 2026/3/4 6:24:06

江科大51单片机笔记【16】AD/DA转换（下）

写在前言此为博主自学江科大51单片机（B站）的笔记，方便后续重温知识在后面的章节中，为了防止篇幅过长和易于查找，我把一个小节分成两部分来发，上章节主要是关于本节课的硬件介绍、电路图、原理图等理论知识…...

编程日记 2026/3/11 5:21:24

Podman 运行redis 报错

Podman 运行redis 报错一、报错内容 find: .: Permission denied chown: changing ownership of .: Permission denied二、问题分析 SELinux 模式 SELinux（Security-Enhanced Linux）是一种安全模块，旨在通过强制访问控制（MAC）来增强 Linux 系统的安全性。SELinux 具有…...

编程日记 2026/2/19 0:41:40

基于深度学习的多模态人脸情绪识别研究与实现（视频+图像＋语音）

这是一个结合图像和音频的情绪识别系统，从架构、数据准备、模型实现、训练等。包括数据收集、预处理、模型训练、融合方法、部署优化等全流程。确定完整系统的组成部分：数据收集与处理、模型设计与训练、多模态融合、系统集成、部署优化、用户界面等。详…...

编程日记 2026/3/10 1:33:17

WordPress the_category与single_cat_title的区别

在wordpress网站主题开发用常会用到调用分类目录的名称，the_category与single_cat_title都可以调用出分类目录的名称。 <?php single_cat_title(); ?> <?php the_category(); ?>但是，不少人搞不清楚二者有什么区别，其实很简…...

编程日记 2026/2/17 22:14:30

以太坊AI代理与PoS升级点燃3月市场热情，2025年能否再创新高？

币热网深度报道：以太坊AI代理与PoS升级引爆3月热潮，2025年能否再攀历史新高？ 原文来源：币热网 - 区块链信息资讯平台以太坊升级，市场热情高涨近期，以太坊市场犹如被一股神秘力量点燃，掀起了…...

编程日记 2026/3/2 22:21:11

Go语言入门基础详解

一、语言历史背景 Go语言由Google工程师Robert Griesemer、Rob Pike和Ken Thompson于2007年设计，2009年正式开源。设计目标： 兼具Python的开发效率与C的执行性能内置并发支持（goroutine/channel）简洁的类型系统现代化的包管理跨…...

编程日记 2025/4/4 4:10:43

Web网页制作（静态网页）：千年之恋

一、是用的PyCharm来写的代码二、代码中所用到的知识点（无 js） 这段HTML代码展示了一个简单的注册页面，包含了多个HTML元素和CSS样式的应用。这段HTML代码展示了一个典型的注册页面，包含了常见的HTML元素和表单控件。通过CSS样…...

编程日记 2026/2/14 23:14:10

JVM 的不同组成部分分别有什么作用？

JVM（Java Virtual Machine）主要由以下几个核心组成部分构成： 1. 类加载器子系统 (Class Loader Subsystem): 作用： 加载类： 负责查找并加载 Java 类文件（.class 文件）到 JVM 中。类文件可以来…...

编程日记 2026/2/14 17:02:37

正则表达式 - 修饰符

正则表达式 - 修饰符正则表达式是一种强大的文本处理工具，它广泛应用于数据验证、文本搜索、替换、匹配等场景。在正则表达式中，修饰符是用于调整正则表达式行为的特殊字符。本文将详细解析正则表达式中的常用修饰符，帮助读者更好地理解和运用正则表达式。 1. 字符串定位…...

编程日记 2026/2/15 4:07:51

K8s 1.27.1 实战系列（十二）Ingress

一、Ingress介绍 1、Ingress 的核心概念 Ingress 是 Kubernetes 中管理外部流量访问集群内服务的 API 对象，通过 7 层（HTTP/HTTPS）协议实现流量路由、负载均衡和 SSL 终止。它弥补了传统 Service（如 NodePort 和 LoadBalancer）的不足，例如端口占用过多、不支持路径路由…...

编程日记 2026/3/10 1:30:27

tomcat应用的作用以及安装，以及tomcat软件的开机自启动。

一.tomcat介绍 1.作用 tomcat是一款用来部署网站服务器的一款软件。动态网站主流语言： PHP, lamp/lnmp平台 Java语言，运行在tomcat平台。【只要这个网站或者软件是Java语言写的，我们都可以在tomcat平台上去运行这个java程序。】网站是…...

编程日记 2026/3/8 10:43:25

Unity中WolrdSpace下的UI展示在上层

一、问题描述 Unity 中 Canvas使用World Space布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在 UI 的材质中禁用深度测试（ZTest），强制 UI 始终渲染在最上层。 Shader "Custo…...

编程日记 2026/3/11 13:46:03

postgresql 数据库使用

目录索引查看索引创建删除索引修改数据库时区索引查看索引 select * from pg_indexes where tablenamet_table_data; 或者 select * from pg_statio_all_indexes where relnamet_table_data; 创建 CREATE INDEX ix_table_data_time ON t_table_data (id, crea…...

编程日记 2026/1/26 19:27:00

Redis的缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级

一、缓存雪崩： 1、什么是缓存雪崩： 如果缓在某一个时刻出现大规模的key失效，那么就会导致大量的请求打在了数据库上面，导致数据库压力巨大，如果在高并发的情况下，可能瞬间就会导致数据库宕机。这时候如果…...

编程日记 2026/3/11 14:13:24

【SpringMVC】常用注解：@RequestParam

1.作用如果控制器标注的方法的参数名称与前端传递过来的参数名称不一致，使得SpringMVC无法自动启动，那么我们可以使用该注解实现前后端参数的绑定。 2.相关属性 value/name：这两个属性都是一个作用，都是描述参数的名称&#x…...

编程日记 2026/2/27 12:53:13

JVM垃圾收集器相关面试题（1）

垃圾收集与内存管理摘要一.核心垃圾收集算法对比算法原理优点缺点适用场景标记-清除两次遍历（标记存活对象→清除未标记对象）实现简单内存碎片化、双遍历效率低老年代（结合整理）标记-复制内存对半分，存活对象复制到…...

编程日记 2026/2/14 19:13:10

一、行内样式（Inline CSS）

1. 定义与语法

2. 示例

3. 优点

4. 缺点

5. 适用场景

二、内部样式表（Internal CSS）

1. 定义与语法

2. 示例

3. 优点

4. 缺点

5. 适用场景

三、外部样式表（External CSS）

1. 定义与语法

2. 步骤

3. CSS文件（styles.css）示例

4. HTML文件示例

5. 优点

6. 缺点

7. 适用场景

四、选择器的使用

五、CSS样式的作用范围

六、CSS样式的优先级

七、总结

相关文章：