Tag 10

CSS Grundlagen: Regeln und Syntax

Allgemeine Informationen zu CSS:

• CSS-Casading Style Sheet
• CSS ist ASCII und kann mit Texteditor geschrieben werden
• Standadisiert vom w3C
• Aktuell gültiger Standard ist CSS 2.1
• In der Entwicklung ist CSS3
• Einbindung der CSS-Datei im Header in der HTML-Datei:
  <link rel="stylesheet" href="basics.css" type="text/css">

 
CSS läßt sich Einbinden als

1. externe CSS-Datei (globales Stylesheet)
   gilt für die gesamte Webseite
2. Style-Block im Kopf der jeweiligen Datei
   gilt nur für die eine Webseite
   Werden externe Datei und Styleblock verwendet, sollte der Block nach der externen Datei eingebunden werden (Reihenfolge).
   <style type> {background-color: #FFFFC6;} </style>
   
3. als CSS-Eigenschaft mit HTML-Attribut: style
   gilt nur für das eine HTML-Element
   wird in der Praxis selten genutz
   <p style="font-size: .5cm;">Sylvia wagt quick den Jux bei Pforzheim.</p>

Aufbau und Regeln in einer CSS Datei

Selektor {Deklarationsblock, Regelset}
Selektor {Eigenschaft: Wert; Eigenschaft: Wert; Eigenschaft: Wert;}

• CSS-Eigenschaften überschreiben HTML-Eigenschaften
• CSS-Eigenschaften werden vererbt (von den Eltern an die Kinder)
• besteht ein Wert aus mehreren Einzelworten ("Times New Roman") wird dieser in Anführungszeichen gesetzt.
• Erlaubt sind doppelte und einfache Anführungszeichen.
  (z. B. <h2 style="'Times New Roman'"></h2>)
• Bei Schriftart können mehrer Werte vergeben werden (oder). Die Werte werden kommasepariert. Die erste Schrift wird sofern vorhanden angezeigt.
• Besitzt eine CSS-Eigenschaft mehrere Werte (und), werden die Werte durch Leerzeichen separiert.
• Einheiten werden direkt (ohne Leerzeichen) an die Zahl gehangen und sind Pflicht.
• Nutzen mehrere Selektoren den gleichen Deklarationsblock, werden die Selektoren kommasepariert.
• Bei gleichen Selektoren und gleichen Eigenschaften gilt immer das zuletzt Genannte.
  Die Reihenfolge der Selektoren ist relevant. Der zuletzt genannte Wert hat Gültigkeit.

Zahlen und Einheiten in CSS

Zahlen

• positive und negative reelle Zahlen sind gültig
• das Dezimaltrennzeichen ist der Punk
• die 0 ist die einzige Zahl ohne Einheit!

Einheiten 

Absolute Einheiten

• px Pixel (abh. von der Pixeldichte des Endgerätes)
• pt Punkt (1/72 inch) (0,3527 Millimeter)
• pc Pica (1/6 inch) (4,2324 Millimeter)
• in Inch (2,54 cm)
• cm Zentimeter
• mm Millimeter

Relative Einheiten

• % Prozent (benötigt eine Bezugsgröße)
• em Längeneinheit entspricht der aktuellen Schriftart und Schriftgröße
• (100% bezogen auf die Breite des Buchstaben m)
• ex Längeneinheit entspricht der Breite des Buchstaben x
  (1ex = 100% bezüglich auf die Breite des Buchstaben x)
• vw Viewport-Breite des Anzeigenbereichs (CSS3)
• vh Viewport-Höhe des Anzeigenbereichs (CSS3

Winkelmaße (Rotationen)

• deg Grad (360° Kreis)
• grad Neugrad (400° Kreis)
• rad Radiant (1rad = 57.296deg)

Zeitangaben (Animationen, Übergänge, Audioausgabe)

• s Sekunde
• ms Millisekunde

Frequenzangabe

• hz Hertz
• khz Kilohertz

 

Die Font-Eigenschaften im CSS

CSS Langform (Einzeleigenschaften)

• font-size (Schriftgröße): Längenangaben, Relative Angaben, xx-small, x-small, small, large, x-larger, xx-large 
• font-family (Schriftart): Websichere Schriftarten 
• font-style (Schriftstyle): normal, italic, oblique 
• font-weight (Schriftschnitt): 100, 200, ..., 900, normal, bold, bolder, lighter
• Font-variant (Kapitälchen): normal, small-caps
• line-height (Zeilenabstand): Längenangabe, Prozentangabe
• color: Textfarbe

CSS Kurzform (Eigenschaften werden zusammengefasst)
Negativ: Alle Eigenschaften müssen ausgefüllt werden!

                    font: style variante weight size/line-height family
<p style="font: italic small-caps 100 14pt/110% Verdana">

Das Boxmodell

CSS Eigenschaften zur Bemaßung (width, height)

Die Bemaßung von Objekten (width, height) ist nur bei Block-Elementen/Inline-Block-Elementen möglich.
Inline-Elemente können nicht mit Höhe und Breite ausgestattet werden. WICHTIG!

• width: Breite (Angabe relativ und absolut möglich)
• height: Höhe (in der Regel absolut, relativ nur, wenn auch das Elternelement eine Höhe besitzt)
• min-width: Minimale Breite (CSS 3)
• max-width: Maximale Breite (CSS 3)
• min-height: Minimale Höhe (CSS 3)
• max-height: Maximale Höhe (CSS 3)

Boxmodell: Padding (Innenabstand)

Langform

• padding-top: Innenabstand oben
• padding-right: Innenabstand rechts
• padding-bottom: Innenabstand unten
• padding-left: Innenabstand links

Kurzform

• padding: 12px (gilt für alle vier Seiten)
• padding: 12px 24px (2 Werte - oben/unten rechts/links)
• padding: 12px 24px 6px 48px (von allen Seiten)

 

Boxmodell: Border (Rahmen)

• Art des Rahmens: solid dotted dashed double none
• Dicke des Rahmen: Größenangabe (absolut/relativ)
• Farbe des Rahmens: Farbwert

Kurzform

• border: 12px solid red (gilt für alle vier Seiten)

Langform

• border-top: Rahmen oben
• border-right: Rahmen rechts
• border-bottom: Rahmen unten
• border-left: Rahmen links