如何将CSS应用于iframe？

百变鹏仔 3个月前 (09-22) #HTML

文章标签应用于

使用 HTML 标签定义内联框架。标记与标记没有某种关系，相反，它可以出现在文档中的任何位置。标签定义文档内的矩形区域，浏览器可以在其中显示单独的文档，包括滚动条和边框。 src 属性用于指定占据内联框架的文档的 URL。

我们可以轻松地将 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？

将内联 CSS 应用到 iframe

示例

将内部 CSS 应用到 iframe

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8