DIV und SPANs
Die zwei HTML-Befehle <div>
und <span>
werden erst durch CSS extrem nützlich. Der HTML-Befehl <div>
steht für das englische „division“ in der Bedeutung „Bereich“ und ist ein Block-Element (zur Erinnerung – Block-Elemente nutzen die komplette Browserfensterbreite). Lustigerweise hat der HTML-Befehl <span>
im englischen auch die Bedeutung von „Bereich“, ist aber ein Inline-Element.
Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Über die Attribute der Elemente, kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden.
Wichtig ist zu verstehen, was der Unterschied zwischen DIV und SPAN ist:
- DIV ist ein Block-Element. Ein DIV nimmt die komplette Breite ein, sofern nichts anderes in CSS umdefiniert wurde.
- SPAN dagegen kann innerhalb eines Bereiches angewendet werden – SPAN ist ein Inline-Element.
Im folgenden Beispiel wird der Unterschied deutlicher.
Der CSS-Befehl background-color:farbe;
bewirkt, dass der Hintergrund des Elements eingefärbt wird.
DIV - Einsatz
Zwei Bereiche (z. B. die Steuerung und der Inhalt) werden platziert.
<div style="background-color:red;">
Steuerung
</div>
<div style="background-color:lawngreen;">
Inhalt
</div>
Durch die Verwendung von DIV geht das nächste Element in der nächsten Zeile weiter - wie eine Platzierung nebeneinander erfolgen kann, kommt in einem späteren Kapitel
SPAN - Anwendung (nicht SPAM!)
Innerhalb eines Textes wird z. B. eine Hervorhebung ausgezeichnet. Als Beispiel wird in diesem Text ein Teil wie vom Textmarker hervorgehoben und dann geht es normal weiter.
ein <span style="background-color:yellow;">wie vom Textmarker
hervorgehobener</span> Text und dann geht es normal weiter
Innerhalb der Zeile geht es nach dem SPAN-Element ganz normal weiter.
Mischen von DIVs und SPANs
Die Elemente können ineinander geschachtelt werden (egal ob SPAN oder DIV).
Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.
ein
<span style="background-color:yellow;">
wie vom
<span style="color:red;">
Textmarker
</span>
hervorgehobener
</span>
Text und dann geht es normal weiter
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details