Wie wende ich CSS auf iframe an?-HTML-Tutorial-php.cn

Wie wende ich CSS auf iframe an?

Verwenden Sie den HTML-Tag, um Inline-Frames zu definieren. Das <iframe>-Tag hat nichts mit dem <frameset>-Tag zu tun, sondern kann an einer beliebigen Stelle im Dokument erscheinen. <iframe> Tags definieren rechteckige Bereiche innerhalb eines Dokuments, innerhalb derer ein Browser einzelne Dokumente anzeigen kann, einschließlich Bildlaufleisten und Rändern. Das src-Attribut gibt die URL des Dokuments an, das den Inline-Frame einnimmt.

Wir können CSS problemlos auf Iframes anwenden, aber schauen wir uns zunächst die Eigenschaften von-

src– Dieses Attribut wird verwendet, um den Dateinamen anzugeben, der in den Frame geladen werden soll. Sein Wert kann eine beliebige URL sein.
name– Mit dieser Eigenschaft können Sie einen Namen für den Frame angeben. Es wird verwendet, um anzugeben, in welchen Frame das Dokument geladen werden soll.
marginheight– Mit dieser Eigenschaft können Sie die Höhe des Abstands zwischen der Ober- und Unterseite des Rahmenrands und seines Inhalts angeben. Der Wert wird in Pixel angegeben.
height– Diese Eigenschaft gibt die Höhe vonan.
scrolling– Diese Eigenschaft steuert das Erscheinungsbild der Bildlaufleisten, die im Rahmen angezeigt werden. Der Wert kann „ja“, „nein“ oder „auto“ sein.
longdesc– Mit diesem Attribut können Sie einen Link zu einer anderen Seite bereitstellen, der eine detaillierte Beschreibung des Frame-Inhalts enthält.
width– Diese Eigenschaft gibt die Breite vonan.

Jetzt wenden wir CSS auf den Iframe an.

Inline-CSS auf Iframe anwenden

Das Style-Attribut wird zum Festlegen von Inline-CSS verwendet. Wir legen die Ränder, Breite und Höhe fest -

</pre>
        <div class="contentsignin">
         Nach dem Login kopieren
        </div>
       </div>
       <h3>Beispiel</h3>
       <p>Sehen wir uns ein Beispiel an -</p>
       <lt-highlighter contenteditable="false" style="display: none;">
        <lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 654px !important; height: 293.25px !important; transform: none !important; transform-origin: 327px 146.625px !important; zoom: 1 !important;">
         <lt-div class="lt-highlighter__scroll-element" style="top: 0px !important; left: 0px !important; width: 654px !important; height: 293px !important;"></lt-div>
        </lt-div>
       </lt-highlighter>
       <div class="code" style="position:relative; padding:0px; margin:0px;">
        <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <head> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</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">

Nach dem Login kopieren

Internes CSS auf Iframe anwenden

Das

style-Tag wird verwendet, um das interne CSS des Iframes festzulegen. Wir haben den iFrame mit neuen Rändern, Breiten und Höhen gestaltet -

iframe { border: 3px solid green; width: 500px; height: 400px; }

Nach dem Login kopieren

Beispiel

Sehen wir uns ein Beispiel an -

    
  Courses

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie wende ich CSS auf iframe an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!