CSS 代表层叠样式表。 HTML用于创建网页，在网页中添加文本、图像、视频等。之后，我们需要设置文本和图像的样式，这只能使用 CSS 来完成。基本上，我们可以使用CSS向HTML元素添加背景、颜色、尺寸、方向等样式。
有三种方法可以为网页添加样式。第一种是内联样式，直接将样式添加到HTML元素中。第二种是嵌入式样式表，在“html”文件中使用标签添加样式。外部CSS文件是第三种为网页添加样式的方法。
语法
用户可以按照以下语法将嵌入样式表添加到 HTML 网页。
/* add CSS here */
用户可以在上述语法中的标签之间添加CSS。
立即学习“前端免费学习笔记（深入）”；
Example 1
的中文翻译为：
示例1
在下面的示例中，我们有一个带有“container”类的 div 元素。我们在 div 元素内添加了两个
元素。此外，我们还在
元素内添加了文本内容。
在
部分，我们添加了标签。在 标签内，我们添加了容器 div 元素的 CSS。此外，我们还使用了“nth-child()”CSS 函数来对两个
元素设置不同的样式。
.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; } Embedding the Styles to the HTML document
This is a paragraph.
This is another paragraph.
Example 2 的中文翻译为：
示例2
在下面的示例中，我们添加了 div 元素的悬停效果。
首先，我们创建了“容器”div 元素，并添加了三个 div 元素作为其子元素。此外，我们为每个 div 元素赋予了不同的背景颜色。当用户将鼠标悬停在 div 元素上时，每个 div 元素的颜色都会发生变化。
.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; } Embedding the Style sheet to the HTML document
Div 1 Div 2 Div 3
示例 3
我们已将下面示例中的样式表嵌入到 HTML 文件中。我们使用 CSS 创建了圆圈。此外，我们还向圆圈添加了动画。
我们已经创建了“larger”关键帧，通过50%改变圆的尺寸以及背景颜色，用户可以在输出中观察到。
.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; } } Embedding the Style sheet to the HTML document
用户学会了在 CSS 中嵌入样式表。用户需要在 标签之间添加 CSS，将 CSS 嵌入到整个网页的 HTML 文件中，而不是使用外部 CSS 文件。不过，不建议在实时开发中使用嵌入式CSS，因为它会使代码变得更加复杂。
以上就是CSS 中嵌入样式表的使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626026.html
微信扫一扫 
支付宝扫一扫 
