如何將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。

  • 我們使用帶有HTML iframe標籤的style屬性來應用內聯CSS。
  • 我們使用CSS border屬性添加了2px的實線邊框,並使用CSS heightwidth屬性設定了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。

更新於:2024年9月12日

8K+ 瀏覽量

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.