极客笔记CSS 使用嵌入式样式表的用途
CSS代表层叠样式表。HTML用于创建网页，可以在网页中添加文本、图片、视频等内容。之后，我们需要对文本和图片进行样式设置，这可以使用CSS来实现。基本上，我们可以使用CSS向HTML元素添加诸如背景、颜色、尺寸、方向等样式。
有三种方法可以为网页添加样式。第一种是内联样式，直接在HTML元素中添加样式。第二种是嵌入式样式表，将样式添加到HTML文件中的<style>标签中。第三种是外部CSS文件，用于为网页添加样式。
语法
用户可以按照下面的语法将嵌入式样式表添加到HTML网页中。
<style>
/* add CSS here */
</style>
用户可以在上述语法中的<style>标签之间添加CSS。
示例1
在下面的示例中，我们有一个带有‘container’类的div元素。我们在div元素内添加了两个<p>元素。此外，我们还在<p>元素内添加了文本内容。
在<head>部分，我们添加了<style>标签。在<style>标签内，我们为容器div元素添加了CSS。同时，我们使用了‘nth-child()’CSS函数来为两个<p>元素设置不同的样式。
<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>
示例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> 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中。用户需要在<style>标签之间添加CSS代码，将CSS嵌入到整个网页的HTML文件中，而不是使用外部的CSS文件。然而，在实时开发中使用嵌入的CSS并不推荐，因为它会让代码变得更加复杂。