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

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

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三种引入方式:内联、页级、外联