1


	Einführung
-	Startseite
-	Zum Buch
-	Konventionen
-	Impressum

	Internet
-	Das Internet
-	Geschichte des Internets
-	Internet-Dienste
-	Internet-Organisationen

	Site-Management
-	Promotion
-	Erfolgskontrolle
-	Relaunch
-	Kommunikation
-	Community-Strategien

	Design-Theorie
-	Designtheorie - Einführung
-	Farben
-	Textgestaltung
-	Site-Strukturen und Navigation
-	Zielgruppenorientiertes Design
-	Usability

	Web-Sprachen
-	Einführung
-	HTML-Tutorial
-	HTML-Tags
-	XHTML-Tags
-	JavaScript-Tutorial
-	DHTML
-	JavaScript-Know-How
-	CSS-Tutorial
-	SSI

	Design-Praxis
-	Einleitung
-	Arbeitsmittel
-	Tabellen
-	Frames
-	Textgestaltung
-	Formular-Gestaltung
-	Navigation
-	Sitemaps
-	Webrides
-	Browserkompatibiltät
-	Ladezeiten-Optimierung

	Technik I
-	Einleitung
-	Datenbanken und SQL
-	Perl/CGI-Tutorial
-	PHP-Einführung

	Technik II
-	Einleitung
-	Perl-Scripts konfigurieren
-	Formulare verschicken
-	Ein Forensystem installieren
-	Redaktionssystem
-	Session-Management mit Perl
-	Newsletter-Verwaltung

4.8 CSS-Tutorial

Druck-Version | Startseite| Kontakt | AboutWebDesign.de

Inhaltsverzeichnis "CSS-Tutorial"

4.8.1 Einführung
4.8.2 Voraussetzungen
4.8.3 Einbindung und Grundsätzliches
4.8.3.1 Alternativen
4.8.3.2 CSS-Definition
4.8.3.2.1 ... im style-Abschnitt
4.8.3.2.2 ... in einer externen Datei
4.8.3.2.3 ... als Tag-Attribut
4.8.3.3 Syntax
4.8.3.3.1 Identifier
4.8.3.3.2 Nachfolgende Layout-Anweisungen
4.8.4 Schriftformatierung
4.8.4.1 CSS für Textabschnitte
4.8.4.2 Schriftart
4.8.4.3 Schriftgröße
4.8.4.4 Schriftfarbe
4.8.4.5 Schriftstil
4.8.4.6 Schriftgewicht
4.8.4.7 Wort- , Zeilen- und Zeichenabstand
4.8.4.8 Text-Dekoration
4.8.4.9 Transformationen
4.8.5 Positionierung
4.8.5.1 Das pixelgenaue Layout
4.8.5.2 Layer
4.8.5.3 Arten der Positionierung
4.8.5.4 Positionierung
4.8.5.5 Breite/Höhe
4.8.5.6 Abstände
4.8.5.7 Sichtbarkeit
4.8.5.8 Überlappende Elemente

Partnerprogramm

4.8.1 Einführung

CSS (Cascading Style Sheets) sind eine wichtige Technologie im WWW: das W3C empfiehlt sogar, völlig auf font-Tags zu verzichten und Schriften künftig nur noch mit Style Sheets zu formatieren. Das macht Sinn: HTML ist eigentlich eine Sprache zur logischen Kennzeichnung von Textbereichen. Mit CSS kann HTML dieser Anforderung endlich gerecht werden. Zusätzlich dazu sind CSS zumindest in der Theorie (Browser-)übergreifend kompatibel. In der Realität jedoch werden gerade die etwas komplizierteren Angaben nicht ganz richtig interpretiert, obwohl die Browserhersteller hier Besserung geloben.

Daher ist es nur selbstverständlich, dass ein fortgeschrittener Webmaster bzw. Webdesigner CSS zumindest in Grundzügen verstehen muss: dafür gibt es dieses Tutorial. Es behandelt die grundsätzliche Einbindung, Schriftformatierung und Positionierung.

Nach oben

4.8.2 Voraussetzungen

Ein aktueller Browser ist Voraussetzung, wenn CSS eingesetzt bzw. angezeigt werden sollen. Für das Codieren von CSS reicht ein normaler Texteditor.

Nach oben

4.8.3 Einbindung und Grundsätzliches

4.8.3.1 Alternativen

Es gibt verschiedene Möglichkeiten, Style Sheets zu verwenden. Zunächst jedoch ein wenig Theorie. Mit CSS ist es möglich, Layout-Eigenschaften für

ein einzelnes Element, z.B. die erste Überschrift einer Seite, zu definieren

eine Klasse von Elementen, also z.B. alle Überschriften einer Seite, zu definieren

eine allgemeine Klasse zu definieren, die keinem spezifischen Element (oder Tag) zugeordnet werden kann. Die Eigenschaften dieser Klasse können dann im Code einzelnen Elementen zugewiesen werden, z.B. einer Überschrift und einem Textabschnitt

4.8.3.2 CSS-Definition

CSS-Definitionen kommen an drei verschiedenen Positionen vor: ausgelagert in einer externen Datei, im <style>-Abschnitt einer HTML-Datei oder direkt als Tag-Attribut. Logisch, dass sich letzteres dann nur auf das entsprechende Tag auswirkt.

4.8.3.2.1 ... im style-Abschnitt

So bindet man die CSS-Definitionen direkt ein:



        <HTML>

            <HEAD>

                <STYLE type="text/css">

                <!--

                B { font-family: Verdana; font-color: green;}

                -->

                </STYLE>

            </HEAD>

        ...

4.8.3.2.2 ... in einer externen Datei

Will man die CSS-Definitionen auslagern, verwendet man diese Syntax:



        <HTML>

            <HEAD>

                <LINK rel="stylesheet" type="text/css" href="standard.css">

            </HEAD>

        ...

Die Datei standard.css könnte dann z.B. das hier enthalten:

B { font-family: Verdana; font-color: green;}

4.8.3.2.3 ... als Tag-Attribut

So wird einem einzelnen Tag eine CSS-Definition zugewiesen:

<b style="font-family: Verdana; font-color: green;">Irgendein Text</b>

Wie oben schon erwähnt, wirkt sich solch eine Definition nur auf das aktuelle Tag aus. Würde darunter z.B. ein anderes <b>-Tag stehen, hätte die aktuelle Definition keine Auswirkungen auf das untenstehende Tag.

Diese Definitionsform wird auch Inline-Notation genannt.

4.8.3.3 Syntax

CSS-Definitionen bestehen (fast) immer aus zwei Teilen: einem Identifier bzw. Bezeichner und den dahinter folgenden Layout-Anweisungen:

B { font-family: Verdana; font-color: green;}

B ist hier der Bezeichner, die geschweiften Klammern und das darin stehende definieren das Aussehen.

Wenn CSS direkt als Tag-Attribut angegeben werden, fällt der Identifier weg, denn dann beziehen sich die Layout-Anweisungen immer auf ein Tag.

4.8.3.3.1 Identifier

Will man ein Tag umdefinieren, nimmt man das Tag als Identifier. Beispiele:

B { font-family: Verdana; font-color: green;}

TD { font-family: Arial; font-color: black;}

Will man dagegen eine "allgemeingültige" Layout-Klasse erstellen, sucht man sich einen praktisch beliebigen Namen aus und stellt den Punkt davor:

.gruen {font-color: green;}

.grossertext { font-size: 40pt;}

Und so verwendet man die Klasse bei einem Tag:



        <b class="gruen">Das ist ein grüner Text!</b>

        <b class="grossertext">Ein grosses A</b>

Ohne Identifiert geht es so:

<b style="font-color: green;">Das ist ein grüner Text!</b>

4.8.3.3.2 Nachfolgende Layout-Anweisungen

Die Layout-Anweisungen werden von geschweiften Klammern umschlossen, außer, man verwendet die Inline-Notation.

Layout-Anweisungen bestehen aus einer Liste von Attributangaben. Eine Attributangabe wird immer mit dem Strichpunkt abgeschlossen und besteht aus dem Namen des Attributs und dem zugehörigen Wert.

Nach oben

4.8.4 Schriftformatierung

4.8.4.1 CSS für Textabschnitte

Um CSS für bestimmte Textabschnitte zu verwenden, ohne dabei das FONT-Tag zu benutzen, gibt es das span-Tag:

<span class="meincss">Formatierter Text</span>

4.8.4.2 Schriftart

Die Schriftart wird mit dem font-family-Attribut definiert.

Beispiel:

<span style="font-family: Verdana, Arial;">Formatierter Text</span>

4.8.4.3 Schriftgröße

Das Attribut font-size bestimmt die Schriftgröße. Hier sind numerische Angaben erlaubt, also z.B. 10 pt (pt = Punkt). Alternativ dazu gibt es auch die Möglichkeit, die Schriftgröße zu beschreiben, z.B. mit small, medium oder large.

Beispiele:

<span style="font-size: 10 pt;">Formatierter Text</span>

<span style="font-size: small;">Formatierter Text</span>

4.8.4.4 Schriftfarbe

Das color-Attribut definiert die Schriftfarbe.

Beispiele:

<span style="color: green;">Grüner Text</span>

<span style="color: #000000;">Schwarzer Text</span>

4.8.4.5 Schriftstil

Der Schriftstil (font-style) definiert, ob der Text kursiv oder normal ausgegeben wird. Erlaubt sind hier italic und normal.

Beispiel:

<span style="font-style: italic;">Kursiver Text</span>

4.8.4.6 Schriftgewicht

Das Attribut font-weight definiert, wie "fett" ein Text ausgegeben wird. Erlaubt sind hier bold, bolder und light sowie Zahlenwerte zwischen 100 (dünn) und 900 (sehr fett).

Beispiel:

<span style="font-weight: bold;">Fetter Text</span>

4.8.4.7 Wort- , Zeilen- und Zeichenabstand

word-spacing, line-height und letter-spacing definieren, welchen Abstand zwei Wörter, zwei Zeilen und zwei Buchstaben voneinander haben.

Beispiel:

<span style="word-spacing: 10px;">10 Pixel Abstand...</span>

<span style="line-height: 100px;">100 Pixel Abstand...<br>Mehr Abstand!</span>

4.8.4.8 Text-Dekoration

Mit dem Attribut text-decoration lässt sich ein Text z.B. unterstreichen. Erlaubt sind hier underline (unterstrichen), overline (überstrichen, wird vom NN 4 nicht interpretiert), line-through (durchgestrichen), blink (blinkend, wird vom IE nicht interpretiert) und none (nichts).

Beispiel:

<span style="text-decoration: underline;">Unterstrichener Text</span>

4.8.4.9 Transformationen

Das Attribut text-transform kann verwendet werden, um Groß-/Kleinschreibung zu verändern. Erlaubt sind hier capitalize (Wortanfänge groß geschrieben), uppercase (alles groß geschrieben), lowercase (alles klein geschrieben) und none (keine Veränderung).

Beispiel:

<span style="text-transform: uppercase;">nur großbuchstaben</span>

Nach oben

4.8.5 Positionierung

4.8.5.1 Das pixelgenaue Layout

Mit Style Sheets wird endlich der Traum des pixelgenauen Layouts wahr - wenn man will. In diesem Abschnitt geht es also um verschiedene Arten der Positionierung.

4.8.5.2 Layer

Zusammen mit CSS kam das neue Tag <div>, das einen Layer bzw. eine Ebene definiert, also einen vom Rest der Seite abgegrenzten Bereich. Dieses Tag sollte grundsätzlich verwendet werden, um Elemente mit CSS genau auszurichten.

Beispiel:



        <div>

        Diese Tabelle wird jetzt gleich ausgerichtet

        <table><tr><td>ausgerichtet</td></tr></table>

        </div>

4.8.5.3 Arten der Positionierung

Es gibt verschiedene Arten der Positionierung. Die Bedeutung der Werte für position:

absolute: absolut, scrollbar

fixed: absolut, nicht scrollbar

relative: relativ, ausgehend vom letzten Element

static: der Normalzustand

Beispiel:



        <div style="position: absolute;">

        Text

        </div>

4.8.5.4 Positionierung

Elemente werden positioniert, indem man ihren Abstand zu einem der Ränder des Browserfensters angibt. Dafür sind die Attribute top (vom oberen Rand), left (vom linken Rand), right (vom rechten Rand) und bottom (vom unteren Rand) vorgesehen.

Beachten Sie, dass normalerweise nur left und top verwendet werden.



        <div style="position:absolute;left: 20px; top:300px;">

        Text

        </div>

4.8.5.5 Breite/Höhe

Um Objekte genau definierter Größe verwenden zu können, gibt es die Attribute height (Höhe) und width (Breite).



        <div style="height: 20px; width: 100px;">

        Text

        </div>

4.8.5.6 Abstände

Manchmal will man festlegen, dass ein Objekt einen bestimmten Abstand zum nächsten Objekt haben soll. Dafür gibt es das Attribut margin, das den generellen Seitenabstand festlegt. Wenn Sie für die vier Seiten unterschiedliche Abstände festlegen wollen, können Sie auch margin-top, margin-bottom, margin-left und margin-right verwenden.



        <p>

        Text1

        </p>

        <p style="margin-top: 30px;">

        Text2

        </p>

4.8.5.7 Sichtbarkeit

Mit CSS ist es möglich, ein Objekt als "unsichtbar" zu markieren. Verwenden Sie dafür das Attribut visibility. Erlaubt sind hier die Werte visible und hidden.



        <div style="visibility:hidden;">

        Versteckter Text

        </div>

4.8.5.8 Überlappende Elemente

Selbstverständlich können einzelne Elemente bzw. Layer sich überlappen, also über- oder untereinander liegen. Um zu steuern, welche Elemente ganz oben bzw. unten liegen, gibt es das Attribut z-index. Erlaubt sind numerische Werte, je höher der Wert, desto weiter oben liegt das Objekt.



        <div style="z-index: 1;">

            Text

        </div>

Nach oben

Partnerseite: Informationen zu HTML bei HTMLWorld.de.