資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽
廣告