E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. DIV
  2. SPAN
  3. CLASS
  4. ID

DIV

DIV ist eines der wichtigsten Elemente in HTML und CSS. DIV und SPAN haben beide die gleiche Bedeutung: Bereich. Es gibt jedoch einen großen und wichtigen Unterschied. Normalerweise erstreckt sich DIV über eine ganze Zeile. Wenn man 2 DIV-Bereiche nacheinander erstellt, ist sichtbar, dass der 2. Bereich in der neuen Zeile beginnt. Durch die height- und width-Eigenschaften ist jedoch möglich den Bereichen eine Höhe zu geben und diese somit nebeneinander zu platzieren. Des Weiteren benötigen Sie noch andere Angaben. Dazu später mehr. Aus dem oberen Text kann man also schließen, dass DIV ein Block-Element ist, da es standmäßig in einer neuen Zeile beginnt. In dem Beispiel haben wir 2 DIV-Bereiche, die eine unterschiedliche Text-Farbe und einen unterschiedliche Hintergrundfarbe (dazu verwendet man die Eigenschaft "background-color" - dazu später mehr!) aufweisen:

<div style="color: #0000FF; background-color: #FF0000;">Hier steht ein Text!</div>
<div style="color: #FF0000; background-color: #0000FF;">Hier steht ein Text!</div>
Anzeigebeispiel
Anzeigebeispiel



SPAN

SPAN ist ebenfalls ein wichtiges Element in HTML und CSS. Auch wenn DIV und SPAN die gleiche Bedeutung haben, ist die Auswirkung eine andere. Den SPAN erstreckt sich nur über den Bereich, auf dem sich der Inhalt befindet. Wenn Sie z. B. einen Absatz erstellen und innerhalb des Absatzes ein SPAN-Element verwenden, erstreckt sich der "besondere" oder hervorgehobene Text nur innerhalb der gleichen Zeile (siehe Anzeigebeispiel). Wenn man bei SPAN Höhe und Breite festlegt, hat es eine ähnliche Auswirkung wie bei DIV. Doch es gibt noch einen wichtigen Unterschied. SPAN platziert sich automatisch nebeneinander. DIV platziert sich automatisch untereinander. Um DIV-Elemente nebeneinander zu bekommen, sind noch andere Angaben notwendig. Übrigens SPAN ist kein Block-Element sondern ein sogenanntes Inline-Element. Hier nun nochmal dasselbe Beispiel wie vorher, nur mit SPAN statt DIV. Als 2. Beispiel wird in einem Absatz ein SPAN-Tag verwendet und ein Teil des Textes mit anderer Farbe versorgt.

<span style="color: #0000FF; background-color: #FF0000;">Hier steht ein Text!</span>
<span style="color: #FF0000; background-color: #0000FF;">Hier steht ein Text!</span>
 
<p>Dies ist ein teilweise <span style="color: #0000FF;">hervorgehobener</span> Text!</p>
Anzeigebeispiel
Anzeigebeispiel



CLASS

CLASS ist ein wichtiger CSS-Bestandteil, welcher in HTML-Tags als Attribut eingesetzt wird. Das Attribut class wird mit dem Klassifizierungsnamen als Wert gefüllt und kann in so ziemlichen allen HTML-Tags eingesetzt werden. In Ihrem CSS-Dokument bzw. Style-Teil Ihres HTML-Dokumentes können Sie mit einem Punkt geflgt von dem Klassifizierungsnamen die Einstellungen vornehmen. Die Klassifizierung darf mehreren HTML-Elementen zugewiesen werden. In dem folgenden Beispiel wird ein Absatz mit speziellen Eigenschaften verziert:

.text {
    font-family: sans-serif;
    font-size: 15px;
    color: red;
    padding: 1em;
    border-color: blue;
    border-width: 5px;
    border-style: solid;
}
<p class="text">Hier steht ein Text!</p>
Anzeigebeispiel
Anzeigebeispiel



ID

ID ist ein ebenfalls wichtiger CSS-Bestandteil, das in HTML-Tags als Attribut eingesetzt wird. Das Attribut id wird mit dem Identifikationsnamen als Wert gefüllt und kann in so ziemlich allen HTML-Tags eingesetzt werden. In Ihrem CSS-Dokument bzw. Style-Teil Ihres HTML-Dokumentes können Sie mit dem #-Zeichen gefolgt von dem Identifkationsnamen die Einstellungen vornehmen. Das ID-Element darf nur einmal in einem HTML-Dokument verwendet werden. Der Vorteil bei ID ist, dass ID mehr Rechte hat. Wird CLASS und ID im selben HTML-Tag verwendet und dort eine gleiche Eigenschaft verwendet, wird ID immer vorgezogen. ID eignet sich eher für feste Elemente (z. B. eine Navigation). CLASS eignet sich dagegen eher für kleine Formatierungen (z. B. um bestimmte Bildern immer den gleichen Rahmen hinzufügen zu können oder einen Navigationspunkt). In dem Beispiel wird ein Inhaltsbereich erstellt.

#inhalt {
    font-family: sans-serif;
    font-size: 15px;
    color: red;
    padding: 1em;
    border-color: blue;
    border-width: 5px;
    border-style: solid;
    width: 400px;
    height: auto;
}
#inhalt img{
    border-color: lime;
    border-width: 5px;
    border-style: solid;
}
<div id="inhalt">
<img src="/Bilder/Logo.jpg" width="100" height="100" />
<p>...</p>
</div>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de