CSS 中嵌入样式表的使用

百变鹏仔 4周前 (09-19) #CSS

文章标签样式表

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

有三种方法可以为网页添加样式。第一种是内联样式，直接将样式添加到HTML元素中。第二种是嵌入式样式表，在“html”文件中使用标签添加样式。外部CSS文件是第三种为网页添加样式的方法。

语法

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

<style>   /* add CSS here */</style>

用户可以在上述语法中的标签之间添加CSS。

立即学习“前端免费学习笔记（深入）”；

Example 1

的中文翻译为：

示例1

在下面的示例中，我们有一个带有“container”类的 div 元素。我们在 div 元素内添加了两个

元素。此外，我们还在

元素内添加了文本内容。

在部分，我们添加了标签。在标签内，我们添加了容器 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> 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>

Example 2

的中文翻译为：

示例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 创建了圆圈。此外，我们还向圆圈添加了动画。

我们已经创建了“larger”关键帧，通过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 中嵌入样式表。用户需要在标签之间添加 CSS，将 CSS 嵌入到整个网页的 HTML 文件中，而不是使用外部 CSS 文件。不过，不建议在实时开发中使用嵌入式CSS，因为它会使代码变得更加复杂。

文章推荐

CSS 中嵌入样式表的使用

语法

Example 1

示例1

Example 2

示例2

示例 3

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写