Schrift
font-size: | Mögliche Werte: pt, px, em |
font-family: | Schriftart, wichtig ist als letzte Angabe entweder sans-serif (Schrift ohne Serifen) oder serif (Schrift mit Serifen) Beispiel: font-family: Arial, Helvetica, sans-serif; |
font-weight: | normal | bold |
font-style: | italic = kursiv (physikalische Auszeichnung) oblique = schräggestellt (logische Auszeichnung) normal = normal |
text-indent: | Einrückung der ersten Zeile eines Textblockes um den vorgegebenen Abstand |
line-height: | Zeilenhöhe bestimmen, wenn der Text mehrzeilig angezeigt wird |
letter-spacing: | Abstände zwischen den einzelnen Buchstabenm in px |
(word-spacing) | (Abstände zwischen den einzelnen Wörtern) |
font-variant: | Schriftvariante: normal | small-caps |
text-decoration: | Textgestaltung: underline, overline, line-through, blink Wichtig bei Hyperlinks |
text-transform: | Textart capitalize, uppercase, lowercase, none analog zu Word, praktisch für nachträgliche Änderung |
Farbe
color: |
Farbe für Schrift bzw. Vordergrund – Angabe über englische Bezeichnungen oder #000000. Auch RGB-Angaben sind möglich Auch transparente Farben sind möglich: |
background-color: | Farbe für den Hintergrundbereich |
Rahmen (alle drei Angaben müssen gemacht werden!)
border-color: | Rahmenfarbe - soll nur ein Teil des Rahmens gefärbt werden, dann: border-top-color, border-right-color, border-bottom- color und border-left-color |
border-width: | Rahmenstärke in Pixel (px) soll nur ein Bereich geändert werden: border-top-width, border-right-width, border- bottom-width und border-left-width |
border-style: | Rahmenart bestimmen folgende Möglichkeiten gibt es: solid = durchgezogen double = doppelt none = kein Rahmen (unsichtbar) hidden = kein Rahmen (unsichtbar) dotted = gepunktet dashed = gestrichelt groove = 3D-Effekt ridge = 3D-Effekt inset = 3D-Effekt outset = 3D-Effekt Soll nur ein Teil des Rahmen definiert werden, dann: border-top-style, border-right-style, border-bottom-style und border-left-style |
Ausrichtung von Elementen (CSS)
float: | Horizontale Ausrichtung von Elementen, betrifft auch Blockelemente!! Die sonst nachstehenden Elemente fließen daneben. Mögliche Werte: left | right | none |
text-align: | Horizontale Ausrichtung, möglich Werte: left | center | right | justify |
vertical-align: | Vertikale Ausrichtung mögliche Werte: top = oben bündig middle = mittig bottom = unten bündig baseline = ausrichten an Basislinie falls vorhanden, ansonsten unten bündig sub = tieferstellen (ohne Änderung der Schriftgröße) super = höherstellen (ohne Änderung der Schriftgröße) text-bottom = am unteren Schriftrand |
Abstände (CSS)
margin: |
Abstand zum nächsten Element: kann auch für jede Seite einzeln angegeben werden: |
padding: |
Innenabstand zum Rand: kann auch für jede Seite einzeln angeben werden: |
Weiten, Höhen-Angaben (CSS)
width: | Breite in: px, em, Prozent, auto |
height: | Höhe in: px, em, Prozent, auto |
Hintergrundbilder
background-image: url("hintergrund.jpg"); | Hintergrundbild, anstatt hintergrund.jpg den Pfad und den Namen des gewünschten Bildes angeben |
background-repeat: | Verhaltensweise des Bilds - ob es nur einmal angezeigt oder wiederholt wird. Mögliche Werte: repeat = wiederholen (Standard) repeat-y = nur in Y-Richtung, also senkrecht wiederholen repeat-x = nur in X-Richtung, also waagerecht wiederholen no-repeat = nicht wiederholen, nur einmal anzeigen |
background-position: | erster Wert für Horizontale, zweiter Wert für Vertikale erster Wert: left center right zweiter Wert: top center bottom Der erste Wert bestimmt die horizontale und der zweite Wert die vertikale Position. Es können auch Pixelangaben erfolgen, Die Grafik wird 100px von links und 20px von oben platziert. Das geht auch mit Prozentangaben (auch in gemischter Form): background-position: 55px 50%; |
background-attachment: | fixed oder scroll Hintergrundbild fixieren. Die Bilder bleiben dann an Ort und Stellen, wenn gescrollt wird. Standard ist die Angabe „scroll“ |
Kurzschreibweisen
Für einige CSS-Formate gibt es die Möglichkeit, diese in einer Kurzschreibweise zusammenzufassen. Dadurch wird es übersichtlicher und weniger Code.
Kurzschreibweise in Form von Beispielen
border:1px solid red; | Rahmen: border-width border-style border-color; |
background: #ff00ee url(bild.jpg) fixed no-repeat right top; | background-color: #ff00ee; background-image: url(bild.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: right top; |
padding: 35px 30px 20px 15px; | Leserichtung wie bei Uhr (oben, rechts, unten, links) Kurzschreibweise für: padding-top: 35px; padding-right: 30px; padding-bottom: 20px; padding-left: 15px; |
padding: 35px 18px; | Wenn oben und unten gleich sind (wie auch rechts und links) Kurzschreibweise für: padding-top: 35px; padding-right: 18px; padding-bottom: 35px; padding-left: 18px; |
padding: 8px; | Wenn alle 4 Seiten gleich sind Kurzschreibweise für: padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; |
margin: | Desselbe wie bei padding |
font: | font-size und font-family sind Pflichtangaben, wobei die font-family immer die letzte Angabe ist. font: 12pt Arial, sans-serif; wenn auch die line-height mitgegeben wird, dann wird diese mit / von der Schriftgrößte getrennt: font:12pt/1.6em serif; |
Pseudoklassen
Folgende Formate werden verwendet, damit ein Feedback bei Links erreicht werden kann. Sehr wichtig ist die Reihenfolge (Faustformel dazu: LoVe HAte – dazu sollte man den Film Rosenkrieg gesehen haben)
Beispiel mit CSS-Code:
a:visited { color:black; text-decoration:line-through; } Einen bereits vom Nutzer besuchter Link
a:focus { color:green; text-decoration:overline; } Den Zustand von focus erreicht man, wenn man über die TAB-Taste (öfters drücken) zu einem Link wandert. Dieser kann dann mit der Return gewählt werden.
a:hover { color:red; text-decoration:overline; } Mit der Maus über einen Link fahren
a:active { color:orange; text-decoration:underline; } Gerade aktiver Link
Im HTML-Code dann
<div id="navi">
<ul>
<li><a href="/index.htm">Startseite</a></li> <li><a href="/ueber-mich.htm">Über mich</a></li>
<li><a href="/termine.htm">Termine</a></li>
<li><a href="/impressum.htm">Impressum</a></li>
</ul>
</div>
Absolute/relative Positionierung
position: | Art der Positionierung: relative | static | fixed | absolute; |
position: absolute; | weiter notwendige Angaben left | right top | bottom width height |
z-index: | Beispiel: z-index: 1; Reihenfolge der Elemente (wird oft bei absolut positionierten Elementen benötigt) Je höher die Nummer, desto weiter im Vordergrund |
CSS3: abgerundete Ecken
border-radius: Xpx , Ypx; | Zum abrunden von Ecken – ist nur 1 Wert angegeben, gilt dieser für X und Y
|
border-top-left-radius: border-top-right-radius: border-bottom-left-radius: border-bottom-right-radius: |
Für jede Ecke einzeln definierbar |
border-radius: 40px; -moz-border-radius: 40px; -webkit-border-radius: 40px; Besonderheiten Firefox: -moz-border-radius-topleft: 40px; -moz-border-radius-topright: 40px; -moz-border-radius-bottomleft: 40px; -moz-border-radius-bottomright: 40px; |
für verschiedene Browser
Besonderheiten Webkit-Browser: -webkit-border-radius: 40px 30px; |
CSS3: Schatten bei Text
text-shadow: Xpx Ypx Schattenverlauf Farbe; | Beispiel: text-shadow: 1px 1px 1px orange; |
text-shadow: -3px -3px 3px green, 3px 5px 6px red; | Mehrfarbiger Schatten |