html怎么嵌入css文件?

html怎么嵌入css文件?下面本篇文章给大家介绍一下在HTML中嵌入css文件的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法1:使用@import引入外部css文件

创建css样式表如mystyle.css,再在HTML中链接此mystyle.css样式表。

<style type="text/css">
      @import"mystyle.css"
</style>

方法2:使用<link>引入外部css文件

创建css样式表如style.css,再在HTML中链接此style.css样式表。【推荐:html在线手册

<link rel="stylesheet" type="text/css" href="style.css">

例如:

HTML例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css样式使用</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS使用规则</h1>
<p>CSS使用规则/p>
</body>
</html>

CSS例子:

body{
    background-color: antiquewhite;
    font-size: 17px;
}

结果图:

1.png

导入式和链接式的区别

1、使用链接式时,会在加载页面主体部分之前装载CSS文件,这样显示出来页面一开始就是带有样式效果的;

使用导入式时,会在整个页面装载完成后在装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件体积比较大的的时候,则会出现先显示无样式的页面,闪烁一下在出现设置样式后的效果,对于浏览者的感受,这是导入式的一个缺陷。

2、对于一些较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,如果这样使用链接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个巨大的缺陷。如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中在导入其他独立的CSS文件;而链接式则不具备这个功能。

因此,建议如果需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文化,在这个“目录”CSS文件中再使用导入式引入其他CSS文件。

但是,若是希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是html怎么嵌入css文件?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏