[分享]CSS内部样式表用法

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

CSS内部样式表是Web开发中常用的一种样式编写方式。它通过在HTML文档的头部区域进行样式的定义，从而对整个页面生效，方便、灵活、统一。使用CSS内部样式表可以提高Web页面的效率和美观度。下面是一...

CSS内部样式表是Web开发中常用的一种样式编写方式。它通过在HTML文档的头部区域进行样式的定义，从而对整个页面生效，方便、灵活、统一。

使用CSS内部样式表可以提高Web页面的效率和美观度。下面是一个基本的CSS内部样式表：

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <p>这是一段红色的文字，字体大小为20px。</p>
</body>

在上面的代码中，我们通过在HTML文档的头部区域定义了一个样式表，指定了所有的p标签都具有红色字体和20px的字号。在body里，我们只需要对需要应用这种样式的文字包裹在p标签中即可。

当页面需要使用多种样式时，可以在样式表内添加多个样式，如下：

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
    .bold {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <p>这是一段红色的文字，字体大小为20px。</p>
  <p class="bold">这是加粗的文字。</p>
</body>

在上面的代码中，我们在.CSS内部样式表中新增了一个class为“bold”的样式，指定了文字的字体加粗。在p标签中添加class为“bold”即可应用改样式。

总之，CSS内部样式表是Web开发中不可或缺的一种样式编写方式。掌握好它的用法，可以让我们在设计页面时事半功倍。

css 教程