欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

在HTML中有什么引用CSS的方法

企业模板

  在HTML中,引入CSS的办法主要有行内式、内嵌式、导入式和链接式

  行内式:即在标记的style属性中设定CSS样式,这种方法本质上没体现出CSS的优势,因此不推荐用

  例:

  <html>

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>TextDemo</title>

  </head>

  <body>

  <h1style=color:white;background-color=blue;>

  ThisisalineofText.

  </h1>

  </body>

  </html>

  嵌入式:嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间,对于单一的网页,这种办法很便捷。但对于一个包括不少页面的网站,假如每一个页面都以内嵌方法设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站一般都是撰写一个独立的CSS样式表文件,用以下两种方法中的一种,引入HTML文档中。

  例:

  

  <html>

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>TextDemo</title>

  <styletype="text/css">

  h1{

  color:white;

  background-color:boue;

  }

  </style>

  </head>

  <body>

  <h1>ThisisalineofText.</h1>

  <h1>ThisisanotherlineofText.</h1>

  </body>

  </html>

  导入式与链接式:导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者有相应有什么区别。

  事实上,二者最大有什么区别在于链接式用HTML的标记引入外部CSS文件,而用导入式则是用CSS的规则引入外部CSS文件。因此它们的语法也不同。

  假如用链接式,需要用如下语句引入外部CSS文件。

  <linkhref="mystyle.css"rel="stylesheet"type="text/css"/>

  假如用导入式,则需要用如下语句。

  <styletype="text/css">

  @import"mystyle.css";

  </style>

  除此之外,使用这两种方法后的显示成效也略有不同。用链接方法时,会在装置页面主体部分之前装载CSS文件,如此显示出来的网页从刚开始就是带有样式的成效,而用导入式时,会在整个页面装载完成后再装载CSS文件,对于有些浏览器来讲,在一些状况下,假如网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现样式设置后的成效。从浏览者的感受来讲,这是用导入式的一个缺点。对于一些比较大的网站,为了便于维护,或许会期望把所有些CSS样式分类别放到几个CSS文件中,如此假如用链接式引入,就需要几个语句分别导入CSS文件。假如要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来讲,是一个缺点。假如用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式则不拥有这个特点。

  因此这里给大伙的一个建议是,假如需要引入一个CSS文件,则用链接方法;假如需要引入多个CSS文件,则第一用链接方法引入一个“目录”CSS文件,这个“目录”CSS文件中再用导入式引入其他CSS文件。

  假如期望通过JavaScript来动态决定引入什么CSS文件,则需要用链接方法才能达成。




本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.dgznd.com.cn 关注: 时间:2022-05-01 10:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLjichu/20220501/14015.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧