在HTML中引入CSS的几种方式介绍

目录

• 1、直接在html标签元素内嵌入css样式
• 2、在html头部head部分内style声明
• 3、使用@import引用外部CSS文件方法
• 4、使用link来调用外部的css文件
• 使用link来引用外部的css的优势
• 下面是一些补充

使用不同的方法来引用css样式表，最终到达的效果相同，但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

htML引用css方法如下

接下来我们将逐个讲解html引用css方法的例子

1、直接在html标签元素内嵌入css样式

如div style="font-Size:14px; color:#FF0000; "> 我是div css测试内容-www.js-code.COM支持/div> 效果如下图
 

2、在html头部head部分内style声明

插入代码如下：

style tyPE="text/css">
 !-- .ceshi {
    font-size:14px;
     color:#FF0000;
}
    /*这里是设置CSS的样式内容*/ -->
     /style>
    

具体方法如下图：

3、使用@import引用外部CSS文件方法

!doctype html>
    html>
    head>
    meta charset="utf-8">
    tITle>
    测试/title>
    style type="text/css">
     !-- @import url(wcss.css);
    /*这里是通过@import引用CSS的样式内容*/ -->
     /style>
     /head>
    body>
    div class="ceshi">
    我是div css测试内容-www.js-code.com支持/div>
    /body>
    /html>

Wcss.css文件内代码.ceshi { font-size:14px; color:#FF0000; }

效果如下图：
 

可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置link rel="stylesheet" href="wcss.css" type="text/css" /> 来调用外部的wcss.css文件来实现html引用css文件

详细如下图
 

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式
一般推荐使用link来引用外部的css样式方法。

使用link来引用外部的css的优势

1、有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。
2、节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）
3、修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。

下面是一些补充

在HTML中，引入CSS的方法主要有行内式、内嵌式、导入式和链接式
行内式：即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用

例：

html>
    head>
    meta http-equiv="Content-type" content="text/html;
     charset=utf-8" />
    title>
    Text Demo/title>
    /head>
    body>
    h1 style=color:white;
    background-color=blue;
    >
    This is a line of Text./h1>
    /body>
    /html>
    

嵌入式：嵌入式则将对页面中各种元素的设置集中写在head> 和/head> 之间，对于单一的网页，这种方法很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件，使用以下两种方式中的一种，引入HTML文档中。
例：

html>
    head>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    title>
    Text Demo/title>
    style type="text/css">
h1{
           color:white;
           background-color:boue;
       }
    /style>
           /head>
           body>
    h1>
    This is a line of Text./h1>
    h1>
    This is another line of Text./h1>
           /body>
           /html>
    

导入式与链接式：导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件，二者有相应的区别。
事实上，二者最大的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。
如果使用链接式，需要使用如下语句引入外部CSS文件。

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

如果使用导入式，则需要使用如下语句。

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

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

因此这里给大家的一个建议是，如果需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！