Die CSS - Attribute

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
rgb(0, 0, 0) ist z.B. schwarz

Auch transparente Farben sind möglich:
rgba(0, 0, 0, 0.5) ist schwarz zu 50% transparent.

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-top = am oberen Schriftrand

text-bottom = am unteren Schriftrand


Abstände (CSS)
margin:

Abstand zum nächsten Element: kann auch für jede Seite einzeln angegeben werden:
margin-left, margin-right, margin-bottom, margin-top
Werte in px, auto für rechts oder links zentriert

padding:

Innenabstand zum Rand: kann auch für jede Seite einzeln angeben werden:
padding-left, padding-right, padding-bottom, padding-top


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,
z. B. background-position: 100px 20px;

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 { color:blue; text-decoration:none; } Der normale Anzeige für einen Link
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; border-radiusZum 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