HTML5+CSS3学习笔记5 CSS的样式

P27-P28

网页分为三个部分：

  • 结构（HTML）
  • 表现（CSS）
  • 行为（JavaScript）

CSS：

  • 层叠样式表
  • 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层
  • 总之一句话，CSS用来设置网页中元素的样式

使用CSS来修改元素的样式

第一种方式：（内联样式/行内样式）

  • 在标签内部通过style属性来设置元素的样式
  • 问题：
    • 使用内联样式，样式只能对一个标签生效，如果希望影响多个元素必须在每一个元素中都复制一遍，
    • 并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
  • 注意：开发时绝对不要使用内联样式
<p style="color:red; font-size: 60px;">春眠不觉晓，处处闻啼鸟。</p>

第二种方式（内部样式表）：

  • 将样式编写到head中的style标签里，
    然后通过CSS的选择器来选中元素并为其设置各种样式，
    可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
  • 内部样式表更加方便对样式进行复用
  • 问题：我们的内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>poetea</title>
        <style>
            p {
                color:green;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>春眠不觉晓，处处闻啼鸟。</p>
        
    </body>
</html>

第三种方式（外部样式表）：

  • 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
  • 外部样式表需要通过link标签进行引入，意外着只要想使用这些样式的网页都可以对其进行引用
    使样式可以再不同页面之间进行复用
  • 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

style.css：

p {
    color: deeppink;
    font-size: 60px;
}

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>poetea</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>春眠不觉晓，处处闻啼鸟。</p>

    </body>
</html>
posted @ 2021-02-13 18:25  poetea  阅读(81)  评论(0)    收藏  举报