Alles klar soweit !?

Sie befinden sich hier:

Wir haben bisher kennengelernt, dass die CSS Befehle direkt auf HTML-Tags anzusetzen sind. Jetzt werden wir Bezeichner fĂĽr diesen Job nutzen.

Es gibt zwei verschiedene Bezeichner:

  • ID” = Es ist eindeutig und es existiert nur ein Element mit dieser ID (Auf einer Seite steht nur eine Box in der die Navigation steht).
  • Class” = Von einer “Class” kann es mehrere Elemente geben (Auf einer Seite gibt es mehrere Textelemente, die bearbeitet werden).

Im folgenden erstellen wir ein Beispiel, indem wir mehrere Absätze einfügen und diesen dann Klassen bzw. eine ID vergeben. Im Kopfbereich sprechen wir dann diese Klassen und ID´s an um eine Aussehensänderung vorzunehmen:

<html>
<head>

<style type="text/css">
 #id1   {color:#990000; }
.klasse1{color:#000099; }
.klasse2{color:#009900; }

</style>
</head>
<body>

<p class="klasse1">Absatz mit der Klasse: "klasse1"</p>
<p class="klasse2">Absatz mit der Klasse: "klasse2"</p>
<p class="klasse1">Absatz mit der Klasse: "klasse1"</p>
<p id="id1" class="klasse1">Absatz mit der ID: "id1" und der Klasse: "klasse1"</p>

</body>
</html>

Beispiel 4

Wie im Kopfbreich zu sehen, werden Ids mit einer Raute angesprochen (“#Idname”) und Klassen mit einem Punkt (“.Klassenname”).

Hinweis: Der letzte Absatz besitzt eine Klassenzuweisung und einen ID-Namen. Da die ID stärker ist als die Klasse, übernimmt das Element die Werte der ID.

Im letzten Teil haben wir die Formatierung für alle Absatztags durchgeführt (<p>). Jetzt habt ihr die Möglichkeit durch Klassen und ID´s die gestaltung individueller zu machen.

 

Ihr habt noch Fragen oder Anregungen, dann schreibt uns einfach eine E-Mail über unser Kontaktformular oder kommentiert diesen Beitrag!

Alles klar soweit !?

vorheriger Artikel: nächster Artikel:
» «

Geschrieben am: 19. März 2015 um 16:13 // Thema: CSS //  Kommentar verfassen

Auf dieses Thema gibt es noch keine Reaktion

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *




Impressum // KlaroBox // die kostenlose Lernkiste