Kurze Einführung in CSS

Eine einfache Regel

Das folgende Dokument enthält in der dritten Zeile ein Stilblatt. Ein Stillblatt enthält Regeln für die Darstellung von Webseiten.

Die Regel »p { background-color: red }« besteht aus einem Selektor »p« und einem Block »{ background-color: red }«.

Eine Regel mit einem Selektor und einem Block

.------------------------ Regel -----------------------.

p { background-color: red }

'----- Selektor -----' '---------- Block ----------'

Durch den Selektor »p« wird festgelegt, daß der Block für Elemente mit dem Typ »p« (für Absätze ) gelten soll.

Der Block »{ background-color: red }« enthält die Deklaration »background-color: red«.

Ein Block mit einer Deklaration

.---------- Block ---------.

{ background-color: red }

'---- Deklaration ----'

Die Deklaration legt für die Eigenschaft »background-color« den Wert »red« fest.

Insgesamt besagt diese Regel, daß Elemente mit dem Typ »p« mit rotem Hintergrund dargestellt werden sollen.

Ein Stilblatt wird vor »</style>« in das Programmgerüst eingefügt.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
p { background-color: red }
</style></head><body>
<p>Hallo <a href="http://www.example.com">Beispiel</a>-Dokument</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Folgen von Regeln und Deklarationen

Durch das Blatt (Stilblatt), das hier die dritte und vierte Zeile des HTML-Dokumentes umfaßt, wird der Hintergrund von p-Elementen auf die Farbe “red ” gesetzt. Anker werden mit grüner Schrift auf weißem Hintergrund dargestellt. Dabei wird davon Gebrauch gemacht, daß ein Block auch mehrere semikolongetrennte Deklarationen enthalten kann, und daß ein Stilblatt mehrere aufeinanderfolgende Regeln enthalten kann.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
p { background-color: red  }
a { background-color: white; color: green }
</style></head><body>
<p>Hallo <a href="http://www.example.com">Beispiel</a>-Dokument</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Schreiben von HTML für CSS

HTML-Dokumente sollten so geschrieben werden, daß alle wichtigen Informationen auch ohne CSS richtig angezeigt werden.

Schreiben von JavaScript für CSS

JavaScript-Programme sollten so geschrieben werden, daß Aufgaben, die schon mit CSS alleine erledigt werden können, nicht mit JavaScript sondern bevorzugt mit CSS erledigt werden. Daher muß ein JavaScript-Programmierer immer auch ein Kenner von CSS sein, denn wie sollte er sonst beurteilen können, was mit CSS möglich ist?

Syntax von CSS

Ein CSS-Dokument kann Regel für die Darstellung oder Wiedergabe von HTML- oder XML-Dokumenten enthalten.

Syntaxdiagramm

Regel
    .----------.    .-------.
--->| Selektor |--->| Block |--->
    '----------'    '-------'
Block
     .-.         .-------------.         .-.
--->( { )---.--->| Deklaration |---.--->( } )--->
     '-'    ^    '-------------'   |     '-'
            |          .-.         |
            '---------( ; )<-------'
                       '-'

“A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations." – www.w3.org/TR/css21/syndata.html#rule-sets

Das Semikolon trennt Deklarationen. Daher ist es direkt vor einer geschweiften Klammer zu nicht nötig.

Die folgende Regel mit zwei Deklarationen legt beispielsweise fest, daß alle a-Elemente mit grüner Schrift auf weißem Hintergrund erscheinen sollen.

Regel (Beispiel)

a { background-color: white; color: green }

Es gibt (Stand 2019) keine eigentliche „CSS3“-Norm. Man verwendet statt dessen CSS2 und einzelne Ergänzungen.

Quelle

https://www.w3.org/TR/CSS2/css2.pdf
https://www.w3.org/TR/css-syntax-3/
https://www.w3.org/TR/2014/CR-css-syntax-3-20140220/

Selektoren (Beispiele)

»p« selektiert alle Elemente mit dem Typ »p«, wie beispielsweise »<p>abc</p>«.

»#point« selektiert das Element mit der Kennung (“id ”) »point«, wie beispielsweise »<p id="point">abc</p>«.

Deklarationen zur Anzeige (Beispiele)

»visibility: hidden« Inhalt nicht anzeigen, aber denselben Platz wie bei sichtbaren Inhalt beanspruchen

»display: none« Inhalt nicht anzeigen und keinen Platz dafür beanspruchen

Deklarationen einer Hintergrundfarbe (Beispiele)

»background-color: white« weiße Hintergrundfarbe

»background-color: lime« weitere Hintergrundfarbe

»background-color: lightgray« weitere Hintergrundfarbe

»background-color: aqua« weitere Hintergrundfarbe

»background-color: burlywood« weitere Hintergrundfarbe

»background-color: cyan« weitere Hintergrundfarbe

»background-color: gold« weitere Hintergrundfarbe

Deklarationen einer Schriftfarbe (Beispiele)

»color: black« schwarze Schrift

»color: purple« weitere Schriftfarbe

»color: green« weitere Schriftfarbe

»color: blue« weitere Schriftfarbe

»color: olive« weitere Schriftfarbe

»color: brown« weitere Schriftfarbe

»color: darkred« weitere Schriftfarbe

»color: indigo« weitere Schriftfarbe

»color: teal« weitere Schriftfarbe

Deklarationen einer Schriftfarbe (Beispiele)

RGB-Farben: #RGB oder #RRGGBB

z.B. #000, oder #FFFFFF

siehe auch: [RAL RGB], [Randall Munroe colors]

Qualifizierte Regeln (Beispiele)

Beispiel

p { background-color: burlywood }

Die obenstehende Regel setzt die Hintergrundfarbe für Absätze auf Sandbraun (#DEB887).

Beispiel

a { background-color: white; color: green }

Die obenstehende Regel setzt die Hintergrundfarbe für Anker auf weiß und die Textfarbe auf grün (#008000).

Beispiel

a { }

Die obenstehende Regel enthält keine Deklarationen und ist somit wirkungslos. Sie könnte vielleicht als Platzhalter verwendet werden.

Beispiel

h1 { text-align: center }

Die obenstehende Regel sorgt dafür, daß Überschriften der höchsten Stufe, Stufe 1, horizontal zentriert werden.

Beispiel

#span { font-size: 500% }

Die obenstehende Regel sorgt dafür, daß alle Inhalte des Elements »span« fünffach vergrößert dargestellt werden.

Erleichterungen für Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element.

Main.html

<style>
p { background-color: red }
</style>
<p>Hallo <a href="http://www.example.com">Beispiel</a>-Dokument</p>
<script>
</script>