Die HTML-Elemente können mittels sogenannter Stylesheets gestaltet werden. Dabei lassen sich Farben, Schriftarten, aber auch Rahmen und Positionen der Elemente anpassen.
Mit CSS schreibt man Regeln. Diese bestehen aus 3 Komponenten:
Selektor {
Eigenschaft: Wert;
Eigenschaft: Wert;
...
Eigenschaft: Wert;
}
Name | Muster | Bedeutung | Beispiel |
---|---|---|---|
Typselektor | E |
Selektiert jedes Element vom Typ E |
p { .. } selektiert jedes p -Element des HTML-Dokumentes |
Klassenselektor | .c |
Selektiert jedes Element der Klasse c |
.entwurf { .. } selektiert jedes HTML-Element mit class -Attribut entwurf |
ID-Selektor | #id |
Selektiert das Element mit der ID id |
#hauptnavigation { .. } selektiert das HTML-Element mit der id hauptnavigation |
Element-Klassen-Selektor | E.c |
Selektiert alle Elemente vom Typ E mit Klasse c |
p.entwurf { .. } selektiert jedes p -Element mit Klasse entwurf |
Wir wenden die Beispiel-Selektoren der obenstehenden Tabelle auf den folgenden HTML-Code an. Welche HTML-Elemente werden gewählt?
<div id="hauptnavigation" class="entwurf"></div>
<p>asdf</p>
<p class="entwurf">asdf</p>
<p class="definitiv">asdf</p>
<div>adsf</div>
Mehrere Selektoren (S1
, S2
, ...) können kombiniert werden.
Kombination | Muster | Bedeutung | Beispiel |
---|---|---|---|
Und-Kombination | S1, S2 |
Die Regel gilt für alle S1 und alle S2 |
div, p { .. } selektiert alle p -Elemente und alle div -Elemente |
Descendant | S1 S2 |
Aus der Selektion von S1 werden alle Elemente welche S2 entsprechen gewählt |
div p { .. } selektiert alle p -Elemente die in einem div -Element enthalten sind |
Child | S1 > S2 |
Selektiert alle S2 -Elemente welche direkte Nachkommen von S1 sind |
div > p.entwurf { .. } |
Adjacent Sibling | S1 + S2 |
Wählt alle Elemente S2 die direkt nach S1 kommen und das selbe Elternelement wie S1 haben |
div.entwurf + p { .. } selektiert alle p -Elemente welche direkt nach einem div -Element mit Klasse entwurf kommen |
General Sibling | S1 ~ S2 |
Selektiert alle S2 -Elemente welche mit dem S1 -Element dasselbe Elternelement teilen |
div ~ p { .. } wählt alle p -Elemente welche «Geschwister» von div -Elementen sind |
Es existieren mehrere weitere Möglichkeiten, die Selektion einzuschränken. Man kann diese spielerisch im Online-Game CSS-Diner austesten.
Nachdem wir nun Elemente gewählt haben, können wir diese anpassen. Dazu legen wir für gewisse Eigenschaften Werte fest.
Werte für Farben können wie folgt angegeben werden:
article {
color: blue;
border: 4px solid #f0c142;
background-color: rgb(255,180,120);
background-color: rgba(255,120,0,0.3);
}
blue
#f0c142
f0
, Grünwert: c1
, Blauwert: 42
)rgb(255,120,60)
rgba(120,60,0,0.3)
0
und 255
und einem «Deckungswert» für den Alpha-Kanal zwischen 0
und 1
(0
heisst ganz durchsichtig, 1
heisst nicht durchsichtig).Diverse Längeneinheiten können verwendet werden um Abstände anzugeben. Dabei schreibt man die Einheit direkt (ohne Leerzeichen) hinter die Zahl. Man unterscheidet zwischen relativen und absoluten Einheiten.
Einheit | Erklärung | Typ | Beispiel |
---|---|---|---|
px |
Pixel (Bildschirmpunkte) | absolut | bottom: 12px 12 Pixel Abstand von unten |
% |
Prozent des Elternelementes | relativ | width: 50% Breite 50% der Breite des Elternelementes |
rem |
relatives Vielfaches der Textgrösse des Dokumentes | relativ | font-size: 1.4rem Schriftgrösse Faktor 1.4 der Standard-Schriftgrösse |
nav {
position: absolute;
bottom: 12px;
font-size: 1.4rem;
width: 50%;
border: 1px solid black;
}
Eigenschaft | Wert | Erklärung |
---|---|---|
display |
inline |
Anzeige im «Textfluss», keine Positionierung möglich |
block |
Anzeige als Block-Element, kann positioniert werden | |
inline-block |
Verhält sich wie Inline-Element, kann aber Breite und Höhe haben | |
position |
static |
Standard, Element wird in der Reihenfolge wie es im Quelltext steht, angezeigt |
absolute |
Position relativ zum ersten nicht-statischen Vorgängerelement | |
fixed |
Position relativ zum Browser-Fenster | |
relative |
Position relativ zur «Normal»-Position des Elementes | |
float |
left |
Das Element «schwebt» links und wird von nachfolgenden Elementen «umflossen» |
right |
Das Element «schwebt» rechts und wird von nachfolgenden Elementen «umflossen» |
nav {
float: right;
}
nav li {
display: inline;
}
footer {
position:absolute;
bottom:0px;
right:10px;
}
nav, footer {
background-color: yellow;
}
Neben Schriftfarbe, kann natürlich auch die Grösse, die verwendete Schriftart und weiteres gesetzt werden:
body {
color: #542437;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
text-decoration: underline;
line-height: 1.5;
}
font-family
font-style
italic
(kursiv) oder normal
font-weight
bold
(fett) oder normal
text-align
center
, left
, right
oder justify
text-decoration
none
, overline
, line-through
oder underline
line-height
Möchte man ein Element mit einem Rahmen versehen, kann man das mit der border
-Eigenschaft erledigen. Diese fasst die drei Werte für border-width
, border-style
und border-color
zusammen. Diese Werte können auch einzeln gesetzt werden. Zudem gibt es für jede Rahmen-Eigenschaft x
vier Varianten (border-top-x
, border-right-x
, border-bottom-x
und border-left-x
) um die vier Rahmen-Stücke (oben, rechts, unten und links) separat zu gestalten.
article {
border: 4px solid #f0c142;
}
nav {
border-style: dotted;
border-color: red;
border-top-color: blue;
border-width: 5px;
border-bottom-style: dashed;
}
border-style
solid
, dashed
, dotted
, ...Wir versuchen unsere im html-Kapitel erstellte Webseite zu gestalten:
style.css
head
-Element die folgende Zeile einfügst: <link rel="stylesheet" type="text/css" href="style.css">