1. CSS 介绍

全称层叠样式表 (Cascading Style Sheets)，用于实现页面的样式。

2. 基本语法

CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
语法：

选择器 {
    样式名:样式值;
    样式名:样式值;
}

p {
    color:red;
    font-size:12px;
}

3. 书写位置

  • 行内样式 <p style="color: red; font-size: 24px;">这是一个p标签</p>

  • 内部样式 <style>p{color: red;font-size: 24px;}</style>

  • 外部引入 <link rel="stylesheet" href="style.css">

TIPS:

1. 行内样式：这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们很少使用。

2. 内部样式：这样使`css`独立于`html`代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用

3. 外部样式：这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <!-- 外链,外部引入方式 -->
        <!-- 引入路径规则 和 图片引入规则一样 -->
        <link rel="stylesheet" href="style.css" />
        <!-- 内部书写 -->
        <style>
            /* 语法: 
            选择器{
                样式名:样式值;
                样式名:样式值;
            } */
            /* 分号不能省略 */
            p {
                color: orange;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <!-- 行内样式语法 -->
        <!-- style="样式名:样式值;样式名:样式值;" -->
        <!-- 分号不能省略 -->
        <p style="color: red; font-size: 24px;">我是一个P标签</p>
        <p>我是内部样式的p标签</p>
    </body>
</html>
文档更新时间: 2023-01-05 17:10   作者：孙老师