CSS3学习笔记——HTML网页中引用CSS的三种方式

最新推荐文章于 2023-05-12 17:33:47 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-05-12 17:33:47 发布

阅读量345

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/m0_47015897/article/details/111748850

版权

CSS3 专栏收录该内容

38 篇文章 16 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        第二种方式：
            -将样式编写到head中的style标签里
                然后通过CSS的选择器来选中元素并为其设置各种样式
                可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
            -内部样式更加方便进行复用
            问题：
                我们的内部样式表只能对一个网页起作用，
                    它里面的样式不能跨页面进行使用
     -->
     <!-- <style>
          
        p{  color:red;
            font-size: 30px;
        }

     </style> -->

     <!-- 
         第三种方式（外部样式）：
            -可以将CSS样式编写到一个外部的CSS文件中
                然后通过link标签来引入外部的CSS文件
            -外部样式表组要通过link标签进行引入，
                意味着只要想使用这些样式的网页都可以对其及进行引用
                是样式可以在不同页面之间进行复用
            -将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
                从而加快网页的加载速度，提高用户的体验 
      -->

      <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>
        使用link引用后的h1标题
    </h1>
    <!-- 
        网页分成三个部分：
            结构（HTML）
            表现（CSS）
            行为（JavaScript）
        CSS
            -层叠样式表
            -网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层设置样式
                而最终我们能看到的这是网页最上面的一层
            -总之就是一句话，CSS用来设置网页中元素的样式

     -->

     <p>少小离家老大回，乡音无改鬓毛衰</p>

     <!-- 
         使用CSS修改元素样式

         第一种方式(内联样式，行内样式)：
            在标签内部使用style属性来设置元素样式
            问题：
                使用内联样式，样式智能对一个标签生效，如果希望影响到多个元素
                必须在每一个元素中都复制一遍
                并且当样式发生变化时，我们必须要一个一个的修改，非常不方便
            -注意：开发时绝对不要使用内联样式
      -->

      <p>今天天气真不错</p>
</body>
</html>

本笔记是观看尚硅谷HTML5+CSS3时所作，仅供参考！

Etui۹(･༥･´)و ̑̑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记——HTML网页中引用CSS的三种方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第二种方式： -将样
复制链接

扫一扫