Un iframe es la forma abreviada de marco en línea . Al usar la etiqueta iframe , puede mostrar el contenido de otra página web en un documento de página HTML en una estructura de forma rectangular. El contenido de la página web puede ser cualquier video, otro sitio web, cualquier imagen, etc. Este iframe también tiene barras de desplazamiento y bordes para una buena apariencia del documento.
Sintaxis:
<iframe src="URL"></iframe>
Consulte: Para una mejor comprensión, consulte el artículo HTML | marcos flotantes
Enfoque 1: existen varias técnicas para aplicar la propiedad CSS a un iframe, como se indica a continuación.
Podemos usar CSS en línea para el iframe usando CSS dentro de la etiqueta del iframe .
<iframe src=”www.geeksforgeeks.org” style=”borde: 3px punteado; ancho: 300px; altura: 300px;”> </iframe>
Ejemplo: El diseño de la página HTML se implementa de la siguiente manera.
<!DOCTYPE html> <html> <head> <title> How to apply CSS property to an iframe? </title> </head> <body style="margin:0px;"> <table style="width:100%; border-collapse:collapse; font:14px Arial, sans-serif;"> <tr> <td colspan="2" style="padding:10px; background-color:#16641a;"> <h1 style="font-size:24px; color:#fbfffb;"> Welcome to GeeksforGeeks </h1> </td> </tr> <tr style="height:300px;"> <td style="padding:20px; background-color:#5c9b37; vertical-align:top;"> <h2>Way to gain knowledge</h2> <ul style="list-style:none; padding:0px; line-height:24px;"> <li style="color:#ffffff;"> Learn</li><br> <li style="color:#ffffff;"> Practice </li><br> <li style="color:#ffffff;"> Apply to real world </li> </ul> </td> </tr> <tr> <td colspan="2" style="padding:5px; background-color:#2b2a2a; text-align:center;"> <p style="color:#ffffff;"> copyright © geeksforgeeks, Some rights reserved </p> </td> </tr> </table> </body> </html>
Ejemplo: en el siguiente ejemplo, el tamaño del iframe es de «300 px» tanto para el ancho como para el alto y el grosor del borde es de «3 px» y el estilo punteado .
<!DOCTYPE html> <html> <head> <h4 style="color:#006400; font-size:24px;"> Apply CSS to iframe </h4> </head> <body> <!--inline CSS in iframe tag--> <iframe style="border: 3px dotted; width: 300px; height: 300px;" src="iframe page.html" id="Iframe"> </iframe> </body> </html>
Producción:
Enfoque 2: puede usar el CSS interno para la etiqueta iframe dentro del archivo HTML.
<style>
#frame {
border: 3px dotted;
width: 300px;
height: 300px;
}
</style>
<iframe src="www.geeksforgeeks.org"
id="frame">
</iframe>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS iframe
</title>
</head>
<head>
<style>
#Iframe {
border: 3px dotted;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h4 style="color:#006400;
font-size:24px;">
Apply CSS to ifram
</h4>
<iframe src="iframe page.html"
id="Iframe">
</iframe>
<!-- iframe tag-->
</body>
</html>
Producción:
Enfoque 3: puede usar CSS externo para el iframe , que está haciendo uso de un archivo CSS externo. Cree un archivo diferente para el código CSS e inclúyalo en el archivo HTML usando el enlace y la etiqueta href antes de la etiqueta iframe .
CSS file: (name of the file iframeCss.css )
#frame {
border: 3px dotted;
width: 300px;
height: 300px;
}
HTML file: <link rel="stylesheet" type="text/css" href="iframeCss.css"> <iframe src="www.geeksforgeeks.org" id="frame"> </iframe>
Ejemplo :
<!DOCTYPE html>
<html>
<head>
<title>
CSS iframe
</title>
<link type="text/css"
rel="Stylesheet"
href="iframeCss.css" />
<style>
#Iframe {
border: 3px dotted;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!--external CSS link-->
<h4 style="color:#006400;
font-size:24px;">
Apply CSS to iframe
</h4>
<iframe src="iframe page.html"
id="Iframe">
</iframe>
<!--iframe tag-->
</body>
</html>
Producción:
Enfoque 4: en este enfoque, se usa código JavaScript para agregar el enlace del archivo CSS en el encabezado del documento HTML. Se utilizan los métodos:
- document.createElement(): este método crea un elemento HTML para definir el nombre del elemento.
var g = document.createElement('link'); - document.appendChild(): este método agrega cualquier valor o cualquier Node en la etiqueta especificada como valor secundario.
var g = document.createElement('link'); document.head.appendChild(g)g es un elemento secundario, que se agrega a la etiqueta principal mediante el método appendChild() .
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#Iframe {
border: 3px dotted;
width: 300px;
height: 300px;
}
</style>
<script>
window.onload = function () {
// Create a link Element
// for the css file
var link =
document.createElement("link");
// Set the attributes
// for link element
link.href = "iframeCss.css";
link.rel = "stylesheet";
link.type = "text/css";
// Set the link element at the
// 'head' of HTML document
document.head.appendChild(link);
}
</script>
</head>
<body>
<h4 style="color:#006400;
font-size:24px;">
Apply CSS to iframe
</h4>
<iframe src="iframe page.html"
id="iframe1">
</iframe>
<!--iframe tag-->
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SoumikMondal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA