HTML mit Cascading Style Sheets aufpolieren

Zaubern mit CSS

Keine Variablen, keine Schleifen, keine Arrays: Mit Cascading Style Sheets (CSS) möbeln Sie Ihre Web-Seiten ohne große Programmierkenntnisse auf. Änderungen im Layout geschehen im Handumdrehen über eine zentrale Datei.

Zu Beginn der 90er Jahre sollte HTML nichts anderes tun, als Text darzustellen und zu verlinken. Die Layout-Funktionen kamen erst später auf Druck der Industrie hinzu. Die Folgen sieht man noch heute: Ellenlange Tabellenkolonnen und überdimensionierte Schriftartendefinitionen. Um einen Text von 100 Zeichen zu layouten, benötigt man etwa die doppelte Menge an HTML-Code.

Um das Problem in den Griff zu bekommen, gab das World Wide Web Consortium (W3C)[1] 1996 die erste Version von CSS frei. CSS kann für jedes HTML-Element, zum Beispiel für einen einzelnen Buchstaben, ein eigenes Layout definieren. Es verändert die Größe des Elements, entwirft einen Rahmen und fügt Abstände hinzu. Hier geht es um die aktuelle Version 2.1, HTML-Kenntnisse setzt der Artikel voraus (Infos zu HTML lesen Sie im Artikel ab Seite 28). Da der Text einen breiten Überblick zu CSS gibt, finden Sie hier nicht sämtliche verfügbaren CSS-Eigenschaften. Das kostenlose Internet-Tutorial SELFHTML und verschiedene CSS-Bücher helfen Ihnen in dieser Frage weiter [2,3,4].

Arbeit sparen, Zeit sparen

Um CSS zu schreiben, benötigen Sie eigentlich nur einen gewöhnlichen Text-Editor. Der KDE-Editor Kate prüft gleich automatisch, ob Sie die Syntax korrekt umgesetzt haben. Notwendig ist das nicht, aber ein nettes Feature – zumal CSS, im Gegensatz zu HTML, bei Syntaxfehlern den Dienst verweigert. Programmierkenntnisse brauchen Sie nicht.

Die Vorteile von CSS verdeutlichen zunächst ein paar Beispiele. Angenommen Sie haben eine HTML-Seite mit einigen Links, deren Farbe Sie im $body§-Tag definieren.

$body link="#000000" alink="↩
#CCCCCC" vlink="#666666"§

Da Sie die Farbe eines einzelnen Links in HTML nicht ändern können, werden sämtliche Links in diesen Farben dargestellt. Mit CSS manipulieren Sie auch einzelne Links ganz unproblematisch:

$a href="http://www.linuxuse↩
r.de" style="color: white; text-↩
decoration: none;"§

Das style-Element beinhaltet die Layout-Eigenschaften für den Link. Der ist nun weiß (color: white;) und nicht mehr unterstrichen (text-decoration: none). CSS kann also Dinge, die HTML nicht kann.

Ein anderes Problem: Sie haben mehrere Seiten Text, der mit Zitaten (blockquote) gespickt ist. Nun wollen Sie die Schriftarten der Zitate ändern. Gewöhnlich öffnen Sie dazu alle HTML-Seiten und nehmen die Änderungen über Suchen und Ersetzen vor. Diese Methode ist nicht besonders effizient. In CSS genügt es, eine Zeile in der zentralen CSS-Datei zu modifizieren.

blockquote {font-family: ↩
Arial, Helvetica, Courier;}

Alle HTML-Dateien, in die das zentrale Style Sheet eingebunden ist, verwenden nun automatisch eine der drei Schriftarten für Zitate. CSS erspart Ihnen in diesem Fall eine Menge Handarbeit. Zugleich erhalten Sie ein Werkzeug, um das Aussehen wiederkehrender Elemente zentral zu definieren und zu ändern. Schließlich dient CSS auch dazu, eine Web-Seite für andere Ausgabemedien zu optimieren. Sie erstellen einfach ein alternatives Style Sheet, das die HTML-Seiten für den Druck optimiert. Sobald ein Nutzer eine Seite ausdrucken möchte, wird das Style Sheet aktiv und entfernt die Menüs und Bilder aus dem Text, vergrößert die Schrift oder ändert die Schriftart.

Was Sie layouttechnisch mit einer gewöhnlichen HTML-Seite anstellen können, beweist eindrucksvoll die Seite Csszengarden [5]. Hier entwerfen Besucher ihre eigenen Style Sheets für ein vorgefertigtes HTML-Dokument. Die Ergebnisse sind verblüffend und zeigen, was mit CSS grafisch möglich ist. Die Funktionalität von CSS 2.1 schöpfen jedoch nur die aktuellen Browser aus. Eine ausführliche Tabelle [6] im Internet listet auf, welche Browser welche CSS-Eigenschaften unterstützen. Das hilft dabei, Ihre Web-Seite auch älteren Browsern zugänglich zu machen.

Rein oder Raus?

Wie aber bauen Sie die Stildefinitionen in Ihren HTML-Code ein? Dafür gibt es drei Möglichkeiten. Eine davon kennen Sie schon: Sie integrieren die Definitionen direkt in die Tags im HTML-Quelltext.

$A href="www.linuxuser.de"↩
 style="color: #FFFFFF; text-↩
 decoration: none;"§ Das ↩
 ist ein Link $/A§

Das Element style kündigt an, dass nun CSS-Code folgt. Die Eigenschaften setzen Sie in Anführungsstriche und trennen Sie durch Semikolons voneinander. Eine zweite Möglichkeit besteht darin, das Layout einer HTML-Seite innerhalb von $style§-Tags zu definieren, die im Header der Seite stehen.

        $head§
                $title§
                        Meine Web-Seite
                $/title§
                        $style type=↩
                        "text/css"§
                        h1 {color: red;}
                        $/style§
        $/head§

Die dritte Methode sieht vor, die Style Sheets in eine eigene Datei auszulagern. Das hat den Vorteil, dass Sie die Style Sheets über einen einzigen Link in die Header der HTML-Seiten einbinden. Dadurch erhalten sämtliche HTML-Seiten ihre Layout-Informationen aus einer einzigen Datei, hier trägt sie den Namen sheet1.css.

        $head§
        $link rel="stylesheet" ↩
type="text/css" href="sheet1.↩
css" title="test" media="↩
screen"§
        $/head§

Um das Aussehen der Web-Seiten zu verändern, müssen Sie nicht jede HTML-Datei einzeln öffnen, sondern modifizieren einfach die eingebundene CSS-Datei.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • XML unter KDE
    Seit ihrer ersten Vorstellung wurde die Extensible Markup Language (XML) als Revolution in der IT-Landschaft gefeiert. Visionäre sahen gar schon das Ende von HTML und des konventionellen Web-Designs gekommen. Zwar hat sich XML inzwischen als wichtiges Datenformat etabliert, doch der Rausch ist vorbei. Es ist ruhiger geworden um XML. Wir zeigen Ihnen, wie Sie unter KDE selbst XML-Dateien erzeugen und bearbeiten können.
  • XML und XSLT
    XML gut und schön – doch ohne formatierte Darstellung ist es nur die Hälfte wert. Der dritte Teil unserer Miniserie beschäftigt sich mit der Ausgabe von XML-Daten mit Hilfe von XSLT.
  • XML-Editor KXMLEditor
    XML wird immer wichtiger – KXMLEditor erleichtert den Umgang mit diesem Datenformat.
  • Leichtathlet
    Der leichtgewichtige Webbrowser Dillo ergänzt ideal schlanke Oberflächen und bringt alle wichtigen Funktionen zum Surfen mit.
  • Javascript, JQuery und das DOM-Modell im Zusammenspiel
    Javascript hat sich zu einer der wichtigsten Programmiersprachen entwickelt. Wer die Grundlagen beherrscht, hat im Handumdrehen das Web 2.0 gemeistert.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Huawei
Pit Hampelmann, 13.12.2017 11:35, 2 Antworten
Welches Smartphone ist für euch momentan das beste? Sehe ja die Huawei gerade ganz weit vorne. Bi...
Fernstudium Informatik
Joe Cole, 12.12.2017 10:36, 2 Antworten
Hallo! habe früher als ich 13 Jahre angefangen mit HTML und später Java zu programmieren. Weit...
Installation Linux mint auf stick
Reiner Schulz, 10.12.2017 17:34, 3 Antworten
Hallo, ich hab ein ISO-image mit Linux Mint auf einem Stick untergebracht Jetzt kann ich auch...
Canon Maxify 2750 oder ähnlicher Drucker
Hannes Richert, 05.12.2017 20:14, 4 Antworten
Hallo, leider hat Canon mich weiterverwiesen, weil sie Linux nicht supporten.. deshalb hier die...
Ubuntu Server
Steffen Seidler, 05.12.2017 12:10, 1 Antworten
Hallo! Hat jemand eine gute Anleitung für mich, wie ich Ubuntu Server einrichte? Habe bisher...