Wenn Sie ein Element in Ihren HTML-Code einbetten, haben Sie zwei Möglichkeiten, CSS-Stile hinzuzufügen:
- Sie können das gestalten
IFRAME selbst.
- Sie können die Seite innerhalb von formatieren
IFRAME (unter bestimmten Bedingungen).
Verwenden von CSS zum Gestalten des IFRAME-Elements
Das erste, was Sie beim Styling Ihrer iframes beachten sollten, ist das
IFRAME
Marge: 0; Polsterung: 0; Grenze: keine; Breite: Wert ; Höhe: Wert ; Mit dem Breite
und Höhe
Stellen Sie die Größe ein, die in mein Dokument passt. Hier sind Beispiele für einen Rahmen ohne Stil und einer mit nur den Grundlagen. Wie Sie sehen, entfernen diese Stile meist nur den Rahmen um den iframe, sie stellen jedoch auch sicher, dass alle Browser diesen iframe mit den gleichen Rändern, dem gleichen Abstand und den gleichen Abmessungen anzeigen. HTML5 empfiehlt, dass Sie den Überlauf
Eigenschaft zum Entfernen der Bildlaufleisten, aber das ist nicht zuverlässig. Wenn Sie also die Bildlaufleisten entfernen oder ändern möchten, verwenden Sie die Scrollen
Attribut auch auf Ihrem iframe. Um die Scrollen
Fügen Sie das Attribut wie jedes andere Attribut hinzu und wählen Sie einen der drei folgenden Werte aus: Ja
, Nein
, oder Auto
Ja
weist den Browser an, Bildlaufleisten immer einzuschließen, auch wenn diese nicht benötigt werden. Nein
sagt, alle Bildlaufleisten zu entfernen, ob benötigt oder nicht. Auto
ist die Standardeinstellung und schließt die Bildlaufleisten ein, wenn sie benötigt werden, und entfernt sie, wenn dies nicht der Fall ist ScrollenAttribut: scrolling = "no"> Um das Scrollen in HTML5 auszuschalten, verwenden Sie das Überlauf
Eigentum. Aber wie Sie in diesen Beispielen sehen können, funktioniert es noch nicht in allen Browsern zuverlässig. So würden Sie das Blättern mit der Überlaufproperty: style = "overflow: scroll;"> Es gibt auf keinen Fall um das Scrollen vollständig mit der Überlauf
Eigentum. Viele Designer möchten, dass sich ihre iframes in den Hintergrund der Seite einfügen, auf der sie sich befinden, sodass die Leser nicht wissen, dass die iframes überhaupt vorhanden sind. Sie können aber auch Stile hinzufügen, um sie hervorzuheben. Es ist einfach, die Rahmen so anzupassen, dass der iframe leichter angezeigt wird. Verwenden Sie einfach die Rand
style-Eigenschaft (oder es ist verwandt Rand oben
, rechtsbündig
, Grenze links
, und Rand untenEigenschaften), um die Rahmen zu gestalten: iframe {Border-Top: # c00 1px gepunktet;Rahmen rechts: # c00 2px gepunktet;Rahmen links: # c00 2px gepunktet;Rahmen unten: # c00 4px gepunktet;}
Sie sollten jedoch nicht mit Bildlauf und Rahmen für Ihre Stile aufhören. Sie können viele andere CSS-Stile auf Ihren iframe anwenden. In diesem Beispiel werden CSS3-Stile verwendet, um dem Iframe einen Schatten zu geben, Ecken abzurunden und um 20 Grad zu drehen. iframe {Rand oben: 20px;Rand unten: 30px;-moz-border-radius: 12px;-webkit-border-radius: 12px;Grenzradius: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;Box-Schatten: 4px 4px 14px # 000;-Moz-Transformation: drehen (20 Grad);-webkit-transform: drehen (20deg);-o-transform: drehen (20deg);-ms-transform: drehen (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (Drehung = .2);} Das Gestalten des Inhalts eines Iframes ist genauso wie das Gestalten einer anderen Webseite. Aber du muss Zugriff auf die Seite haben . Wenn Sie die Seite nicht bearbeiten können (z. B. auf einer anderen Website). Wenn Sie die Seite bearbeiten können, können Sie ein externes Stylesheet oder Formatvorlagen direkt im Dokument hinzufügen, genau wie andere Websites auf Ihrer Website.
Dies ist ein iframe.
Dies ist ein iframe.
Gestalten des Iframe-Inhalts
