資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時尚研究
法律研究在 HTML 文件中包含 CSS
將 CSS 新增到 HTML 文件可 улучшить внешний вид своей網頁。可以輕鬆新增影像、邊框、邊距、顏色的各種樣式。要將 CSS 包含在 HTML 文件中，我們可以將它們內部包含、內聯包含或連結到外部檔案。讓我們透過示例來理解它們。
語法
在 HTML 中包含 CSS 檔案的語法如下所示 −
/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>
以下示例顯示了在 HTML 文件中連結 CSS 檔案 −
內聯 CSS
使用內聯 CSS，使用樣式屬性並設定 CSS 樣式；
示例
<!DOCTYPE html> <html> <body> <p style="font-family: Forte;">Demo text</p> <p style="background-color: lightblue;">This is Demo text</p> <img src="https://tutorialspoint.tw/memcached/images/memcached.jpg" style="border: 3px groove orange;"> </body> </html>
內部連結
對於內部連結，使用 <style> 元素。在此元素下，指定 CSS 樣式 −
<style> <!-- Add the styles --> </style>
示例
我們來看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 15px;
width: 33%;
border: 2px solid;
border-radius: 5%;
}
div > div {
border-color: transparent;
box-shadow: inset 0 0 6px red;
}
div > div > div {
border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
外部連結
在網頁上，你還可以包含一個外部 css 檔案，並放置 css 樣式。可以透過 HTML 檔案引用相同的 CSS 檔案，如下面的示例所示。<link> 元素用於連結外部檔案 style.css −
<link rel="stylesheet" type="text/css" href="style.css">
示例
我們來看一下示例 −
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Demo text</p> <p>Demo text again</p> </body> </html>
以下是外部 style.css 檔案 −
p {
text-decoration: overline;
text-transform: capitalize;
}
更新於： 21-12-2023
129 次瀏覽
廣告