Lorsque vous intégrez un élément dans votre HTML, vous avez deux possibilités pour y ajouter des styles CSS:
- Vous pouvez styliser le
IFRAME
lui-même. - Vous pouvez styliser la page à l'intérieur du
IFRAME
(sous certaines conditions).
Utiliser CSS pour styliser l'élément IFRAME
La première chose que vous devriez considérer lors du style de vos iframes est le.
IFRAME
- lui-même. Alors que la plupart des navigateurs incluent des iframes sans beaucoup de styles supplémentaires, c'est toujours une bonne idée d'ajouter des styles pour les garder cohérents. Voici quelques styles CSS que nous incluons toujours sur iframes:
marge: 0 ;
remplissage: 0 ;
bordure: aucune ;
largeur: valeur;
la taille: valeur;
Avec le.
largeur
et.
la taille
mis à la taille qui s'adapte à mon document. Voici des exemples d'un cadre sans styles et un avec juste les bases stylisées. Comme vous pouvez le voir, ces styles suppriment principalement la bordure autour de l'iframe, mais ils garantissent également que tous les navigateurs affichent cet iframe avec les mêmes marges, remplissage et dimensions.
HTML5 vous recommande d'utiliser le.débordement
propriété pour supprimer les barres de défilement dans un boîte de défilement, mais ce n'est pas fiable. Donc, si vous souhaitez supprimer ou modifier les barres de défilement, vous devez utiliser le fichier.
défilement
attribut sur votre iframe ainsi. Pour utiliser le.
défilement
attribut, ajoutez-le comme n'importe quel autre attribut, puis choisissez l'une des trois valeurs:
Oui
,
non
, ou alors.
auto
.
Oui
indique au navigateur de toujours inclure des barres de défilement même si elles ne sont pas nécessaires.
non
dit de supprimer toutes les barres de défilement, que ce soit nécessaire ou non.
auto
est la valeur par défaut et inclut les barres de défilement lorsqu'elles sont nécessaires et les supprime lorsqu'elles ne le sont pas. Voici comment désactiver le défilement avec le.
défilement
attribut: scrolling="no">
Il s'agit d'un iframe.
Pour désactiver le défilement en HTML5, vous êtes censé utiliser le fichier.
débordement
propriété. Mais comme vous pouvez le voir dans ces exemples, cela ne fonctionne pas encore de manière fiable dans tous les navigateurs. Voici comment activer le défilement tout le temps avec le.
débordement
propriété: style="overflow: scroll;">
Il s'agit d'un iframe.
Il y a certainement pas pour désactiver complètement le défilement avec le.
débordement
propriété. De nombreux concepteurs souhaitent que leurs iframes se fondent dans l'arrière-plan de la page sur laquelle ils se trouvent afin que les lecteurs ne sachent même pas que les iframes sont là. Mais vous pouvez également ajouter des styles pour les faire ressortir. Ajuster les bordures pour que l'iframe apparaisse plus facilement est facile. Utilisez simplement le.
frontière
propriété de style (ou elle est liée.
bordure-haut
,
frontière-droite
,
frontière-gauche
, et.
Bordure du bas
properties) pour styliser les bordures: iframe {
border-top: #c00 1px pointillé ;
bordure droite: #c00 2px pointillé ;
bordure gauche: #c00 2px pointillé ;
border-bottom: #c00 4px pointillé ;
}
Mais vous ne devriez pas vous arrêter avec le défilement et les bordures pour vos styles. Vous pouvez appliquer de nombreux autres styles CSS à votre iframe. Cet exemple utilise des styles CSS3 pour donner à l'iframe une ombre, des coins arrondis et une rotation de 20 degrés.
iframe {
marge supérieure: 20 px ;
marge inférieure: 30 px ;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px ;
rayon de bordure: 12 px ;
-moz-box-shadow: 4px 4px 14px #000 ;
-webkit-box-shadow: 4px 4px 14px #000 ;
box-shadow: 4px 4px 14px #000 ;
-moz-transform: faire pivoter (20 degrés);
-webkit-transform: rotation (20 degrés);
-o-transformer: faire pivoter (20 degrés);
-ms-transform: rotation (20 degrés);
filtre: progid: DXImageTransform. Microsoft. BasicImage (rotation=.2) ;
}
Styliser le contenu de l'Iframe
Le style du contenu d'un iframe est comme le style de n'importe quelle autre page Web. Mais toi doit avoir accès pour modifier la page. Si vous ne pouvez pas modifier la page (par exemple, elle se trouve sur un autre site).
Si vous pouvez modifier la page, vous pouvez ajouter une feuille de style externe ou des styles directement dans le document, comme vous le feriez pour n'importe quelle autre page Web de votre site.