美文网首页
关于CSS 的加载方式

关于CSS 的加载方式

作者: 虾丸biu | 来源:发表于2018-04-05 20:25 被阅读0次

    外部样式

    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。

    • 使用 <link> 标签链接到样式表。如:
    <head>
        <link rel="stylesheet" href="style.css"> 
    </head>
    

    N.引入style.css时,style.css必须在当前目录下,如果不在当前目录下,则要把路径标明出来。如:

    <head>
        <link rel="stylesheet" href="CSS/style.css"> 
    </head>
    

    内部样式

    当单个文档需要特殊的样式时,就应该使用内部样式表。

    • 可以使用 <style> 标签在文档头部定义内部样式表。如:
    <style>
        p{
            font-size: 50px;   
        }
    </style>
    
    • 当需要.html中引入一个.css的文件时。如:
    <style>
        @import url(style.css); 
        p{
            font-size: 50px;   
        }
    </style>
    

    N.@impor还可以把两个.css的文件连接到一起,在其中一个.css中用@impor引入另一个.css文件。如:

    #以下写法都可以
    @import url(style2.css); 
    @import url("style2.css");
    @import url('style2.css'); 
    @import "style2.css"; 
    @import 'style2.css'; 
    

    内联样式(不推荐)

    由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

    <p style="background: orange; font-size: 24px">
        Hello CSS    
    </p>
    

    N.多重样式优先级:内联样式 > 内部样式 >外部样式 > 浏览器默认样式

    相关文章

      网友评论

          本文标题:关于CSS 的加载方式

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