极客教程在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>
用户学会了如何在CSS中嵌入样式表。用户只需在 HTML 文件中的 <style> 标签之间添加 CSS，即可嵌入整个网页的 CSS，而无需使用外部 CSS 文件。然而，在实时开发中使用嵌入式 CSS 不是建议的做法，因为它会使代码更加复杂。