样式表可以实现哪些常规 HTML 无法实现的功能?

htmlweb developmentfront end technology更新于 2024/5/10 7:08:17

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

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

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

HTML 仅用于向网页添加内容，并构建网页的结构。为了更好地呈现网页内容并吸引访客，我们需要对其进行描述，这可以使用 CSS 来实现。

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

语法

用户应遵循以下语法在样式表中编写 CSS 代码。

Selector {
    /* CSS 代码 */
}

在这里，我们需要在 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>Using the <i> stylesheet </i> to apply basic styles to the webpage content </h2>
   <div class = "first"> Hello! How are you? </div>
   <div class = "second"> Welcome to the TutorialsPoint! </div>
</body>
</html>

示例 2(动画和过渡)

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

此外，我们还为动画添加了"弹跳"关键帧。在"弹跳"关键帧中，我们更改元素的水平位置，使其呈现动画效果。

<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>Using the <i> stylesheet </i> to add animation to HTML content </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> Using the <i> stylesheet </i> to make a responsive design </h2>
   <div class = "parent">
      <div class = "child">
      </div>
   </div>
</body>
</html>

示例 4(布局控制)

在下面的示例中，我们演示了如何通过样式表控制 HTML 元素的布局。这里，我们有一个"容器"div 元素，其宽度占屏幕总宽度的 80%。此外，我们还使用了 CSS 属性"display: flex"。

对于"block1"元素，我们使用了 CSS 属性"flex: 1";对于"block2"元素，我们使用了 CSS 属性"flex: 2"。在这里，用户可以观察到 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> Using the <i> stylesheet </i> to make responsive design </h2>
   <div class = "container">
      <div class = "block1"> </div>
      <div class = "block2"> </div>
   </div>
</body>
</html>

用户了解了将样式表与 HTML 结合使用的好处。我们可以更好地呈现 HTML 内容，而这仅使用常规 HTML 是无法实现的。此外，使用样式表还可以使网页更具吸引力。