关于CSS 的加载方式

外部样式

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

  • 使用 <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.多重样式优先级：内联样式 > 内部样式 >外部样式 > 浏览器默认样式

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容