CSS

Aus KGS-Wiki

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.

💬
Beispiel
h1 {
  font-family: Corbel, Calibri, Arial;
  color: blue;
}

Diese Regeln gelten für alle <h1>-Überschriften (Zeile 1) und legen Folgendes fest:

  1. Als Schriftart (font-family) soll je nach Verfügbarkeit Corbel, Calibri oder Arial verwendet werden.
  2. Die Schriftfarbe (color) soll blau sein

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.

⚠️
Achtung

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

Tags

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;
}

Grundsätzlich können alle Arten von Selektoren durch Kommata getrennt angegeben werden.

Klassen und IDs

Wenn man nicht alle, sondern nur einige Elemente eines Tags besonders gestalten möchte, kann man Klassen und IDs verwenden. Diese müssen an den HTML-Elementen mit den Attributen class und id festgelegt werden und können dann von CSS als Selektor genutzt werden. Vor Klassennamen wird dabei ein Punkt gesetzt, vor ID-Namen eine Raute.

<h1 class="seitentitel">...</h1>

.seitentitel {
    font-size: 42px;
    font-weight: 900;
}

<ul id="navigation">...</p>

#navigation {
    background-color: #C0FFEE;
}

Kombinierte Selektoren

Mehrere Selektoren können kombiniert werden, indem sie direkt hintereinander geschrieben werden. Die folgende Regel gilt nur für <p class="infokasten">-Elemente, nicht für <p>-Elemente ohne Klasse oder mit anderen Klassen und auch nicht für <ul class="infokasten">:

p.infokasten {
    ...
}

Geschachtelte Selektoren

Regeln, die nur für <li>-Elemente innerhalb von <ol>-Elemente gelten sollen, aber nicht für <li>s in <ul>s, kann man folgendermaßen festlegen: 

ol li {
    ...
}

Damit können Selektoren sehr speziell formuliert werden. Nehmen wir an, wir hätten eine Navigationsleiste mit einer Liste von Links. Diese Links sollen schwarz erscheinen, außer natürlich, wenn der Hintergrund der Navigationsleiste selbst schwarz ist; in diesem Fall sollen die Links weiß erscheinen. Das könnte man mit folgenden Regeln umsetzen: 

ul.navigationsleiste a {
    color: black;
}

ul.navigationsleiste.schwarzer-hintergrund a {
    color: white
}

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 Arial
Georgia
sans-serif
serif
monospace
"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-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
20px
70%
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 normal
bold
100
400
900 		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 normal
italic
oblique 		Legt fest, ob die Schrift des ausgewählten Elements normal, kursiv (italic) oder schräg (oblique) erscheinen soll.

Farben

Attribut Beispielwerte Erklärung
color blue
hot-pink
#BADB01
rgb(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
width
max-width
min-width 		500px
40%
50vw
20vh 		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.
height
max-height
min-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.
margin
margin‑top
margin‑right
margin‑bottom
margin‑left 		Legt die Breite des Freiraums fest, der ein Element umgibt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
padding
padding‑top
padding‑right
padding‑bottom
padding‑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
border
border‑top
border‑right
border‑bottom
border‑left 		1px solid black
2px dotted red
5px 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 separate
collapse 		Legt fest, ob die Rahmenlinien zweier benachbarter Elemente einzeln (separate) oder als eine Linie (collapse) dargestellt werden sollen.

Box-Modell

Das CSS-Box-Modell

Um jedes HTML-Element herum kann man sich drei Boxen vorstellen, die ebenfalls zur Gestaltung genutzt werden können. Diese Boxen sind, von innen nach außen:

  1. padding: freier Platz zwischen Inhalt und Rahmen. Die Breite des padding kann mit CSS festgelegt werden.
  2. border: Rahmen um das Element herum. Farbe, Linienstil, Breite und Ecken-Abrundung des Rahmens können mit CSS festgelegt werden
  3. margin: freier Platz um den Rahmen herum. Die Breite des margin kann mit CSS festgelegt werden.

Damit können Abstände und Rahmen um Elemente pixelgenau definiert werden, um die Elemente ansprechend auf der Seite zu positionieren.

Zum Weiterlesen

Diese Seite wurde von einer Lehrkraft überprüft.
Abgerufen von „https://wiki.kah.gs/index.php?title=CSS&oldid=7843“