数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法学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;
}
示例
让我们来看一个示例 −
<!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;
}
示例
让我们来看一个示例 −
<!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>
用于设置元素可见性的内嵌样式表
在此示例中，我们使用可见性属性为元素的可见性设置样式。我们使用可见值显示元素 −
h1 {
visibility: visible;
}
我们使用 hidden 值隐藏元素 −
p {
visibility: hidden;
}
示例
让我们来看一个示例 −
<!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+ 浏览
广告