CSS 中内嵌或内部样式表

可以通过在 <style> 标签中声明，将 CSS 文件内嵌添加。这将缩短网页的加载时间。尽管内嵌 CSS 声明允许动态样式，但应在每次页面请求时下载该声明，因为内嵌 CSS 无法缓存。内嵌 CSS 在 <head> 标签内的 <style> 标签中声明。

语法

内嵌 CSS 文件的语法如下 −

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

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

用于设置 div 样式的内嵌样式表

我们使用 <style> 设置内嵌样式表，并应用到我们的 div −

div {
   float: left;
   margin-left: 20px;
   width: 30px;
   height: 30px;
   background-color: lightgreen;
   box-shadow: 8px 5px 0 2px lightcoral;
}

示例

让我们来看一个示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         float: left;
         margin-left: 20px;
         width: 30px;
         height: 30px;
         background-color: lightgreen;
         box-shadow: 8px 5px 0 2px lightcoral;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div></div>
</body>
</html>

用于设置 div 样式的内嵌样式表

我们使用 <style> 设置内嵌样式表，并一次应用到多个 div −

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;
}

示例

让我们来看一个示例 −

Open Compiler
<!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>
   <h1>Demo Heading</h1>
   <div></div>
   <div></div>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

用于设置元素可见性的内嵌样式表

在此示例中，我们使用可见性属性为元素的可见性设置样式。我们使用可见值显示元素 −

h1 {
   visibility: visible;
}

我们使用 hidden 值隐藏元素 −

p {
   visibility: hidden;
}

示例

让我们来看一个示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         visibility: visible;
      }
      p {
         visibility: hidden;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is set hidden</p>
</body>
</html>

更新于:2023 年 11 月 1 日

1000+ 浏览

开启 职业生涯

完成课程即可获得认证

开始
广告