Neue Gestaltungsmöglichkeiten

Übersicht: Neue Gestaltungmöglichkeiten

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

Schriftgestaltung

font-family: Hier kann eine Schriftenkategorie oder auch eine konkrete Schriftart angegeben werden. Diese wird dann entsprechend der Verfügbarkeit und Konfiguration des Browsers auf eine Systemschriftart abgebildet. Mögliche Schriftenkategorien sind serif, sans-serif, cursive, fantasy, und monospace. Durch Angabe mehrerer Werte (durch Komma getrennt) kann man Alternativen bereitstellen.

• font-size: Die Größe des Zeichensatzes kann entweder relativ zum Vaterelement oder in absoluter Größe angegeben werden. Relative Angaben können entweder durch eine der Konstanten xx-small ... xx-large, durch larger, smaller oder durch eine Prozentangabe geschehen, absolute Angaben sind z. B. in pt oder mm möglich.

• font-weight: Für die Schriftstärke stehen die Konstanten normal, bold, bolder, lighter oder ein Wert zwischen 100 und 900 (normal = 400) zur Auswahl.

 
• font-style: Schräggestellte Schrift kann durch italic (kursiv) oder oblique (geneigt) erzeugt werden.

 
• font-variant: Unter der Verwendung des Schlüsselwortes small-caps wird der Text kapitalisiert dargestellt.

 
• @font-face: Falls gewünschte Schriftarten nicht auf dem Zielsystem zur Verfügung stehen, ist es mit der @font-face- Angabe möglich, diese zur Laufzeit aus dem Netz zu laden. Obwohl hier alle gängigen Schrifttypen verwendbar sind ist jeodch zu berücksichtigen, daß die meisten Typen plattformabhängig sind und das Laden einer Schrift das Anzeigen der Seite erheblich verzögern kann.
  <STYLE>
      @font-face {
                 font-family: "Robson Celtic"
                 src: url("http://www.freefonts.org/fonts/rob-celt")
                 }
      H1 {font-family: "Robson Celtic", serif}
  </STYLE>

Textgestaltung

• word-spacing: Die Größe der Wortzwischenräume kann entweder durch normal oder einen absoluter Wert, der auf den Standardwert addiert wird, angegeben wird

• letter-spacing: in gleicher Weise kann auch die Größe der Zeichenabstände eingestellt werden, um Text zu sperren oder zu stauchen.

• text-align: horizontale Ausrichtung des Textes: 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 Ausrichtung: top, bottom, baseline, middle, sub, super, text-top, text-bottom

• text-decoration: Diverse Texteffekte sind durch  underline, overline, line-through und blink möglich. Durch none können die Texteffekte explizit unterdrückt werden (um z. B. das Unterstreichen von Links zu verhindern)

 
• text-transform: Diese Eigenschaft steuert die Einstellung der Groß- und Kleinschrift. Folgende Konstanten sind erlaubt: capitalize (Erster Buchstabe im Wort groß, der Rest klein), uppercase (nur Großbuchstaben), lowercase (nur Kleinbuchstaben)

• text-indent: Die erste Zeile eines Textblockes kann um einen absoluten Wert oder einer Prozentangabe eingerückt werden. Bei einem negativen Wert reicht die erste Zeile links über den Textblock hinaus.

Farben und Hintergründe

• color: beschreibt die 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: beschreibt den Hintergrund eines Elements. Es 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.

Pseudo-Klassen und -Elemente

• :fist-letter: Hiermit kann das erste Zeichen eines Absatzes angesprochen werden, um ein großes Kapitälchen über mehrere Zeilen am Absatzbeginn zu erzeugen:

P:first-letter {font-size: 200%}

• :fist-line: Der ersten Zeile eines Textabschnittes können besondere Attribute zugeordnet werden.

 
• Hyperlinks: Das Aussehen von Hyperlinks kann ihrem Zustand entsprechend definiert werden:

A:link {color: red; text-decoration: none}
A:visited {color: dark-red; text-decoration: none}
A:active {color: orange; text-decoration: none}

• :before, :after:  Es ist möglich, vor oder nach einem HTML-Tag bestimmten Text anzeigen zu lassen. Durch weitere Eigenschaften ist es beispielsweise möglich, automatisch durchnumerierte Gliederungen zu erstellen.

H1:before {
          content: counter(kapitel) ". ";
          counter-increment: chapter;
          counter-reset: sektion
          }
H2:before {
          content: counter(kapitel) "." counter(sektion) " ";
          counter-increment: sektion;
          }

Das Boxing-Konzept

Positionierung

Auflistungen

UL.spezial {list-style-image: "ball.gif"; list-style-position: outside}