css课堂笔记28

最新推荐文章于 2022-07-11 16:46:26 发布

菜鸟也有进大厂的梦

最新推荐文章于 2022-07-11 16:46:26 发布

阅读量61

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_61047719/article/details/123287409

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
   <!-- <style>
        p{
            color: aqua;
            font-size: 60px;
        }
        h1{
            color: blueviolet;
            font-size: 10px;
        }


    </style>
-->
</head>
<body>
    <!--网页分为三个部分：
        结构（HTML）
        表现（css）
        行为（JavaScript）
        css
            -层叠样式表
            -网页实际上是一个多层的结构，通过css可以分为网页的每一个层来设置样式
             而最终我们能看到只是网页的最上边一层
            -总之一句话，css用来设置网页中元素的样式
    -->
    <!--
        使用css来修改元素的样式

        第一种方案：（内联样式，行内样式）
                    -在标签内部通过style属性来设置元素的样式
                    -问题：
                    使用内联样式，样式只能对一个标签生效，
                    如果希望影响到多个元素必须在每一个元素中都复制一遍
                    并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
                注意：开发时绝对不要使用内联样式
        第二种方式（内部样式表）：
            -将样式编写到head中的style标签里
             然后通过css的选择器来选中元素并为其设置各种样式
             可以同时为多个标签设置样式，并且修改时只需要修改一处即可
            -内部样式表更加方便对样式进行复用

            -问题：
               我们的内部样式表只能对一个网页起作用，
               它里面的样式不能跨网页进行复用
        第三种方式（外部样式表）
            -可以将css样式编写到一个外部的css文件中，
            然后通过link标签来引用外部的css文件
            -外部样式需要通过link标签进行引入，
            意味着只要想使用这些样式的网页都可以对其进行引用，
            使样式在不同页面之间可以进行复用
            -将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，
            从而加快网页的加载速度

    -->
        少小离家老大回，乡音无改鬓毛衰
        今天天气不错
        内部样式测试


</body>
</html>

style.css

body{
    color: chartreuse;
    font-size: 50px;
}

菜鸟也有进大厂的梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css课堂笔记28

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫