zoukankan      html  css  js  c++  java
  • css引入的方式有哪些_四种css的引入方式与特点

    在网页中css主要负责html文档的样式显示,目前css主要有4种引入方式:行内式、内嵌式、导入式、链接式。

    1.行内式

    行内式也叫内联样式,是指标记的style属性中设定CSS样式,这种方式没有体现出CSS的优势,不推荐使用。例如:

    <div style="color: #ccc;  200px; height: 100px;"></div>

    style定义的CSS样式直接嵌在HTML文档中,当项目中某个CSS样式出现问题(所谓的BUG),开发者很难确定错误到底是出现在HTML中还是在CSS文件中,这会给开发者团队带来巨大的困扰。

    设计坞https://www.wode007.com/sites/73738.html

    2.内嵌式

    HTML提供了style标签以控制页面的显示样式,style元素位于head标签内部,type属性指定CSS代码的文档类型。例如:

    <style type="css/text">
    .text{
         font-size: 20px;
         padding-left: o;
         margin: 0 auto;
    } 
    </style> 
    <body>
        <div class="text"></div> 
    </body>

    这种方式和行内式【内联样式】一样,会造成代码混乱,不易查错,也会给文档加载带来巨大负担。 

    3.导入式

    导入外部样式单的功能与链接外部样式单的功能差不多,只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件,有两种导入方式 。

    a、在style元素中导入CSS文件

     <style type="text/css">    
         @import "CSS样式文件的绝对地址";
         @import url("样式文件的绝对地址");
     </style>        

    url可省略,所以只需指定样式单地址即可,在标准CSS的语法中,@import还有sMedia属性,用于指定CSS的可作用的设备,目前还没得到广泛的支持,所以sMedia可以不写。

    b、在CSS文件中再导入CSS文件

    /*某个CSS文件*/
    @import "另一个CSS文件的地址";
    .test{
          100px;
         height: 100px;
         line-height: 20px;
         background-color: red; 
    }

    在CSS文件中再导入CSS文件,会给服务器造成太大的文件请求压力,最好不要这样做。 @import是由CSS提供的一种导入样式的方式,当页面被加载时,@import会等到页面全部被加载完成时再加载CSS样式,所以在页面还未加载完成期间,页面还没有CSS样式效果,会导致“屏闪”,通过@import导入的CSS样式是无法用DOM去控制的。

    4.链接式

    也就是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用语法如下:

    <link type="text/css" rel="stylesheet" href="CSS样式文件的地址">

    必须有href属性,用于指定需要引入的CSS文件的路径 。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

    总结

    使用CSS样式时,尽量将CSS代码与HTML代码分离,css的引入最好使用链接式,即最好使用引入外部CSS文件的方式。  

  • 相关阅读:
    设置GridView、DataGrid 以提供thead、tbody等标签
    SqlCommandBuilder 可批量新增与修改数据
    js中的截流
    react代码分离方案
    redux在react中的使用
    react 生命周期
    react 函数bind(this)的三种方式
    react 三种组件定义方式
    linux系统下nginx安装目录和nginx.conf配置文件目录
    react component lifecycle
  • 原文地址:https://www.cnblogs.com/ypppt/p/13150122.html
Copyright © 2011-2022 走看看