CSS-Syntax / Definition


(Kommentare: 1)

Zur Entwicklung aktueller und valider Webseiten ist CSS unvermeidliches Handwerkszeug. Die Möglichkeiten, die die aktuelle CSS3 Version in Zusammenarbeit mit einem modernen Browser bieten, sind enorm.

Eine CSS-Regel hat folgendes Aussehen:

Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B
}
/ Kommentar /

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die HTML-Tags:

Muster Bedeutung
* Selektiert jedes Element
E Selektiert jedes Element vom Typ E
E F Selektiert jedes Element F, das ein Nachfahre von Element E ist
E > F Selektiert jedes Element F, das ein Kind von E ist
E:first-child Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist
E[foo] Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert)
E[foo=bar] Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist
.c Selektiert jedes Element der Klasse c
E.c Selektiert alle Elemente E der Klasse c
#myid Selektiert jedes Element mit der ID „myid“.
E#myid Selektiert das Element E mit der ID „myid“.

Beispiel

p.note {
position: relative;
left: 15%;
width: 70%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}

Ein mit dem p-Tag umgebener Absatz der Klasse „note“ wird dadurch von einem CSS-kompatiblen Browser wie folgt dargestellt:

CSS Formatierung

CSS-Textabsatz

Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.

Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.

Zurück

Einen Kommentar schreiben

Kommentar von Werner Mang |

Gibt es dazu mehr Infos?

Antwort von Thomas Meinhold

Um das Thema erschöpfend zu behandeln, müsste wohl ein weiteres Buch geschrieben werden. Doch dazu gibt es schon eine Reihe guter Literatur bzw. Online-Tutorials.

Wer also tiefer in die Materie einsteigen will, wird nicht umhin kommen, sich näher damit zu beschäftigen.