CSS简介及三种书写位置

趋之

于 2023-10-31 08:49:42 发布

阅读量285

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/csgojingyu/article/details/134132389

版权

css 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

网页分成三个部分

结构 html骨架支撑

表现 css外在显示的样子

行为 js注入思想灵魂

一：css ——层叠样式表

——网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的只有最上边的一层

——设置网页中元素的样式

你首先做的事，找对追求目标，然后各种花招追求她（他）

二：三种书写位置

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

——在标签内部通过style属性来设置元素的样式样式名：样式值；可以有多个

——问题：结构与样式耦合

使用内联样式，样式只能对一个标签生效，如果希望影响其他，也得在其他标签中设置

当样式发生变化，我们必须要一个一个修改，非常不方便

——开发时，不推荐使用内联样式

使用css来修改元素的样式

第二种方式：内部样式表

——将CSS样式编写到head中的style标签里,通过CSS选择器选中指定元素，然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用

——好处

1:将样式表编写到style标签中，也可以使表现和结构进一步分离，方便寻找并维护

2:同时为多个标签设置样式，并修改时只需要修改一处即可全部应用

3:方便对样式进行复用

4:将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，

加快网页的加载速度，提高用户体验

——问题：

1:只对一个页面起作业，它里边的样式不能跨页面进行复用

第三种方式：外部样式表

——讲css样式编写到一个外部的文件中

然后讲外部文件引入到css文件中，link标签引入

——好处

其他的网页可以对其进行引用，复用度进一步提高

——最佳推荐

<!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>
    <style>
      /* p {
        color: red;
        font-size: 22px;
      } */
    </style>
    
    <link rel="stylesheet" href="./02.css外联样式.css" />
  </head>
  <body>
    <!-- 需求：字体变红，放大 -->— <p >离离原上草，一岁一枯荣</p> —>
    <p style="color: red; font-size: 22px">野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
    <p>野火烧不尽，春风吹又生</p>
  </body>
</html>