在CSS中使用嵌入式样式表

CSS代表层叠样式表。HTML用于创建网页，在网页中添加文本、图像、视频等等。之后，我们需要对文本和图像进行样式处理，只能使用CSS来实现。基本上，我们可以使用CSS向HTML元素添加样式，例如背景、颜色、尺寸、方向等。

有三种方式可以向网页添加样式效果。第一种方式是内联样式，直接向HTML元素添加样式。第二种是使用嵌入式样式表，在“html”文件中的<style>标记中添加样式。第三种方式是使用外部的CSS文件来向网页添加样式。

语法

用户可以遵循下面的语法将嵌入式样式表添加到HTML网页中。

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

用户可以在上述语法中的<style>标记之间添加CSS。

示例1

在下面的示例中，我们有一个带有“container”类的div元素。我们在div元素内部添加了两个<p>元素。同时，我们在<p>元素内部添加了文本内容。

在<head>部分，我们添加了<style>标记。在<style>标记内部，我们添加了“container”div元素的CSS。也使用“nth-child()CSS函数为两个

`元素设置不同的样式。

<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> 将 <i> 样式嵌入到HTML文档 </i> </h2>
   <div class = "container">
      <p> 这是一个段落。 </p>
      <p> 这是另一个段落。 </p>
   </div>
</body>
</html>

示例2

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

首先，我们创建了“container”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> 将 <i> 样式表嵌入到HTML文档 </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>将<i>样式表嵌入HTML文档中</i></h2>
   <div class = "circle">
   </div>
</body>
</html>