iframe中引用css里的style
时间: 2024-03-07 13:05:38 浏览: 16
如果你想在一个页面中定义CSS样式,然后在iframe中使用这些样式,可以在iframe中设置`<link>`标签来引用CSS文件,然后在CSS文件中定义样式。示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<iframe src="child.html"></iframe>
</body>
</html>
```
在上述代码中,我们在父页面中引用了一个名为`style.css`的CSS文件。接下来,在CSS文件中定义所需的样式:
```css
/* style.css */
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
h1 {
color: red;
}
```
在子页面中,你可以使用定义好的样式,示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子页面</title>
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
```
在上述代码中,我们使用`<link>`标签引用了父页面中定义好的CSS文件,并使用了定义好的样式。请注意,我们在`href`属性中使用了`../`来回退到父级目录,然后找到名为`style.css`的CSS文件。
希望这可以帮助你解决问题。