CSS 标题加上同一行文本

在本文中，我们将介绍如何使用CSS实现标题和同一行文本的样式效果。

阅读更多：CSS 教程

标题样式的选择

在网页设计中，标题是非常重要的元素，可以吸引读者的注意力并使页面结构更加清晰。CSS提供了多种样式来设置标题的外观。

设置标题字体大小

使用font-size属性可以控制标题的字体大小。常见的标题级别为H1到H6，其中H1字体最大，H6字体最小。以下代码演示了如何设置不同的标题字体大小：

h1 {
  font-size: 30px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

调整标题的对齐方式

使用text-align属性可以控制标题的对齐方式，常见的对齐方式有左对齐、右对齐、居中对齐。以下代码演示了如何设置标题的对齐方式：

h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}

设置标题的颜色和背景色

使用color属性可以设置标题的文字颜色，使用background-color属性可以设置标题的背景颜色。以下代码演示了如何设置标题的颜色和背景色：

h1 {
  color: red;
  background-color: yellow;
}

h2 {
  color: blue;
  background-color: green;
}

h3 {
  color: black;
  background-color: white;
}

同一行文本样式的实现

除了标题样式，有时候需要在标题后面添加一些同一行的文本，例如小标题或其他说明性文字。这时候，我们可以使用CSS来实现。

使用display属性

可以使用display属性来设置标题和同一行文本的显示方式。常见的属性值有inline、block和inline-block。以下代码演示了如何将标题和同一行文本显示在同一行：

h1 {
  display: inline;
}

p {
  display: inline;
}

使用float属性

另一种常见的方法是使用float属性。可以将标题和同一行文本都设置为float: left;或float: right;，使它们在同一行显示。以下代码演示了如何使用float属性实现标题和同一行文本的样式：

h1 {
  float: left;
}

p {
  float: left;
}

示例演示

下面是一个示例，展示了如何使用CSS设置标题样式并在同一行添加一些文本：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      font-size: 30px;
      text-align: left;
    }

    p {
      display: inline;
    }
  </style>
</head>
<body>
  <h1>CSS标题样式</h1>
  <p> - 一级标题</p>

  <h2>CSS标题样式</h2>
  <p> - 二级标题</p>

  <h3>CSS标题样式</h3>
  <p> - 三级标题</p>
</body>
</html>

在上面的示例中，我们设置了标题字体大小为30px，对齐方式为左对齐，并使用display: inline;将标题和同一行文本显示在同一行。