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> |

相关推荐
sunshine22 girl8 分钟前
Java学习七 Java 项目实战1-项目创建和主页面搭建
java·开发语言·学习
传奇开心果编程1 小时前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
一条破秋裤1 小时前
内核驱动的意义与课程学习规划
学习
Bug收容所2 小时前
学习LangChain day1
学习·langchain·llm·agent
传奇开心果编程2 小时前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
我命由我123453 小时前
Photoshop - Photoshop 矢量蒙版
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·photoshop
熊猫钓鱼>_>4 小时前
越顺,越空:当 AI 把学习 “优化“ 到消失
人工智能·学习·ai·llm·agent·ai编程·metaai
一条破秋裤4 小时前
02_注册设备号_从主次设备号到成对注销
学习
@codercjw5 小时前
企业实战电机和传感器选型
学习
zhangrelay6 小时前
用ROS2Lyrical实验报告册思路重做蓝桥云课ROS1实验并改进
linux·笔记·学习·ubuntu·机器人