首頁 > web前端 > html教學 > 如何將CSS應用於iframe?

如何將CSS應用於iframe?

WBOY
發布: 2023-08-27 09:53:02
轉載
1175 人瀏覽過

如何將CSS應用於iframe?

使用 HTML 標籤

我們可以輕鬆地將 CSS 應用於 iframe,但讓我們先看看

  • src - 此屬性用於給出應在框架中載入的檔案名稱。它的值可以是任何 URL。

  • name - 此屬性允許您為框架指定名稱。它用於指示文檔應該載入到哪個框架。

  • marginheight - 此屬性可讓您指定框架邊框及其內容的頂部和底部之間的空間高度。該值以像素為單位給出。

  • height - 此屬性指定

  • scrolling - 此屬性控制框架上出現的捲軸的外觀。該值可以是“yes”、“no”或“auto”。

  • longdesc - 此屬性允許您提供指向另一個頁面的鏈接,其中包含框架內容的詳細描述。

  • width - 此屬性指定

現在讓我們將 CSS 應用到 iframe。

將內嵌 CSS 應用到 iframe

style屬性用於設定內聯css。我們設定了邊框、寬度和高度 -

<iframe style="border: 2px solid gray;
   width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp"
id="Ebooks"> 
登入後複製

範例

讓我們看一下例子 -

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h1>Courses</h1>
   <iframe style="border: 2px solid gray;
      width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp"
      id="Ebooks">
   </iframe>
</body>
</html> 
登入後複製

將內部 CSS 應用到 iframe

style標籤用來設定iframe的內部css。我們已將 iFrame 樣式設定為新的邊框、寬度和高度 -

iframe {
   border: 3px solid green;
   width: 500px;
   height: 400px;
} 
登入後複製

範例

讓我們來看一個例子 -

<!DOCTYPE html>
<html>
<head>
   <style>
      iframe {
         border: 3px solid green;
         width: 500px;
         height: 400px;
      }
   </style>
</head>
<body>
   <h1>Courses</h1>
   <iframe src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks">
   </iframe>
</body>
</html> 
登入後複製

以上是如何將CSS應用於iframe?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板