[分享]css内部样式表案例

发布于 2024-11-11 15:26:20

CSS内部样式表是指将CSS样式写在HTML文档的头部，使用style标签定义，全局适用于整个HTML文档。下面是一个案例通过使用CSS内部样式表来改变文本的样式： p { color: red; f...

CSS内部样式表是指将CSS样式写在HTML文档的头部，使用style标签定义，全局适用于整个HTML文档。下面是一个案例通过使用CSS内部样式表来改变文本的样式：

<head>
  <style>
    p {
      color: red;
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>
    <p>欢迎光临我们的网站！</p>
  </div>
</body>

在上面的案例中，我们首先在头部定义了一个样式表，将p元素的文本颜色、字体、大小、粗细以及对齐方式分别设置为红色、'Helvetica Neue', sans-serif、18px、bold和center。接着在HTML文档主体中，我们使用p元素来展示文本，这些文本将会应用刚刚定义的样式。

如果我们将上面的示例放到浏览器中打开，我们将看到文本变为了红色、加粗、居中对齐并且使用了所设置的字体和大小。

总之，使用CSS内部样式表非常方便，它可以帮助我们在整个HTML文档中快速定义样式，并且提高了代码的可读性。

css 教程