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

相关推荐
寒秋花开曾相惜3 小时前
(学习笔记)3.8 指针运算(3.8.3 嵌套的数组& 3.8.4 定长数组)
java·开发语言·笔记·学习·算法
是翔仔呐3 小时前
第11章 显示外设驱动:I2C协议OLED屏、SPI协议LCD屏字符/图片/中文显示
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee
_李小白3 小时前
【AI大模型学习笔记之平台篇】第五篇:Trae常用模型介绍与性能对比
人工智能·笔记·学习
承渊政道3 小时前
【优选算法】(实战体会位运算的逻辑思维)
数据结构·c++·笔记·学习·算法·leetcode·visual studio
AI-Ming4 小时前
程序员转行学习 AI 大模型: 踩坑记录:服务器内存不够,程序被killed
服务器·人工智能·python·gpt·深度学习·学习·agi
m0_716765234 小时前
C++提高编程--STL常用容器(set/multiset、map/multimap容器)详解
java·开发语言·c++·经验分享·学习·青少年编程·visual studio
2501_945318494 小时前
零基础学习AI的选型指南:CAIE认证与编程型AI认证如何取舍
人工智能·学习
承渊政道4 小时前
【优选算法】(实战推演模拟算法的蕴含深意)
数据结构·c++·笔记·学习·算法·leetcode·排序算法
Keep learning!4 小时前
PCA主成分分析学习
学习·算法
浮白载笔的夜晚4 小时前
【科普向】模拟电路(Analog Circuits)与射频电路(RF Circuits)的区别
学习