介绍
在网页中，<iframe>元素可以嵌入其他网页或文档。这使得网页可以在一个框架中显示，而另一个框架中显示不同的内容。但是，样式和布局可能与主要网页不同。因此，为了使<iframe>与主网页保持一致，您需要将CSS应用于<iframe>元素。
如何将CSS应用于iframe
1. 使用CSS选择器
您可以使用CSS选择器来选择<iframe>元素，然后将样式应用于它。以下是一个例子：
iframe {
width: 100%;
height: 400px;
border: none;
background-color: #f1f1f1;
}
在上面的例子中，<iframe>元素的宽度设置为100%，高度为400像素，没有边框，并且背景颜色设置为#f1f1f1。
您还可以使用类选择器或ID选择器来选择<iframe>元素，例如：
.my-iframe {
width: 100%;
height: 400px;
border: none;
background-color: #f1f1f1;
}
#my-iframe {
width: 100%;
height: 400px;
border: none;
background-color: #f1f1f1;
}
在上面的例子中，<iframe>元素具有类“my-iframe”或ID“my-iframe”，并具有与先前示例相同的样式。
2. 使用内联样式
如果您只需要为一个<iframe>元素应用样式，那么使用内联样式可能更方便。以下是一个例子：
<iframe src="http://example.com"
style="width: 100%; height: 400px; border: none; background-color: #f1f1f1;">
</iframe>
在上面的例子中，将“style”属性添加到<iframe>元素中，并添加样式规则。
3. 使用父级元素的样式
您还可以通过将样式应用于包含<iframe>元素的父级元素来影响<iframe>的外观和布局。以下是一个例子：
#parent-element {
width: 100%;
height: 400px;
}
#parent-element iframe {
width: 100%;
height: 100%;
border: none;
background-color: #f1f1f1;
}
在上一个例子中，将样式应用到父级元素“parent-element”，用于设置其宽度和高度。使用“#parent-element iframe”选择器，将样式应用于<iframe>元素。通过设置宽度和高度为100％，使此元素充满其父级元素，并删除边框，设置背景颜色。
结论
通过使用CSS选择器、内联样式或将样式应用于父级元素，您可以轻松地将CSS样式应用于<iframe>元素。