css样式引入方式及优缺点

迷南。 2024-03-31 14:59 167阅读 0赞

这篇文章主要介绍了css样式引入及优缺点，本文给大家分享三种css的引入方式，通过代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

**三种css的引入方式**

**1.行内样式**

优点：书写方便，权重高缺点：没有做到结构样式相分离

> <div style="width: 100px" height:100px></div>

**2.内部样式**

优点：结构样式相分离缺点：分离不彻底

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;style&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: violet;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: </code><code>16px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/style&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**3.外部样式**

优点:完全实现结构和样式相分离缺点：需要引入

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;!-- 引入css初始化文件 --&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"css/normalize.css"</code> <code>/&gt;</code> <code>&lt;!-- 引入公共样式 --&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"css/baes.css"</code><code>&gt;</code> <code>&lt;!-- 引入首页样式 --&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"css/index.css"</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**补充：四种CSS样式的引入方式**

准备

1.首先准备一个html文件：test.html，不建议使用记事本创建文件，建议使用Notepad++来创建并编辑文件，注意编码格式为：以UTF-8无BOM格式编码，否则会出现中文乱码，内容如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>&lt;!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> <code>"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"</code><code>&gt;</code> <code>&lt;html xmlns=</code><code>"<a href="http://www.w3.org/1999/xhtml" title="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html;charset=UTF-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;四种CSS样式引入方式&lt;/title&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;style type=</code><code>"text/css"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/style&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hello</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2.保存文件至桌面，右键选择谷歌浏览器（或其他浏览器打开）打开，发现页面上出现了hello这几个英文字母。

![f256f0cb144b98db78701f8338eacc32.png][]

**四种引入方式**

**行内式**

通过html属性style实现，如下所示

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>//写在body标签中</code> <code>&lt;span style=</code><code>"color:red;"</code><code>&gt;行内式&lt;/span&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**嵌入式**

在style标签中写css样式，在body中引用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>//写在style标签中的css样式</code> <code>p{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>:</code><code>blue</code><code>;</code> <code>}</code> <code>-----------------------------------------------------------------</code> <code>//写在body标签中</code> <code>&lt;p&gt;嵌入式&lt;/p&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**链接式**

1.一般都使用这种方式，在桌面上新建一个css文件：test.css，内容为一个css样式

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>//写在test.css文件中</code> <code>div{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>:yellow;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

2.在test.html引入test.css文件

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下</code> <code>&lt;link href=</code><code>"test.css"</code> <code>type=</code><code>"text/css"</code> <code>rel=</code><code>"stylesheet"</code> <code>/&gt;</code> <code>------------------------------------------------------------------------</code> <code>//写在body标签中</code> <code>&lt;div&gt;链接式&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**导入式**

> @import(url(demo.css))

1.基本不使用，因为页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。

2.创建一个demo.css文件，写上一个css样式

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>//写在demo.css文件中</code> <code>h</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>:</code><code>green</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

3.使用@import方式导入demo.css文件

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>//试验了一下，需要单独写在一个style中，</code> <code>&lt;style&gt;</code> <code>&nbsp;&nbsp;</code><code>@import </code><code>url</code><code>(demo.css)</code> <code>&lt;/style&gt;</code> <code>----------------------------------------------------------------------------</code> <code>//写在body标签中</code> <code>&lt;h</code><code>2</code><code>&gt;导入式&lt;/h</code><code>2</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

前三种样式的显示优先级

就近原则，即行内式>嵌入式>嵌入式

**总结**

到此这篇关于css样式引入及优缺点介绍的文章就介绍到这了。

转自：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[f256f0cb144b98db78701f8338eacc32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d57f43970ae44a89aa9dffa5aa2c4924.png
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com