Attribute

Übersicht CSS-Attribute

Attributart	Attribute
Schriftformatierung	Schriftart, -stil, -größe, -gewicht, -farbe …
Absatzformatierung	Texteinrückung und -ausrichtung, Zeilenhöhe und -umbruch
Außenrandabstand	Außenabstand Elementrand zu Nachbarelementen
Innenabstand	Innenabstand Elementinhalt zu Elementrand
Rahmen	Rahmentyp, -dicke und -farbe
Hintergrund	Hintergrundfarben und -bilder
Listenformatierung	Listentyp, -symbol und Einrückung
Tabellenformatierung	Tabellengröße, -rahmen, -zellen
Positionierung	Position, Größe und Anzeigeart von Elementen

Block- und Inline-Elemente

• Block-Elemente
• Erzeugen einen Absatz
• Haben eine Box
• Beispiele: address, blockquote, div, dl, fieldset, form, h1-h6, hr, pt, ol, p, pre, table, ul
• Inline-Elemente
• Erzeugen keinen Absatz, fließen im Text mit
• Haben keine Box
• Beispiele: a, abbr, acronym, b, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var

Das Box-Modell

CSS organisiert die Block-Elemente mithilfe von Boxen

Box-Modell

Randangaben für die Box

Ränder für die Box können per CSS festgelegt werden

• padding: Innenabstand
• border: Breite des Rahmens
• margin: Außenabstand

Die vier Seiten können einzeln adressiert werden

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

Beispiel: HTML-Datei für Boxen

<p class="boxed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo.</p>

Beispiel: Box

width: 500px;
padding: 35px;
margin: 80px;
border: #353d2d;
border-right: 15px solid;
border-left: 5px solid;
background-color: #e3e3e3;

CSS Box

Kurzschrift für Randangaben

Statt die vier Seiten der Box explizit anzusprechen, kann man auch eine Kurzform verwenden

• Angaben werden beginnend bei top im Uhrzeigersinn notiert
• zwei Angaben: top und bottom
• drei Angaben: für top, left/right und bottom

padding: 5px 10px 15px 25px;

/* entspricht /*

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 25px;

Elementgröße

• Angabe der gewünschten Größe
• width: Breite
• height: Höhe
• Angabe der maximalen und minimalen Größe
• min-width, max-width: minimale und maximale Breite
• min-height, max-height: minimale und maximale Höhe

• overflow: Was passiert, wenn Inhalt nicht zur Größe passt
• visible : Inhalt ragt über den Rand hinaus
• hidden : Inhalt wird am Rand abgeschnitten
• scroll: Inhalt wird verborgen, es gibt aber Scrollbalken
• auto: Browser entscheidet, wo Scrollbalken benötigt werden

Beispiel: Behandlung von Overflow

overflow: visible;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: hidden;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: scroll;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: auto;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Beispiel: Overflow

overflow: visible; /* visible | hidden | scroll | auto */
border: 5px solid;
border-color: olive;
width: 600px;
max-height: 140px;
font-size: 20pt;}

Anzeigeart

• display: legt fest, wie ein Element angezeigt wird
• none: nicht anzeigen und auch keinen Platz dafür freihalten
• inline: im laufenden Textfluss anzeigen
• block: Block erzwingen, d. h. in neuer Zeile anzeigen
• list-item: wie block, aber mit Aufzählungszeichen davor
• run-in: kontextabhängig als block oder inline darstellen
• visibility: legt fest, ob ein Element angezeigt wird
• hidden: nicht anzeigen. Platz wird aber freigehalten
• visible: anzeigen, Default

Beispiel: display

display: inline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

display: block

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

display: none

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

display: inline; /* inline | block | none */
color: red;

Rahmen-Design

• border-color: Rahmenfarbe
• Einschränkung auf Seite über border-top-color, border-left-color …
• border-style: Rahmenstil
• none: kein Rahmen
• dotted : gepunktet
• dashed: gestrichelt
• solid: durchgezogen
• double: doppelt durchgezogen
• inset, outset: 3D-Effekt eingedrückt bzw. hervorstehend
• Einschränkung auf Seite über border-top-style, border-left-style …

Beispiel: Rahmen-Design

.borderexample {
  border-width: 8px;
  border-style: solid;
  width: 200px;
  height: 200px;
}

Schriftformatierung

• font-family: Liste (kommagetrennt) von Zeichensätzen
• Angabe einer konkreten Schrift (z. B. Helvetica, Times New Roman)
• oder einer Schriftfamilie (z. B. serif, sans-serif, monospace)
• mehrere Angaben können gemacht werden, passende wird gewählt
• font-style: Schriftstil
• normal: normal
• italic: kursiv
• oblique: schräggestellt
• font-size: Schriftgröße
• color: Textfarbe

• font-weight: Schriftgewicht
• lighter: fein
• normal: normal
• bold: fett
• bolder: extra fett

• text-decoration: Textdekoration
• none: keine
• underline: unterstrichen
• overline: überstrichen
• line-through: durchgestrichen
• blink: blinkend (bitte nicht!)

Absatzformatierung

horizontale Formatierung

• text-indent: Erste Zeile eines Textes einrücken
• negative Werte definieren eine Ausrückung
• text-align: Horizontale Textausrichtung
• left: linksbündig
• center: zentriert
• right: rechtsbündig
• justify: Blocksatz

Beispiel: Absatzformatierung

horizontale Formatierung

Linksbündig: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Zentriert: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Rechtsbündig: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Blocksatz: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Absatzformatierung

vertikale Formatierung

• vertical-align: vertikale Textausrichtung
• top: oben ausrichten
• middle: mittig ausrichten
• bottom: unten ausrichten
• sub: tiefstellen, ohne Schriftgröße zu reduzieren
• super: hochstellen, ohne Schriftgröße zu reduzieren

Beispiel: Absatzformatierung

vertikale Formatierung

top

middle

bottom

Normaler Text tiefgestellt Normaler Text.

Normaler Text hochgestellt Normaler Text.

Absatzformatierung

• white-space: Zeilenumbruch steuern
• pre: Zeilenumbrüche wie im HTML-Quelltext (preformatted)
• pre-wrap: wie pre jedoch automatischer Umbruch am Rand
• nowrap: kein automatischer Zeilenumbruch
• normal: automatischer Zeilenumbruch

Beispiel: Absatzformatierung

.whitespaceexample {
  white-space: pre; /* pre-wrap | nowrap | normal */
}

Hintergrund

• background-color: Hintergrundfarbe
• background-image: Hintergrundbild
• background-repeat: Wiederholen des Hintergrundbilds
• repeat: Wiederholen in X- und Y-Richtung (Standardwert)
• repeat-x: Wiederholen nur in X-Richtung
• repeat-y: Wiederholen nur in Y-Richtung
• no-repeat: Keine Wiederholung
• background-position: Position des Bildes (bei no-repeat)
• horizontale Ausrichtung: top, bottom, center
• vertikale Ausrichtung: left, right, center

Beispiel: Hintergrund

border: 1px solid;
background-image: url(http://web/slides/result/img/sand.png);
background-repeat: no-repeat;
background-position: center center;
width: 200px;
height: 200px;
background-color: white;

Listenformatierung

• list-style-type: Darstellung für geordnete Listen (ol)
• decimal: arabische Numerierung: 1., 2., 3., 4. …
• lower-roman: römische Kleinbuchstaben: i., ii., iii., iv. …
• upper-roman: römische Großbuchstaben: I., II., III., IV. …
• lower-alpha: Kleinbuchstaben: a., b., c., d. …
• upper-alpha: Großbuchstaben: A., B., C., D. …
• … : weitere Stile für andere Sprachen

• list-style-type: Darstellung für ungeordnete Listen (ul)
• disc: gefüllter Kreis •
• circle: hohler Kreis ○
• square: Quadrat ■
• none: kein Zeichen

Beispiele für Listen-Stile

list-style-type: disc

• Äpfel
• Orangen
• Birnen

list-style-type: circle

• Äpfel
• Orangen
• Birnen

list-style-type: square

• Äpfel
• Orangen
• Birnen

list-style-type: none

• Äpfel
• Orangen
• Birnen

list-style-type: decimal

1. Äpfel
2. Orangen
3. Birnen

list-style-type: lower-roman

1. Äpfel
2. Orangen
3. Birnen

list-style-type: upper-roman

1. Äpfel
2. Orangen
3. Birnen

list-style-type: lower-alpha

1. Äpfel
2. Orangen
3. Birnen

list-style-type: upper-alpha

1. Äpfel
2. Orangen
3. Birnen

list-style-type: lower-greek

1. Äpfel
2. Orangen
3. Birnen

list-style-type: hebrew

1. Äpfel
2. Orangen
3. Birnen

list-style-type: hiragana

1. Äpfel
2. Orangen
3. Birnen

list-style-type: katakana

1. Äpfel
2. Orangen
3. Birnen

list-style-type: georgian

1. Äpfel
2. Orangen
3. Birnen

Listenformatierung

• list-style-image: Grafikdatei für das Aufzählungszeichen
• list-style-position: Einrückung der Aufzählungspunkte
• inside: nicht eingerückt
• outside: eingerückt (Standardwert)

Beispiele für Listenformatierung

list-style-position: inside

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
• Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
• Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

list-style-position: outside

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
• Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
• Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Tabellenformatierung

• table-layout: Bestimmung der Zellenbreite
• auto: Breite orientiert sich am Zelleninhalt
• fixed: Breite folgt dem width-Attribut
• empty-cells: Rahmen um leere Zellen
• show: Rahmen um leere Zellen zeichnen
• hide: Rahmen um leere Zellen unterdrücken
• border-collapse: Rahmen benachbarter Zellen trennen
• collapse: Rahmen benachbarter Zellen fallen zusammen
• separate: Rahmen getrennt um jede Zelle zeichnen (Standard)

Beispiel: Tabellenformatierung

table-layout: auto;        /* auto | fixed */
empty-cells: show;         /* show | hide */
border-collapse: collapse; /* collapse | separate */