Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

DIV und SPANs

Über die 2 Elemente DIV und SPAN kann CSS erst seine volle Pracht entfalten. DIV steht für das englische "division" in der Bedeutung "Bereich" und ist ein allgemeines Block-Element. Lustigerweise hat SPAN im englischen auch die Bedeutung von "Bereich", ist aber ein Inline-Element.

Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Und ü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 den 2 Elementen ist. DIV ist ein Blockelement. Nach einem DIV erfolgt nach der Definition ein neuer Block. SPAN dagegen kann innerhalb eines Bereiches angewendet werden. 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

Steuerung
Inhalt

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.

ein wie vom Textmarker hervorgehobener Text und dann geht es 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

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

X

Wenn Sie einen Fehler finden, bitte mitteilen
(egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Name/E-Mail (damit ich auch Danke sagen kann)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2015 Axel Pratzner • www.html-seminar.de • Stand 18.8.2015
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de