前端基础HTML---外部样式表

可以将样式表编写到外部的css文件中,然后通过link标签来讲外部的css文件引入到当前页面中,
这样外部文件中的css样式表将会应用到当前页面中

将css样式统一编写带外部的样式表中,完全使结构表现纹理,可以使样式表可以在不同页面中使用
最大限度的复用,并且可以加快用户的访问速度

最推荐使用外部样式表

index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>外部样式表</title>
        <!-- 引入css文件 -->
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        
        <!-- 
            可以将样式表编写到外部的css文件中,然后通过link标签来讲外部的css文件引入到当前页面中,
            这样外部文件中的css样式表将会应用到当前页面中
            
            将css样式统一编写带外部的样式表中,完全使结构表现纹理,可以使样式表可以在不同页面中使用
            最大限度的复用,并且可以加快用户的访问速度
         -->
    </head>
    <body>
        <p>锄禾日当午.汗滴禾下土</p>
    </body>
</html>

 

style.css文件

p{
    font-size: 20px;
    color: red;
}

 

效果:

前端基础HTML---外部样式表

 

前端基础HTML---外部样式表

上一篇:复制原文件夹下的所有文件到指定文件夹


下一篇:前端工程化7:自定义实现Webpack中的Loader和Plugin