Maison > interface Web > tutoriel HTML > le corps du texte

Comment appliquer CSS à iframe ?

WBOY
Libérer: 2023-08-27 09:53:02
avant
1128 Les gens l'ont consulté

Comment appliquer CSS à iframe ?

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"> 
Copier après la connexion

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> 
Copier après la connexion

Appliquer le CSS interne à l'iframe

La balise

style 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;
} 
Copier après la connexion

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> 
Copier après la connexion

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal