Maison > Article > interface Web > Comment appliquer CSS à iframe ?
Comment appliquer CSS à iframe ?
- WBOYavant
- 2023-08-27 09:53:021066parcourir
Utilisez la balise HTML
Nous pouvons facilement appliquer du CSS aux iframes, mais regardons d'abord les propriétés de
src - Cet attribut est utilisé pour donner le nom du fichier qui doit être chargé dans le cadre. Sa valeur peut être n'importe quelle URL.
name - Cette propriété vous permet de spécifier un nom pour le cadre. Il est utilisé pour indiquer dans quel cadre le document doit être chargé.
marginheight - Cette propriété vous permet de spécifier la hauteur de l'espace entre le haut et le bas de la bordure du cadre et son contenu. La valeur est donnée en pixels.
height - Cette propriété spécifie la hauteur de
scrolling - Cette propriété contrôle l'apparence des barres de défilement qui apparaissent sur le cadre. La valeur peut être « oui », « non » ou « auto ».
longdesc - Cet attribut vous permet de fournir un lien vers une autre page contenant une description détaillée du contenu du cadre.
width - Cette propriété spécifie la largeur de
Appliquons maintenant CSS à l'iframe.
Appliquer le CSS en ligne à l'iframe
L'attribut style est utilisé pour définir le CSS en ligne. Nous définissons les bordures, la largeur et la hauteur -
<iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks">
Exemple
Voyons un exemple -
<!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>
Appliquer le CSS interne à l'iframe
La balisestyle est utilisée pour définir le CSS interne de l'iframe. Nous avons stylisé l'iFrame avec de nouvelles bordures, largeur et hauteur -
iframe {
border: 3px solid green;
width: 500px;
height: 400px;
}
Exemple
Voyons un exemple -
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!