CSS外部样式表

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

样式对照图

 

猜你喜欢

转载自blog.csdn.net/qq_60750453/article/details/120627219