如何將CSS應用於iframe?
將CSS應用於iframe是一個非常簡單的過程。我們可以使用所有三種新增CSS的方法來將CSS新增到任何文件中。我們將瞭解三種將CSS應用於iframe的方法,分別是使用內聯CSS、內部CSS和外部CSS。
在這篇文章中,我們有一個iframe,我們的任務是將CSS應用於iframe。我們將逐步解釋並提供示例程式碼來了解每種方法。
將CSS應用於iframe的方法
以下是我們將在這篇文章中討論的將CSS應用於iframe的方法,並附帶逐步說明和完整的示例程式碼。
將內聯CSS應用於iframe
為了將CSS應用於iframe,我們使用了簡單的style屬性來將內聯CSS應用於iframe。
示例
這是一個完整的示例程式碼,演示了上述步驟,使用**內聯CSS**將CSS應用於iframe。
<!DOCTYPE html>
<html>
<head>
<title>
To apply CSS to iframe
</title>
</head>
<body>
<h3>
Applying CSS to iframe
</h3>
<p>
In this example we have used <strong>inline
CSS</strong> to apply CSS to iframe.
</p>
<iframe style="border: 2px solid #031926;
width: 500px; height: 300px;"
src="/market/index.asp">
</iframe>
</body>
</html>
將內部CSS應用於iframe
在這種將CSS應用於iframe的方法中,我們使用了style標籤,它將內部CSS應用於iframe。
- 我們使用了**style**標籤來使用內部CSS,然後使用**iframe**作為元素選擇器來選擇iframe。
- 然後,我們使用CSS border屬性添加了2px的實線邊框,並使用CSS height和width屬性設定了iframe的尺寸。
示例
這是一個完整的示例程式碼,演示了上述步驟,使用**內部CSS**將CSS應用於iframe。
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
border: 2px solid #031926;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<h3>
Applying CSS to iframe
</h3>
<p>
In this example we have used <strong>internal
CSS</strong> to apply CSS to iframe.
</p>
<iframe src="/market/index.asp">
</iframe>
</body>
</html>
將外部CSS應用於iframe
在這種方法中,我們使用了名為**styles.css**的外部CSS,它將CSS應用於iframe。
- 我們使用了名為**styles.css**的外部樣式表,將外部CSS新增到iframe。
- 然後,我們使用CSS border屬性添加了2px的實線邊框,並使用CSS height和width屬性設定了iframe的尺寸。
示例
這是一個完整的示例程式碼,演示了上述步驟,使用**外部CSS**將CSS應用於iframe。
styles.css這是我們新增到HTML文件中以將CSS應用於iframe的外部樣式表。
iframe {
border: 2px solid #031926;
width: 500px;
height: 300px;
}
index.html
這是將iframe新增到我們的HTML文件的HTML檔案。
<!DOCTYPE html>
<html>
<head>
<title>
Applying CSS to iframe
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h3>
Applying CSS to iframe
</h3>
<p>
In this example we have used <strong>external
CSS</strong> to apply CSS to iframe.
</p>
<iframe src="/market/index.asp"></iframe>
</body>
</html>
結論
在這篇文章中,我們討論瞭如何將CSS應用於iframe,並瞭解了三種不同的方法:使用**內聯**CSS、使用**內部**CSS和使用**外部**CSS。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP