简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Comment appliquer CSS à iframe ?

WBOY
Libérer： 2023-08-27 09:53:02
avant
1112 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
Article précédent：Dans Fabric.js, lors de la création d'un canevas pour une image, le calque de canevas HTML5 disparaît au clic de la souris et Firefox cesse de répondre Article suivant：Exécuter un script en HTML lorsque le navigateur commence à fonctionner en ligne ?
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1794
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1936
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1650
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1553
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1587
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！