[分享]css内部样式表html

发布于 2024-11-11 15:25:48

CSS内部样式表是一种定义HTML样式的方法，它将HTML文档中的样式集中在一个独立的部分中，易于维护和修改。 p{ fontsize: 20px; color: 333; } 这是一个段落上面这段...

CSS内部样式表是一种定义HTML样式的方法，它将HTML文档中的样式集中在一个独立的部分中，易于维护和修改。

<html>
  <head>
    <style>
      p{
        font-size: 20px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落</p>
  </body>
</html>

上面这段代码中，我们在head标签中使用style标签定义了一个p标签的样式，包括字体大小和颜色。在body标签中，我们使用这个p标签，它的样式会被应用到这个段落中。

内部样式表的好处是，它可以让我们快速地对一个或多个html元素应用同样的样式。我们可以在style标签中定义多种不同的样式，然后在html中应用它们。

<html>
  <head>
    <style>
      .big-text{
        font-size: 24px;
      }
      .red-text{
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="big-text red-text">这是一个红色的大字体段落</p>
  </body>
</html>

在这个例子中，我们定义了两个样式，big-text和red-text。它们分别定义了字体大小和颜色。然后我们在一个p标签中应用了这两个样式，它会使用这两个样式的所有属性。

总体来说，CSS内部样式表是一个非常方便的工具，可以让我们管理和修改HTML样式更加简单和快速。

css 教程