CSS 笔记（一）：认识 CSS

Reyn Morales

已于 2022-09-06 15:35:23 修改

阅读量180

点赞数 2

分类专栏： CSS 笔记文章标签： css html 前端

于 2022-07-30 16:52:21 首次发布

本文链接：https://blog.csdn.net/Raymiles/article/details/126074558

版权

CSS 笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS 笔记（一）：认识 CSS

通过标签修改样式的缺点

必须记忆哪些标签有哪些属性，如果此标签没有此属性，那么不会产生效果
当需求变更时，我们需要修改大量代码才能满足现有需求
HTML 只有一个作用，即为文本添加语义

所以在企业开发中，我们使用 CSS 修改样式

通过 CSS 来修改样式的优点

不用记忆哪些属性属于哪个标签
当需求变更时，我们不需要修改大量的代码就可以满足需求
在前端开发中，CSS 只有一个作用，即为修改样式

<html>
    <head>
        <meta charset="UTF-8" />
        <title>...</title>
        <style type="text/css">
            p {
                text-align: center;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
    </body>
</html>

固定格式

<style type="text/css">
    ... {
        key: value;
        ...
        key: value;
    }
</style>

style 标签必须写在 head 的开始和结束标签之间
style 标签中的 type 属性可以不写
设置样式时，必须以固定格式设置：key: value;，不能省略冒号与分号

书写位置

行内样式，将 CSS 样式写至 HTML 标签的开始标签
内嵌样式，将 CSS 样式写至 head 标签区域
外链样式，将 CSS 样式表写至以 .css 为扩展名的文件中，在 html 文件中使用 link 标签引用此文件，此模式在显示页面时，先加载 CSS 样式，后加载 HTML 结构，不存在兼容问题