HTML中修改标题和段落的前两种方式

Pniubi

已于 2025-03-10 10:51:47 修改

阅读量555

点赞数 14

分类专栏：网页设计文章标签：前端 html5

于 2025-03-10 10:49:50 首次发布

本文链接：https://blog.youkuaiyun.com/Pniubi/article/details/146129131

版权

网页设计专栏收录该内容

3 篇文章

订阅专栏

在HTML中，修改标题（如 $< h 1 >$ 到 $< h 6 >$ ）和段落 $< p >$ 的样式主要有以下两种方式：

1. 直接内联修改（行内样式）

方法：直接在标签内添加style属性，通过CSS属性定义样式。

示例：

<h1 style="color: red; font-size: 24px;">这是一个标题</h1>
<p style="font-family: Arial; line-height: 1.5;">这是一个段落</p>

特点：
- 优先级高，会覆盖其他样式定义。
- 适用于单个元素的临时修改。
- 代码冗余，难以维护。

2. 通过`<head>`内定义样式（内部样式表）

方法：在HTML的<head>标签内使用<style>标签，通过CSS选择器统一设置样式。

示例：

<head>
  <style>
    h1 {
      color: blue;
      text-align: center;
       }
    p {
      font-size: 16px;
      margin: 10px;
      }
  </style>
</head>

特点：
- 集中管理样式，可复用性强。
- 作用于整个页面的所有对应标签。
- 优先级低于内联样式。

对比总结

方法	适用场景	优点	缺点
直接内联修改	临时、局部样式调整	简单直接，优先级高	代码冗余，难维护
`<head>`内定义	统一管理全局样式	可复用，便于维护	优先级低于内联样式

（第三种方式：外部样式表请见下一篇文章：HTML中修改标题和段落的第三种方式——外部样式表