Neue Gestaltungsmöglichkeiten

Übersicht: Neue Gestaltungmöglichkeiten

• Schriftgestaltung
• Textgestaltung
• Farben und Hintergründe
• Pseudo-Klassen und -Elemente
• Das Boxing-Konzept
• Positionierung
• Auflistungen

[Originalseite zu den Beispielen]

Schriftgestaltung

• font-family: Schriftenkategorie oder konkrete Schriftart
  Mögliche Schriftenkategorien sind serif, sans-serif, cursive, fantasy, und monospace.
  Durch Angabe mehrerer Werte (durch Komma getrennt) kann man Alternativen bereitstellen.
   
• font-size: Schriftgröße relativ zum Mutterelement oder in absoluter Größe
  Relative Angaben durch eine der Konstanten xx-small ... xx-large, durch larger, smaller oder durch Prozentangabe
  Absolute Angaben z. B. in pt oder mm
   
• font-weight: Schriftstärke
  Konstanten normal, bold, bolder, lighter oder ein Wert zwischen 100 und 900
   
• font-style: Schräggestellte Schrift
  italic (kursiv) oder oblique (geneigt)
   
• font-variant: Schriftvariation
  Mit small-caps wird der Text kapitalisiert dargestellt.
   
• @font-face: Laden von Schriftarten, die nicht auf dem Zielsystem verfügbar sind
  <STYLE>
     @font-face {
                font-family: "Robson Celtic"
                src: url("http://www.freefonts.org/fonts/rob-celt")
                }
     H1 {font-family: "Robson Celtic", serif}
  </STYLE>

[StyleSheet]  [Beispiel]

Textgestaltung

• word-spacing: Größe der Wortzwischenräume
  Ein angegebener Wert wird auf den Standardwert addiert


• letter-spacing: Größe der Zeichenabstände um Text zu sperren oder zu stauchen
  Ein angegebener Wert wird auf den Standardwert addiert


• line-height: Zeilensabstand


• text-align: horizontale Textausrichtung
  left, right, center, justify
  Für die Darstellung von Zahlenspalten kann der Text auch an einem bestimmten Zeichen ausgerichtet werden.
  {text-align: "."}


• vertical-align: vertikale Textausrichtung
  top, bottom, baseline, middle, sub, super, text-top, text-bottom
   
• text-decoration: Diverse Texteffekte underline, overline, line-through,blink, none
  Durch none können Texteffekte explizit unterdrückt werden (z.B. unterstrichene Links)
   
• text-transform: Groß- und Kleinschrift
  capitalize (Erster Buchstabe im Wort groß, der Rest klein), uppercase (nur Großbuchstaben), lowercase (nur Kleinbuchstaben)
   
• text-indent: Einrücken der erste Zeile eines Textblockes
  Absoluter Wert oder einer Prozentangabe
  Bei einem negativen Wert reicht die erste Zeile links über den Textblock hinaus

[StyleSheet]  [Beispiel]

Farben und Hintergründe

• color: Farbe des Textes innerhalb eines Elements
  Erlaubt ist entweder ein Schlüsselwort (red, green, ...) oder die direkte Farbangabe in folgender Form:
  color: #f00                  /* #rgb# */
  color: #ff0000               /* #rrggbb# */
  color: rgb(255,0,0)          /* Wertebereich 0-255 */
  color: rgb(100%, 0%, 0%)     /*Prozentangaben 0 - 100%*/
   
• background: Hintergrund eines Elements
  Faßt die Attribute background-color, background-image, background-repeat, background-attachment sowie background-position zusammen, um Positionierung, Farbe oder Aussehen einer Hintergrundgrafik zu spezifizieren.

[StyleSheet]   [Beispiel]

Pseudo-Klassen und -Elemente

• :fist-letter: Erstes Zeichen eines Absatzes
  Erzeugung eines großes Kapitälchen über mehrere Zeilen am Absatzbeginn
  P:first-letter {font-size: 200%}
   
• :fist-line: Ersten Zeile eines Absatzes
   
• Aussehen von <A>-Elementen (Hyperlinks)

A:link {color: red; text-decoration: none}
A:visited {color: dark-red; text-decoration: none}
A:active {color: orange; text-decoration: none}
 
• :before, :after:  Text vor oder nach einem HTML-Element
   z. B.  für automatisch durchnumerierte Gliederung
  H1:before {
           content: counter(kapitel) ". ";
           counter-increment: chapter;
           counter-reset: sektion
           }
  H2:before {
           content: counter(kapitel) "." counter(sektion) " ";
           counter-increment: sektion;
           }

[StyleSheet]  [Beispiel]

Das Boxing-Konzept

• Jedes HTML-Element wird von CSS wie eine Box behandelt
   
• Eigener Hintergrund, Rand und Rahmen
   
• padding:  Bereich zwischen Inhalt und Umrandung, nimmt die Hintergrundfarbe oder Textur des Elements an
   
• border: Umrandung des Elementes, vielfältige Einstellmöglichkeiten für Breite, Farbe,...
   
• margin: Unsichtbarer Randabstand zu anderen Elementen
   
• height und width: Höhe und Breite der Box

[StyleSheet]  [Beispiel]

Positionierung

• Jedes HTML-Element ist durch die Eigenschaften left, top, right und bottom frei positionierbar
   
• position: Art der Positionierung (absolute, relative, fixed)
   
• position : absolute: Koordinaten beziehen sich auf das Mutterelement.
  Ist es direkt in das <BODY>-Element eingebunden, so beziehen sich die Koordinaten also auf die gesamte Seite
   
• position : relative: Das Element wird an den Textfluß des übergeordneten Elementes angehängt und entsprechend eingepaßt.
   
• position : fixed: Element wird über Bildschirmkoordinaten positioniert und bleibt auch an seiner Position, wenn der Bildschirm nach unten gescrollt wird.
  z.B. für die Nachbildung von Frames
   
• Kommt es zu einer Überlagerung von mehreren Elemente, so kann über die Eigenschaft z-index festgelegt werden, welches Element welches verdeckt.

[StyleSheet]  [Beispiel]

Auflistungen

• list-style-type: Element, das vor der Zeile stehen soll (Symbole: square, circle, disc oder Zahlen: decimal, upper-roman,...)
   
• list-style-position: Festlegung, ob mehrzeiliger Text eingerückt werden oder um das Symbol herum fließen soll
   
• list-style-image: Beliebiges Bildelement als Symbol
  UL.spezial {list-style-image: "ball.gif"; list-style-position: outside}

[StyleSheet]  [Beispiel]