首页 > 代码库 > CSS三种引入方式：内联、页级、外联

CSS三种引入方式：内联、页级、外联

2024-10-19 06:11:02   211人阅读

1.内联CSS

　　内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

1 <body>
2     <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
3 </body>

技术分享

2.页级CSS

　　页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。

 1 <head>
 2     <meta charset="utf-8" />
 3     <title>测试</title>
 4     <style type="text/css">
 5         div {
 6             width: 65px;
 7             height: 20px;
 8             border: 1px solid;
 9             background: greenyellow;
10         }
11     </style>
12 </head>

技术分享

3. 外联CSS

　　外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可，可维护性好；并且外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。

　　接下来具体说说link和@import的区别：

　　(1)link:<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/*.css" />

　　　　link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。

　　　　link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。

　　(2)@import:<style>@import url("*.css");</style>

　　　　@import语法格式务必写在style标签中，后直接加文件路径即可。

　　　　@import作用在CSS文件和页面中，可以在一个CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的样式，整合在一起后，再在index.html中调用一次即可，在实际项目中经常使用，方便管理和维护。　　

　　(3)二者加载顺序影响　　　　

　　　　HTML加载过程：1) 加载HTML-DOM结构

　　　　　　　　　　　   2)CSS和JS

　　　　　　　　　　　   3)图片和多媒体

　　　　　　　　　　　   4)加载事件触发

　　　　link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

　　　　在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。

CSS三种引入方式：内联、页级、外联


联系
我们