HTML+CSS：三种css的引入方式，内链式、嵌入式、外部式

Dear 丶 2021-09-18 15:44 665阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70][]

本篇文章我们将为大家介绍下css的三种引入方式。

**（1）内链式引入**

内链式css样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

<div** **>设置文字的颜色为红色</div>

这里要注意：样式的内容写在元素的开始标签里，并且css样式代码要写在双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。多个css样式写在一起的效果如下面所示：

<div** **>设置字体颜色为红色，并且字体大小为14px</div>

**（2）嵌入式引入**

嵌入式样式表与内链式不同的是可以很方便的同时修改多个相同元素的样式属性，比如我们想要将某个标签内的内容字体都调整为红色，并且加粗，字体大小都调整为14px；

我们如果使用内链式的方式，我们需要在每个标签上都要加上样式，代码就如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1][]

从上边可以看出，内链式会产生一堆的冗余代码，而使用我们的嵌入式就比较简单了，代码如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 2][]

由上图可以看出，嵌入式我们只需要修改span标签，那么所有的span标签内内容的样式都会跟着修改。

**（3）外部式引入**

外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，一般放在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。

**使用语法：**<link href="style.css" rel="stylesheet" type="text/css" />

**详细讲解：**

1、href=""内部的就为css文件的地址一般以英文命名，比如 base.css或者style.css等等。

2、rel="stylesheet" type="text/css" 这是w3c的标准，固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

我们在网站建设中，一般都会使用外部式写法，一来可以做到代码分离，有助于后期的修改维护；二来可以减少页面代码的冗余，有助于优化。具体的页面代码就如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 3][]

我们以上三种写法，最后所得到的结果都是一样的，在网页中呈现的效果都如下图所示：

![20190329141221245.png][]

对于css的三种引入方式我们今天就先介绍到这里，我们后期进行项目制作的时候主要还是使用第三种外部式写法，大家在平时可以自己多加联系联系，熟练一下css的基本操作。

每日金句：**有志者自有千计万计，无志者只感千难万难。**喜欢我的文章的小伙伴记得分享哦，每天将为你更新最新知识。

如果有其他疑问或是看法可以在评论里或投稿跟小编进行讨论，也可以关注微信公众号【筑梦前端】，与小编一起探讨更多的编程知识。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70]: /images/20210812/1c00bf0783ac423a8d0e22fefad7bf23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1]: /images/20210812/b2ca66e01ef249398d6c85504e43250a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 2]: /images/20210812/aed7f7ca2d8745d8a6f7e8ee783373b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 3]: /images/20210812/42f3ec617dc9440d82b04225f3e936f6.png
[20190329141221245.png]: /images/20210812/104d13cfdbd84acbbf09729b511b01aa.png