html引用css的三种方法

来源：互联网 2023-03-16 19:16:55 版权归原作者所有，如有侵权，请联系我们

在web编程中，html定义结构，css则定义表现。二者相互结合才能开发出漂亮好看的网页。

在html中引用css通常有3中方法，它们不仅各有优点，并且还涉及到优先级的问题。本文就详细介绍如何在html中引用css。

工具/原料

内嵌方式：在标签的style属性中设置CSS样式。例如：div style="color:red;font-size:14px">设置文字的颜色为红色，字体大小为14px/div>

这里css样式代码写在标签的style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

html引用css的三种方法

内嵌式这种方法不建议使用，因为会让页面的标签很多，看起来很累赘，体现不了css的优势，当标签太多的时候，想比要改起来都无从下手。

一般只在不经常更改的地方可以用一用，但是还是不推荐。

嵌入式方法：我们可以将页面中所有标签需要设置css属性统一写到style>中，并一般放在head>与/head>之间；

这种方法对于单一的网页是挺方便的，但是对于较多的页面的网站，如果对每一个页面都以内嵌的方式设置各自的样式，就会失去了css的优点了。

html引用css的三种方法

3该信息未经许可获取自百度经验

使用link标签引用外部文件方式：就是将一个独立的css文件引入html文件中；例如：linkhref="style.css"rel="stylesheet"type="text/css">

这种方法适合用在一些较大的网站，只需几个语句就可以分别导入css文件了，并且css也很方便修改维护。比较推广使用这种方法把css引入html中。

html引用css的三种方法

值得一提的是，如果一个标签的css上面3中方法都使用了，那么最终以内嵌式的为准。这就是这三种方法的优先级。内嵌式->嵌入式->引用外部文件方法。

例如下面的最终结果：

html引用css的三种方法

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML

上一篇：想从事软件开发行业的建议下一篇：HTML教程常用的字符实体