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

CLASS und ID - Bezeichner für CSS-Elemente

CSS-Elemente können über diese beiden "Bezeichner" angesprochen werden. Dazu werden die HTML-TAGs um das Attribut class="klassenname" bzw. id="idname" erweitert. Im folgenden Beispiel wird das anhand von Absätzen (<p>) gezeigt.

Beispiel:

<p class="inhalt">Text</p> 
<strong class="inhalt">Text</strong>
<p id="inhalt"> Text</p>
<strong id="inhalt"> Text</strong>

Das besondere an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur eindeutigen Bestimmung eines Elementes.

Sinn und Zweck von CLASS

Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden Beispiel werden im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.

<style type="text/css">
<!--
.textmarkergelb {
  background-color:yellow;
}
.textmarkerrot {
  background-color:red;
} 
--> 
</style>  

im Beispiel wird diese  
<strong class="textmarkergelb">Stelle im Text</strong>
mit einer Art
<strong class="textmarkerrot">Textmarker</strong> 
hervorgehoben. 
im Beispiel wird diese Stelle im Text mit einer Art Textmarker hervorgehoben.

Hinweis: für Classen wird in der CSS-Definition vor dem Namen ein Punkt geschrieben (für ID ein # - siehen unten).

Sinn und Zweck von ID

Elemente, die es nur einmal gibt. Z.B. die Steuerung können so mit einer ID und den dazugehörigen CSS-Design ausgestattet werden.

Beispiel: Rahmen um die Steuerung und Hintergrundfarbe

<style type="text/css"> 
<!--
#navi {
background-color:silver;
border:2px dotted orange;
float:left;
}
-->
</style>

<div id="navi">
<ul>
  <li><a href="index.htm">Startseite</a></li>
 <li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>

<div id="inhalt">
Hier kommt mehr zum Thema html lernen und homepage erstellen …
</div>
Hier kommt mehr zum Thema html lernen und homepage erstellen …

Hinweis: bei IDs wird in der CSS-Definition vor dem Namen ein # geschrieben!

ID-Selektor und Klassen-Selektor

Die korrekte Bezeichnung ist ID-Selektor für id="" bzw. Klassen-Selektor für class="". Wichtig ist hier das Verständnis und falls man sich mit jemanden unterhält, dass man das Kind beim Namen nennen kann.

Die vergebenen Namen dürfen keinerlei Sonderzeichen und Umlaute (öäüß) enthalten und keine Leerzeichen. Und die Namen sind „case sensitiv“ – sprich Groß- und Kleinschreibung macht einen Unterschied. Also am besten alles klein schreiben.

Warum überhaupt beide anwenden?

Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, daß es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht. Wird z.B. folgende gemacht, gewinnt die Farbe Orange:

<style type="text/css">
<!--
.gelb {
  background-color:yellow;
}
#orange {
  background-color:orange;
} 
--> 
</style>  

<p id="orange" class="gelb">Welche Farbe gewinnt?</p>

Diese gezeigte Konstruktion, dass für einen Bereich sowohl ein id-Selektor wie auch ein Klassen-Selektor angewendet werden, kann vorkommen. Wobei natürlich man nicht hier Farben zuweist - das obige Beispiel ist nur zur Demonstration, dass es möglich ist und wer mehr Gewicht hat und gewinnt. Je nach erstelltem Design kann es aber zweckmäßig sein, beide Selektoren zu nutzen.

Zu FLOAT: gibt es mehr in einem folgenden Kapitel.

TIPP: Die Definition der CSS-Style-Sheets erfolgt am besten in einer externen Datei, damit die Definition nur einmal gemacht werden muss und in beliebig viele HTML-Seiten eingebunden werden kann.

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 :)

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

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

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