零基础学习WEB前端开发(十九)：CSS的引入方式（行内样式表、内部样式表、外部样式表）

最新推荐文章于 2026-02-26 02:32:00 发布

原创最新推荐文章于 2026-02-26 02:32:00 发布 · 3.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEB前端开发

这篇博客介绍了HTML样式的三种类型：内部样式表、行内样式表和外部样式表。内部样式表通常放在<head>标签中，方便控制整个页面样式，但未实现样式与结构的分离。行内样式表用于局部样式修改，简单易用但不推荐大量使用。外部样式表是实际开发中的首选，样式存储在.css文件中，通过<link>标签引入，适用于样式复杂的情况，实现了样式与结构的分离。

一、内部样式表

内部样式表，也叫内嵌样式表，写到html页面内部，是将所有的CSS代码抽取出来，单独放到<style>标签中。

前面笔记所记录的都是这种内部样式表。

<style>标签理论上可以放在html文档的任何地方，但一般都放在文档的<head>标签中。
用这种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是没有实现样式与结构的完全分离

二、行内样式表

行内样式表是用来修改段落中的一部分样式，就局部内容进行简单修改。

语法：

<标签 style="color: red;font-size: 12px;">这是显示的内容< /标签>

<!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>

</head>
<body>
    <p>我不去想是否能够成功</p>

    <p>既然选择了远方</p>

    <p>便只顾风雨兼程</p>

    <p style="font-size: 28px;color: blue;">我不去想能否赢得爱情</p>

    <p>既然钟情于玫瑰</p>

    <p style="font-size: 28px;color: blue;">就勇敢地吐露真诚</p>

</body>
</html>