CSS
CSS (Cascading Style Sheets) ist eine Sprache, um Gestaltungsregeln für HTML-Dokumente festzulegen.
Diese Regeln folgen diesem Aufbau:
Selektor {
Attribut 1: Wert 1;
Attribut 2: Wert 2;
...
}
Der Selektor gibt hierbei an, für welche Elemente die folgenden Regeln gelten sollen. Jede Regel hat den Aufbau Attribut:Wert;, wobei die Attribute z.B. die Hintergrundfarbe, die Breite der Umrandung oder die Schriftgröße sein können und der Wert in Abhängigkeit davon frei gewählt werden kann.
Diese Gestaltungsregeln werden entweder mit dem Tag <style>...</style> umgeben und im <head>-Teil der Seite platziert oder (besser) in einer separaten Datei mit der Endung .css gespeichert und mit <link rel="stylesheet" href="DATEINAME.css"/> im <head>-Teil der HTML-Seite verlinkt.
CSS ist sehr streng, was die korrekte Schreibweise betrifft! Wenn eine geschweifte Klammer, ein Doppelpunkt oder das Semikolon am Ende einer Regel fehlt, führt dies in der Regel dazu, dass der gesamte Block von Regeln nicht zur Anwendung kommt.
Im Umgang mit CSS ist daher höchste Sorgfalt geboten!
Selektoren
Die einfachsten Selektoren sind die HTML-Tags selbst. In diesem Fall verwendet man einfach den Namen des Tags, ohne die spitzen Klammern und ohne alle Attribute, als Selektor. Um beispielsweise alle <h1>-Elemente in blauer Schrift darzustellen, schreibt man
h1 {
color: blue;
}
Wenn eine Regel für mehrere Tags auf einmal gelten soll, kann man diese durch Kommata getrennt angeben. Wenn also nicht nur <h1>-, sondern auch <h2>- und <h3>-Überschriften blau gedruckt werden sollen, kann man das folgendermaßen aufschreiben:
h1, h2, h3 {
color: blue;
}
Regeln
CSS ist ein sehr mächtiges Gestaltungswerkzeug. Aus diesem Grund werden hier nur einige Regeln kurz beschrieben.
Schrift
| Attribut | Beispielwerte | Erklärung |
|---|---|---|
font‑family
|
ArialGeorgiasans-serifserifmonospace"Source Sans Pro", "Linux Libertine", "Cambria", serif
|
Legt die Schriftart des ausgewählten Elements fest. Es können mehrere Schriftarten angegeben werden; verwendet wird dann die erste, die zur Verfügung steht.
sans-serif, serif und monospace sind so genannte Schriftfamilien für Antiqua-, Grotesk- und Festbreitenschriften; für deren Darstellung wird auf die entsprechenden Einstellungen des Browsers zurückgegriffen. |
font‑size
|
xx-smallx-smallsmallmediumlargex-largexx-largesmallerlarger20px70%2rem
|
Legt die Schriftgröße des ausgewählten Elements fest. xx-small bis xx-large sind Kategorien, deren Interpretation dem Browser überlassen wird. smaller, larger und Prozentangaben wie 50% beziehen sich auf die Schriftgröße des umgebenden Elements. Es können auch absolute Angaben wie 40px (40 Pixel hoch) oder 3mm (nur für den Druck zu empfehlen) verwendet werden. 1rem ist die Standardschriftgröße des <body>, eine Schriftgröße von 1.5rem ist also anderthalbmal so groß.
|
font‑weight
|
normalbold100400900
|
Legt die Dicke der Schrift des ausgewählten Elements fest. normal ist normal, bold ist fett, mit einer Zahl zwischen 0 und 1000 kann die Größe, wenn die Schriftart das unterstützt, sehr fein festgelegt werden.
|
font‑style
|
normalitalicoblique
|
Legt fest, ob die Schrift des ausgewählten Elements normal, kursiv (italic) oder schräg (oblique) erscheinen soll.
|
Farben
| Attribut | Beispielwerte | Erklärung |
|---|---|---|
color
|
bluehot-pink#BADB01rgb(42,69,123)
|
Legt die Schriftfarbe des ausgewählten Elements fest, entweder durch die Angabe eines Farbnamens oder durch den RGB-Farbcode. |
background‑color
|
Legt die Hintergrundfarbe des ausgewählten Elements fest. |
Größen und Abstände
| Attribut | Beispielwerte | Erklärung |
|---|---|---|
widthmax-widthmin-width
|
500px40%50vw20vh
|
Legt die Breite, maximale Breite oder minimale Breite eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, 1vw ist ein Prozent der Breite des Browserfensters.
|
heightmax-heightmin-height
|
Legt die Höhe, maximale Höhe oder minimale Höhe eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, 1vh ist ein Prozent der Höhe des Browserfensters.
| |
marginmargin‑topmargin‑rightmargin‑bottommargin‑left
|
Legt die Breite des Freiraums fest, der ein Element umgibt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden. | |
paddingpadding‑toppadding‑rightpadding‑bottompadding‑left
|
Legt die Breite des Freiraums fest, der zwischen dem Text eines Elements und dessen (gedachter) Rahmenlinie liegt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden. |
Rahmen
| Attribut | Beispielwerte | Erklärung |
|---|---|---|
borderborder‑topborder‑rightborder‑bottomborder‑left
|
1px solid black2px dotted red5px dashed rgb(123,45,67)20px double #C0FFEE
|
Legt das Aussehen der Rahmenlinie um das ausgewählte Element fest. Angegeben werden müssen Linienbreite, Linienstil und Linienfarbe. Die obere, rechte, linke und untere Rahmenlinie können individuell gestaltet werden. |
border‑collapse
|
separatecollapse
|
Legt fest, ob die Rahmenlinien zweier benachbarter Elemente einzeln (separate) oder als eine Linie (collapse) dargestellt werden sollen.
|
