CSS 代表層疊樣式表。 HTML用于創建網頁，在網頁中添加文本、圖像、視頻等。之后，我們需要設置文本和圖像的樣式，這只能使用 CSS 來完成。基本上，我們可以使用CSS向HTML元素添加背景、顏色、尺寸、方向等樣式。
有三種方法可以為網頁添加樣式。第一種是內聯樣式，直接將樣式添加到HTML元素中。第二種是嵌入式樣式表，在“html”文件中使用標簽添加樣式。外部CSS文件是第三種為網頁添加樣式的方法。
語法
用戶可以按照以下語法將嵌入樣式表添加到 HTML 網頁。
<style> /* add CSS here */ </style>
登錄后復制
用戶可以在上述語法中的<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 中嵌入樣式表的使用的詳細內容，更多請關注www.92cms.cn其它相關文章！
