CSS Grundlagen

Einleitung:

CSS (Cascading Style Sheets) wird zum Formatieren von HTML verwendet und ist eine wichtige Grundlage für das optische Erscheinungsbild einer Webseite. Mit Hilfe von CSS Angaben in einem HTML Dokument, oder in einer gesonderten CSS- Datei hat man die Möglichkeit HTML zentral zu definieren, so dass Änderungen, die gemacht werden müssen, nur an einem Ort zu machen sind, und überall übernommen werden. CSS Formatierungen, die in einem HTML Dokument zutreffen sollen, werden im <head> gemacht.

2 - Selektoren

Erklärung des Codebeispiels:

Das was vor der geschweiften Klammer steht wird zu unserem Selektor. Das bedeutet, dass alle zutreffenden HTML Elemente entsprechend dem Klammerinhalt definiert werden. Zutreffende HTML Elemente sind hier alle Absätze (p-Tags). Der Inhalt der Klammer ist die CSS Deklaration, in diesem Fall werden allen p-Tags eine Farbe zugewiesen. Color ist unsere Eigenschaft, die einen Wert zugewiesen bekommt (Rot).
Daraus ergibt sich folgendes Schema.

Schema CSS-Selektor:

SELEKTOR { Eigenschaft: Wert }

Beispiel (Alle Absätze rote Schrift):

 p { color: red }

3 - CSS in HTML einbinden

CSS Code in HTML Datei einbinden:

   <style type="text/css">
 	<!--
 	    p { color: red }
 	-->
   </style>

...und in den <head> eingefügt. So könnte eine vollständige HTML-Datei mit CSS aussehen:.

CSS-Code in HTML Datei:

<html>
  <head>
   <style type="text/css">
 	<!--
 	    p { color: red }
 	-->
   </style>
  </head>
  <body>
 	<h1>So funktionierts</h1>
 	<p>Erster Absatz</p>
 	<p>Zweiter Absatz</p>
 	<p>Dritter Absatz</p>
  </body>
</html>

Hier sehen Sie das Ergebnis

CSS style-Attribut

 	<p stlye="color:blue">Zweiter Absatz</p>

Eine Besonderheit ist das direkte Formatieren mit Hilfe des style-Attributs (siehe Zeile 12) .

CSS-Code:

<html>
  <head>
   <style type="text/css">
 	<!--
 	    p { color: red }
 	-->
   </style>
  </head>
  <body>
 	<h1>So funktionierts</h1>
 	<p>Erster Absatz</p>
 	<p stlye="color:blue">Zweiter Absatz</p>
 	<p>Dritter Absatz</p>
  </body>
</html>

Hier sehen Sie das Ergebnis

Erklärung:

Wenn ein Element mit dem style-Attribut formatiert wird, wird diese, sehr direkte Methode priorisiert und überschreibt somit gleichbedeutende Eigenschaften die im Head, oder in einem externen Stylesheet definiert wurden.

Schreibe einen Kommentar

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