三种CSS样式实现（内联样式、内联样式表、外联样式表）

comegoing-归去兮来

已于 2022-07-13 16:15:52 修改

阅读量8.2k

点赞数 4

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

于 2022-07-11 16:46:26 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125724509

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、内联样式

1、基本语法规则

（1）随便写一个标签，比如p或者div等等

（2）在标签开头属性中添加样式

（3）样式的规则为“键值对”格式，冒号前为基本键，冒号后跟值，不同键值对用分号间隔

（在下面的例子中，对颜色和大小进行了设置，还有其它键值对可供设置，暂不列出）

<p style="color: red; font-size: 60px;">这是一个测试</p>

2、例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css内联样式</title>
    </head>
    <body>
        <p style="color: red; font-size: 60px;">这是一个测试</p>
    </body>
</html>

二、内联样式表（举例常用，简便）

1、基本语法规则

（1）在head标签中加入style标签，统一设置

（2）基本格式为“标签+大括号”，可在其中对多个标签设置

（在下例中，仅仅给出部分截图，style在head标签中，这里仅仅对p标签进行设置）

<style>
    p{
        color: red;
        font-size: 60px;
    }
</style>

2、例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css内联样式表</title>
        <style>
            p{
                color: red;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <p>这是一个测试</p>
        <p>这是第二个测试</p>
        <p style="color:yellow;font-size:60px;">这是第三个测试</p>
    </body>
</html>

（注意，在style标签中，对所有p标签进行了统一设置，但仍可以使用内联样式进行单个设置，这里涉及到选择器优先级，在后面进行介绍）

三、外联样式表（最规范用法，适合做项目）

1、格式规范

（1）新建“文件名.css”文件

（2）基本格式为“标签名+大括号”，和内联样式表格式相同，不过是单独在新建css文件中

（3）在html中与该css文件建立连接，使用link标签，注明css文件链接位置，该link标签在head标签中

（第三条尤其容易被忽略，在下例中，使用的是相对地址链接）

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

<link rel="stylesheet" href="outline_table.css">

2、例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css外联样式表</title>
        <link rel="stylesheet" href="outline_table.css">
    </head>
    <body>
        <p>这是一个测试</p>
        <p>这是第二个测试</p>
        <p style="color: yellow; font-size:40px">这是第三个测试</p>
    </body>
</html>

（在外联样式表的规范之下，仍可以使用内联样式对单个进行约束，这里涉及到选择器优先级，在后面进行介绍）