css的引用-将CSS文件引用到html网页中的四种方法

bendan520 2023年8月26日 css 0

接下来我们一一讲解html引用css的例子

1、直接在html标签元素中嵌入css样式css的引用，如

我是div css测试内容-支持

效果如下图

2、在html后面的head部分插入样式语句，代码如下：

  
  
  1. <style type="text/css"> 
  2.  
  3. </style> 

具体方法如下：

3.使用@import引用外部CSS文件

  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>css引用方法实例-www.divcss5.com测试实例</title> 
  6. <style type="text/css"> 
  7.  
  8. </style> 
  9. </head> 
  10.  
  11. <body> 
  12. <div class="ceshi">我是div css测试内容www.divcss5.com支持</div> 
  13.  
  14. </body> 
  15. </html> 

Wcss.css file.ceshi {font-size:14px; 中的代码颜色：#FF0000;}

效果如下：

可以看出，使用该方法与使用内置引用css样式表方法类似，都需要使用html head中的style标签来引用外部css。

4.使用link调用外部css文件

放在head中调用外部wcss.css文件实现html引用css文件

详情如右图

该方法不需要style标签，而是通过链接样式直接引用外部样式

一般建议使用link来引用外部css样式方法。

使用link引用外部css的优点

1、有利于SEO。 使用这种方式引用外部css文件，会使得html页面的源代码比直接添加css样式要少很多，因为搜索引擎蜘蛛在爬取网页时，不会爬取css文件，这使得html源代码很少，这使得蜘蛛爬行速度更快，需要的处理更少，增加了这个网页的权重，有利于排名。

2、保存html会提示浏览器在下载网页时分开线程，就像两行打开一个页面时加载一个页面一样css的引用，使得网页打开速度非常快。 （当用户浏览此网页时，html源代码和css文件同时下载，速度更快）

3.方便修改网页样式。 只需要改变css样式就可以改变网页的美术风格。 如果在网站项目中使用这种方法，由于整个网站使用通用的css基本样式，所以改变整个网站的样式既快捷又方便。

如需转载，请注明文章出处及来源网址：