• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

css引入方式

开发技术 开发技术 5小时前 2次浏览

1、页级CSS【内联css文件】

在html文件的head部分,用style标签包裹。作用范围和字面意思相同,仅限于本页面的元素

<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <style type="text/css">
        div {
            width: 65px;
            height: 20px;
            border: 1px solid;
            background: greenyellow;
        }
    </style>
</head>

 

2、内联CSS【行内CSS、行级CSS】

<p style="color: black">Jay</p>

 

3. 外联CSS

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

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

  (1)link:       <link rel=”stylesheet”  type=”text/css”  href=”*.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文件中,在页面调用时,一般加载第三方的样式会使用到,并且需要放置在页面的底部,不会影响自己的网站。

 

3、使用@import导入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css3.css";
    </style>
    
</head>

@import有数量限制,且是先等网页加载完再引入样式,如果网页足够大,则可能出现闪烁,就是漫长的无样式网页加载之后,css突然出来。

 

4、使用link引入外部链接

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css3.css" type="text/css" rel="stylesheet">
</head>

link是html加载前就引用,等dom树生成好后和样式表结合生成渲染树,浏览器再开始渲染页面,不会出现闪烁


程序员灯塔
转载请注明原文链接:css引入方式
喜欢 (0)