CSS 中嵌入式样式表的用途

cssweb developmentfront end technology更新于 2024/4/27 16:12:17

CSS 代表层叠样式表。HTML 用于创建网页，向网页添加文本、图片、视频等。之后，我们需要为文本和图片设置样式，这只需使用 CSS 即可完成。基本上，我们可以使用 CSS 为 HTML 元素添加背景、颜色、尺寸、方向等样式。

有三种方法可以为网页添加样式。第一种是内联样式，它直接将样式添加到 HTML 元素。第二种是嵌入式样式表，它在"html"文件的 <style> 标签内添加样式。外部 CSS 文件是向网页添加样式的第三种方式。

语法

用户可以按照以下语法向 HTML 网页添加嵌入式样式表。

<style>
/* 在此处添加 CSS */
</style>

用户可以按照上述语法在 <style> 标签之间添加 CSS。

示例 1

在下面的示例中，我们有一个带有"container"类的 div 元素。我们在 div 元素内添加了两个 <p> 元素。此外，我们在 <p> 元素内添加了文本内容。

在 <head> 部分，我们添加了 <style> 标签。在 <style> 标签内，我们添加了容器 div 元素的 CSS。此外，我们还使用了 CSS 函数 nth-child() 来为两个 <p> 元素设置不同的样式。

<html>
<head>
   <style>
      .container {
         border: 2px solid black;
         padding: 10px;
         margin: 10px;
         background-color: lightblue;
         height: 100px;
         width: 500px;
      }
      .container p:nth-child(1) {
         color: red;
         font-size: 20px;
      }
      .container p:nth-child(2) {
         color: green;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <h2> Embedding the <i> Styles to the HTML document </i> </h2>
   <div class = "container">
      <p> This is a paragraph. </p>
      <p> This is another paragraph. </p>
   </div>
</body>
</html>

示例 2

在下面的示例中，我们添加了 div 元素的悬停效果。

首先，我们创建了"容器"div 元素，并添加了三个 div 元素作为其子元素。此外，我们为每个 div 元素指定了不同的背景颜色。当用户将鼠标悬停在 div 元素上时，每个 div 元素的颜色都会发生变化。

<html>
<head>
   <style>
      .container {
         display: flex;
         background-color: aqua;
         height: 200px;
         width: 400px;
         justify-content: space-around;
         align-items: center;
         border-radius: 12px;
      }
      .div1,
      .div2,
      .div3 {
         color: white;
         font-size: 2rem;
         border-radius: 12px;
         height: 100px;
         width: 100px;
      }
      .div1 {
         background-color: red;
      }
      .div2 {
         background-color: green;
      }
      .div3 {
         background-color: blue;
      }
      .div1:hover {
         background-color: pink;
      }
      .div2:hover {
         background-color: yellow;
      }
      .div3:hover {
         background-color: orange;
      }
   </style>
</head>
<body>
   <h2> Embedding the <i> Style sheet to the HTML document </i> </h2>
   <div class = "container">
      <div class = "div1">
         Div 1
      </div>
      <div class = "div2">
         Div 2
      </div>
      <div class = "div3">
         Div 3
      </div>
   </div>
</body>
</html>

示例 3

我们将以下示例中的样式表嵌入到 HTML 文件中。我们使用 CSS 创建了圆圈。此外，我们还为圆圈添加了动画。

我们创建了"较大"的关键帧，用于将圆圈的尺寸改变 50%，并改变背景颜色，用户可以在输出中观察到这些变化。

<html>
<head>
   <style>
      .circle {
         height: 200px;
         width: 200px;
         border-radius: 50%;
         background-color: red;
         animation: larger 2s linear infinite;
         margin: 120px;
      }
      @keyframes larger {
         0% {
            transform: scale(1);
            background-color: red;
         }
         50% {
            transform: scale(1.5);
            background-color: green;
         }
         100% {
            transform: scale(1);
            background-color: red;
         }
      }
   </style>
</head>
<body>
   <h2> Embedding the <i> Style sheet to the HTML document </i> </h2>
   <div class = "circle">
   </div>
</body>
</html>

用户学习了如何在 CSS 中嵌入样式表。用户需要在 <style> 标签之间添加 CSS，才能将 CSS 嵌入到整个网页的 HTML 文件中，而不是使用外部 CSS 文件。但是，不建议在实时开发中使用嵌入式 CSS，因为它会使代码更加复杂。