有关样式表，它有哪些正常的HTML无法做到的内容

开发人员可以使用CSS来描述网页内容的呈现方式。样式表包含CSS代码，我们将其链接到网页上，以更好地表示网页。

为什么我们需要在HTML网页中使用样式表？

对于初学者，首先想到的问题是为什么我们需要使用样式表？我们不能使用不带样式表的方式创建网页吗？答案是肯定的。您可以使用不带样式表的方式创建网页。

HTML仅用于向网页添加内容，并准备网页的结构。我们需要为网页内容进行描述，以便更好地呈现并吸引访问者，这可以使用CSS实现。

通过在样式表中添加CSS代码，我们可以为网页的字体、div元素进行样式设置，并为网页创建卡片等。

语法

用户应按照以下语法编写样式表中的CSS代码。

选择器 {
   /* CSS code */
}

这里，我们需要在CSS代码的声明块中编写CSS选择器和CSS代码。此外，用户可以为多个HTML元素编写CSS代码。

示例1（基本样式）

在下面的示例中，我们演示了如何将样式表与HTML内容一起使用。在这里，我们使用了嵌入式样式表来更改HTML元素的表示形式。

在这里，我们创建了两个div元素并对其进行了样式设置。用户可以删除与div元素相关的样式并观察输出结果的外观。

<html>
<head>
   <style>
      body {background-color: aliceblue;}
      .first {
         height: 150px;
         width: 300px;
         font-size: 1.3rem;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         color: white;
         background-color: blueviolet;
      }
      .second {
         height: 100px;
         width: 400px;
         font-size: 1.3rem;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         color: red;
         margin: 10px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h2>使用<i>样式表</i>将基本样式应用于网页内容</h2>
   <div class = "first"> 你好! 还好吗？ </div>
   <div class = "second"> 欢迎来到TutorialsPoint！ </div>
</body>
</html>

示例2（动画和过渡）

在下面的示例中，我们演示了如何使用样式表向HTML元素添加动画。我们创建了一个div元素并使用CSS进行了样式设置。

此外，我们添加了“bounce”的关键帧以进行动画处理。在“bounce”关键帧中，我们更改元素的水平位置，使其动画化。

<html>
<head>
   <style>
      .animate {
         width: 300px;
         height: 300px;
         background-color: burlywood;
         border: 2px dotted olive;
         border-radius: 10px;
         animation: bounce 2s ease-in-out 0.1s infinite;
      }
      @keyframes bounce {
         0% {transform: translateX(0px);}
         40% {transform: translateX(30px);}
         80% {transform: translateX(20px);}
         90% {transform: translateX(15px);}
         100% {transform: translateX(00px);}
      }
   </style>
</head>
<body>
   <h2>使用<i>样式表</i>将动画添加到HTML内容</h2>
   <div class = "animate"> </div>
</body>
</html>

示例3（响应式设计）

在下面的示例中，我们演示了通过为HTML内容添加样式表来创建响应式设计。在这里，我们设置了父元素的尺寸和一些基本样式。此外，我们为子div元素设置了尺寸。

之后，我们使用媒体查询使网页响应式。如果屏幕尺寸小于720个像素，则更改div元素的尺寸，用户可以在输出中观察到这一点。

<html>
<head>
   <style>
      .parent {
         width: 50%;
         height: 70%;
         background-color: blueviolet;
         border: 2px dotted green;
         border-radius: 12px;
         margin: 0 auto;
      }
      .child {
         width: 50%;
         height: 50%;
         background-color: yellow;
         border-radius: 12px;
         margin: 15% auto;
      }
      @media screen and (max-width: 720px) {
         .parent { width: 100%; height: 70%;}
         .child { width: 80%; height: 50%;}
      }
   </style>
</head>
<body>
   <h2>使用<i>样式表</i>制作响应式设计</h2>
   <div class = "parent">
      <div class = "child">
      </div>
   </div>
</body>
</html>

示例4（布局控制）

在下面的示例中，我们演示了通过样式表控制HTML元素的布局。在这里，我们有一个“container” div元素，它的总体积宽度为屏幕大小的80％。此外，我们使用了“display：flex” CSS属性。

对于“block1”元素，我们使用了“flex：1”；对于“block2”元素，我们使用了“flex：2” CSS属性。在这里，用户可以观察到block1占用33.33％的空间，block2占用总空间的66.67％。

<html>
<head>
   <style>
      .container {
         width: 80%;
         height: 300px;
         display: flex;
         border: 3px solid pink;
      }
      .block1 {
         flex: 1;
         background-color: blue;
      }
      .block2 {
         flex: 2;
         background-color: red;
      }
   </style>
</head>
<body>
   <h2>使用<i>样式表</i>制作响应式设计</h2>
   <div class = "container">
      <div class = "block1"> </div>
      <div class = "block2"> </div>
   </div>
</body>
</html>