CSS之引入方式

作者: 落花的季节 | 来源:发表于2016-12-06 20:48 被阅读17次

    CSS的作用

    CSS是为HTML提供显示效果的,但是我们必须在HTML里引入CSS,它才会起作用。

    CSS的引入方式

    • 内联属性(Inline style attribute)
      • 内联属性(Inline style attribute)的使用方法是,对于想要设置样式的HTML元素,直接修改他的style属性,将css代码直接写在style属性里。 比如:
    <h1 style="font-size: 14px;color:blue;">我的字号和高度被修改了</h1>
    
    • 写在style标签里
      • 直接写在style标签里
    <style type="text/css">   
     body{        
             margin-left: 200px; 
             margin-right: 200px;    
    }
    </style>
    
    -  一般要求写在head标签里
    
    <head>
    .button{    
                background-color: aqua;    
                height: 30px;    
                width: 100px;    
                font-size: 14px;
    }
    </head>
    
    • 用link标签引用外部文件
      • 写在head标签里
    <link rel="stylesheet"  href="css/index.css"/>
    
      -  这是最常用的引入方式。如果没有特别的理由,最好使用引入外部css文件的方式。 所谓特别的理由一般是在极其特殊情况下,而且往往也是临时性策略,所以,就算你这么做了也请在未来改进成使用link标签引入外部css文件的方式。
    

    引入方式的优先级

    外部链接,写在style标签里,内联属性这三种引入方式的优先级依次提高。也就是“内联属性”里的会覆盖上面两种,“写在style标签里”的会覆盖写在外部文件里,用“外部链接”引进来的。
    如果在同一个级别里,几乎只有一个规则,后写的覆盖先写的。

    相关文章

      网友评论

        本文标题:CSS之引入方式

        本文链接:https://www.haomeiwen.com/subject/pxntmttx.html