CSS 中的嵌入式或内部样式表

cssweb developmentfront end technology更新于 2025/1/14 15:08:17

CSS 文件可以通过在 <style> 标签中声明来实现内部嵌入。这可以减少网页的加载时间。虽然嵌入式 CSS 声明允许动态样式，但由于内部 CSS 无法缓存，因此每次页面请求时都应该下载。内部 CSS 在 <head> 标签内的 <style> 标签中声明。

语法

嵌入 CSS 文件的语法如下 −

<style>
    /*declarations*/
</style>

示例

以下示例说明了如何嵌入 CSS 文件 −

<!DOCTYPE html>
<html>
<head>
<style>
article {
   font-size: 1.3em;
   font-family: cursive;
}
div {
   float: left;
   margin-left: 20px;
   width: 30px;
   height: 30px;
   background-color: lightgreen;
   box-shadow: 8px 5px 0 2px lightcoral;
}
</style>
</head>
<body>
<article>Demo text</article>
<div></div>
<div></div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   float: left;
   margin-left: 20px;
   width: 60px;
   height: 30px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   background-color: lightgreen;
   box-shadow: inset 5px 0 lightcoral;
}
div + div {
   background-color: lightblue;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>