如何将 CSS 应用于 iframe?

使用 HTML 标签 <iframe> 定义内联框架。<iframe> 标签与 <frameset> 标签没有任何关联，它可以出现在文档中的任何位置。<iframe> 标签在文档内定义一个矩形区域，浏览器可以在该区域显示单独的文档，包括滚动条和边框。src 属性用于指定占用内联框架的文档的 URL。

我们可以轻松地将 CSS 应用于 iframe，但首先让我们看一下 <iframe> 的属性 -

• src - 此属性用于指定应在框架中加载的文件名。其值可以是任何 URL。

• name - 此属性允许您为框架命名。它用于指示文档应加载到哪个框架中。

• marginheight − 此属性允许您指定框架边框顶部和底部与其内容之间的空间高度。该值以像素为单位。

• height − 此属性指定 <iframe> 的高度。

• scrolling − 此属性控制框架上显示的滚动条的外观。其取值为"yes"、"no"或"auto"。

• longdesc − 此属性允许您提供指向另一个页面的链接，该页面包含框架内容的详细描述。

• width − 此属性指定 <iframe> 的宽度。

现在让我们将 CSS 应用于 iframe。

将内联 CSS 应用于 iframe

style 属性用于设置内联 CSS。我们设置了边框、宽度和高度 −

<iframe style="border: 2px solid gray;
width: 500px; height: 400px;" src="https://www.cainiaomax.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.cainiaomax.com/market/index.asp"
      id="Ebooks">
   </iframe>
</body>
</html> 


将内部 CSS 应用于 iframe
style 标签用于将内部 CSS 应用于 iframe。我们已将 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.cainiaomax.com/market/index.asp" id="Ebooks">
   </iframe>
</body>
</html> 





相关文章


HTML DOM 输入按钮对象

HTML 画布 shadowBlur 属性

HTML DOM address 对象

HTML 画布 shadowColor 属性

使用 onmouseover 属性更改网页背景颜色

HTML 画布 fillStyle 属性

HTML frame 框架标签

HTML Canvas clearRect() 方法

HTML body 标签

HTML optgroup 标签
 



有用资源

html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/





 打印
下一节:如何设置表格的水平标题? ❯❮ 上一节:如何使用表格在 HTML 中构建表单结构?