86【CSS的模块化处理】

当我们多个文件需要使用同一个css时,重复编写代码不利于后期修改,比如你有100个html文件,都用到了同一个css代码,一旦后期要修改,那么我们必须要修改100个地方,那么我们可以考虑把这个css单独分离出来成为一个文件,其他html文件加载这个css文件即可

①在data文件夹下(和test.html文件同目录)创建一个文件名为"1.css"的文件

②编写css代码

|-------|----------------------------------|
| 1 2 3 | #css1{ ``color: red; ``} |

③编写html代码,在head中使用link调用,href后面的就是要调用的css文件路径

|----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> ``<``title``>第10个程序</``title``> ``<link rel=``"stylesheet" type``=``"text/css" href=``"1.css"``> </head> <body> ``<h1 >我是第1行</h1> ``<h1>我是第2行</h1> ``<h2 id=``"css1"``>我是第3行</h2> </body> </html> |

相关推荐
阿蒙Amon13 小时前
TypeScript学习-第10章:模块与命名空间
学习·ubuntu·typescript
AI绘画哇哒哒13 小时前
【干货收藏】深度解析AI Agent框架:设计原理+主流选型+项目实操,一站式学习指南
人工智能·学习·ai·程序员·大模型·产品经理·转行
戌中横13 小时前
JavaScript——预解析
前端·javascript·学习
●VON14 小时前
React Native for OpenHarmony:2048 小游戏的开发与跨平台适配实践
javascript·学习·react native·react.js·von
ZH154558913114 小时前
Flutter for OpenHarmony Python学习助手实战:自动化脚本开发的实现
python·学习·flutter
xcLeigh15 小时前
Python入门:Python3 requests模块全面学习教程
开发语言·python·学习·模块·python3·requests
xcLeigh15 小时前
Python入门:Python3 statistics模块全面学习教程
开发语言·python·学习·模块·python3·statistics
GHL28427109015 小时前
分析式AI学习
人工智能·学习·ai编程
lpruoyu15 小时前
【Android第一行代码学习笔记】Android架构_四大组件_权限_持久化_通知_异步_服务
android·笔记·学习
野犬寒鸦15 小时前
从零起步学习并发编程 || 第六章:ReentrantLock与synchronized 的辨析及运用
java·服务器·数据库·后端·学习·算法