CSS外部样式表

最新推荐文章于 2024-08-24 09:46:30 发布

小简(JanYork)

最新推荐文章于 2024-08-24 09:46:30 发布

阅读量1.9k

点赞数 5

分类专栏： HTML5基础知识 CSS3基础讲解文章标签： css html html5

本文链接：https://blog.csdn.net/qq_60750453/article/details/120627219

版权

HTML5基础知识同时被 2 个专栏收录

14 篇文章 10 订阅

订阅专栏

CSS3基础讲解

10 篇文章 4 订阅

订阅专栏

HTML中的CSS外部样式表

温馨提示：建议自己尝试运行代码结合说明观察规律

<!DOCTYPE html>
<html lang="cn">
<head>
    <title>外部样式表</title>

    <!-- 这里我们引入样式表文件 -->
    <link rel="stylesheet" href="外部样式表.css">
    <!-- rel中的stylesheet是样式表的意思，利用href指定样式表文件 -->
</head>
<body>
    <p>外部样式表需要在本地文件夹中创建CSS文件</p>
    <p>创建了之后在css文件里面写上样式</p>
    <!--
         样式如下：
    p{
    color: blueviolet;
    font-size: 40px;
    } 
    注意：是写在css文件里
    -->
    <p>到这里，你会发现，文件里面的p标签内容并没有发生样式变化</p>
    <p>因为我们没有引入css文件，我们可以通过link来引入外部css样式表</p>
    <!-- 我们在head中引入试试，注意，是head中引入，这是个规范 -->
    <p>引入之后，这个文件夹里面所有的并且已经引入了css文件的html文件里面的p标签都按照css文件里面的属性发生了样式改变</p>
<font style="color: darkorange;font-size: 20px;">当然，没有引入css文件以及已经使用内联样式或者内部样式改变了的是不会发生改变的</font>
</body>
</html>

这里我们可以看到，我们使用的额外一个css文件，并且将它导入了html