Aus Wikibooks

[Bearbeiten] Vorwort

Lieber Leser, liebe Leserin,

vielleicht haben Sie schon das Buch Websiteentwicklung: XHTML gelesen. Wenn Sie mit diesem Buch keine Probleme gehabt haben, sollte es Ihnen nicht schwer fallen CSS zu lernen.

Eine reine XHTML-Seite sieht noch langweilig schwarz-weiß aus. Mit CSS wird die Seite viel angenehmer zu lesen.

Viel Spaß beim Lernen und Ausprobieren!

[Bearbeiten] Beschreibung

Cascading Style Sheets (Abk.: CSS), ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.

CSS ermöglicht es, die Darstellung dem jeweiligen Ausgabemedium (zum Beispiel Papier, Projektion, Sprache usw.) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen, oder um für ein Anzeigemedium wie einen PDA oder ein Mobiltelefon mit geringerer Auflösung die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

Cascading Style Sheets sind eine wichtige Entwicklung im Zuge der Bemühungen um ein Semantic Web, da es bei konsequenter Anwendung die komplette Trennung von Inhalten und Design ermöglicht.

CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web.

Um CSS anzuwenden, sind keine speziellen Programme nötig. Man kann ein Stylesheet mit jedem beliebigen Texteditor erstellen (z.B. Notepad unter Windows oder vi unter Linux/Unix) und es dann anschließend in die gewünschten Dokumente einbinden.

Ein grosser Nachteil ist jedoch die Client-seitige Verarbeitung: der Webdesigner und der Anwender sind darauf angewiesen, dass die Browserhersteller die Spezifikationen richtig in ihren Browsern implementieren. Heute wird zwar von den meisten Browsern CSS 1 komplett und richtig verarbeitet, CSS 2 hingegen ist oft aber nur in Teilen vorhanden und wird zudem auch noch sehr häufig falsch interpretiert. Diese Tatsache erschwert die Verwendung von neueren Funktion und hindert deren Verbreitung.

Einige Browser-Hersteller, wie z.B. Microsoft entwickeln ihre eigenen proprietären Erweiterungen für CSS, die dann ausschließlich auf dem entsprechenden Browser sichtbar werden. Ein Beispiel sind Überblendeffekte, die nur mit dem Internet Explorer funktionieren.

[Bearbeiten] Weblinks

• www.csszengarden.com - Beispiele von verschiedenen CSSLayouts mit ein und derselben HTML-Datei

[Bearbeiten] Geschichte

Das Konzept der Cascading Style Sheets (CSS) wurde 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich zusammenzuarbeiten und CSS zu entwickeln.

Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden konnten.

Nach der Präsentation von CSS durch Håkon an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Håkon und Bos arbeiteten in diesem Rahmen an CSS weiter, zusammen mit anderen Mitgliedern, u. a. Thomas Reardon von der Firma Microsoft. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt.

CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute wird diese Empfehlung noch nicht hinreichend von allen verbreiteten Browsern implementiert. Manche Browser setzen den größten Teil von CSS2 korrekt um, andere hingegen bieten nur eine mangelhafte Unterstützung von wenigen Teiltechniken. Bei der praktischen Anwendung im Web ergeben sich daher oft unnötige Schwierigkeiten.

Momentan arbeitet das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.1), die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. CSS 2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich.

Gleichzeitig ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS2 gestartet wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, d. h. einzelne Teiltechniken (beispielsweise zur Steuerung der Sprachausgabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und stellt wohl auch in Zukunft noch eine attraktive Alternative zu XML-basierten Stylesheet-Sprachen XSL-FO dar.

[Bearbeiten] Aufbau

[Bearbeiten] Selektoren

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). In einem HTML-Dokument wäre so ein Element (engl. tag) z.B. ein <p>-Element.

Die zu einem Selektor passende CSS-Notation würde so aussehen:

Syntax

Selektor { Eigenschaft: Wert; }

Am einfachsten lässt sich dies mit einem Beispiel veranschaulichen:

p { color: blue; }

Diese Definition würde nun alle p-Elemente in einem Dokument ansprechen und die Textfarbe blau gestalten.

[Bearbeiten] Klassen

Es könnte aber vorkommen, dass man in einem HTML-Dokument mehrere p-Elemente hat, die man unterschiedlich definieren will. Nehmen wir als Beispiel einen Einleitungsabsatz und den normalen Absatz für die restliche Seite. Man könnte nun anfangen, diese Elemente einzeln direkt in ihrem Tag mit style="Eigenschaft: Wert;" zu definieren. Das ganze würde aber dann umständlich, wenn man diese Elemente verändern möchte: Man müsste jedes einzeln verändern. Hier kommen die Klassen ins Spiel. Eine Klasse ermöglicht es, mehrere Elemente des selben Typs anders zu definieren.

Syntax

Selektor.Klasse { Eigenschaft: Wert; }

Die Syntax ist - bis auf die Klasse - gleich aufgebaut wie die einfache Selektor-Definition. Das ganze auf unser p-Element von oben angewandt würde so aussehen:

p { color: red; }
p.einleitung { color: blue }

Diese Regeln weisen allen p-Elementen die rote Textfarbe zu und nur noch das p-Element mit der Klasse "einleitung" bekommt stattdessen eine blaue Textfarbe. Nun fehlt noch die Verbindung der CSS-Regel mit dem HTML-Element. Dies löst man mit class="Klasse". Auf unser Beispiel angewandt würde die HTML-Datei so aussehen:

HTML-Code

<p class="einleitung">Ich bin die Einleitung.</p>

Übrigens: Wenn man in der CSS-Datei nur einen Selektor ohne Klasse verwendet und im HTML-Teil eine Klasse definiert, selektiert der Selektor trotzdem auch dieses Element.

[Bearbeiten] Pseudo-Klassen

Wenn wir beim obigen Beispiel davon ausgehen, dass nur der erste Absatz, also der Einleitungsabsatz, gesondert dargestellt werden soll, alle nachfolgenden Absätze aber der Standarddefinition entsprechen sollen, kann man dies auch über die Pseudo-Klasse :first-child lösen. In der HTML-Datei wird dazu keine spezielle Deklaration benötigt und das CSS würde dann wie folgt aussehen:

p { color: red; }
p:first-child { color: blue }

[Bearbeiten] Identifizierer

Man kann Elemente statt über Klassen auch über Identifizierer (IDs) adressierbar machen.

Syntax

#ID { Eigenschaft: Wert; }

Auch dies lässt sich am besten anhand unserem Beispiel darstellen:

#eins { color: blue; }

HTML-Code

<p id="eins">Ich bin die Einleitung.</p>

So sehr es wohl reizt, eine ID numerisch zu halten, so unerlaubt ist es trotzdem. Wenn eine ID mit einer Ziffer beginnt, werden Sie insbesondere im IE wunderliche Phänomene erleben können.

[Bearbeiten] Kommentare

Selbstverständlich sollten Sie sich die Zeit nehmen Ihre Definitionen zu kommentieren. Der Nächste, der Ihre CSS-Datei bearbeiten muss, wird es Ihnen danken.

Kommentare beginnen immer mit einem Schrägstrich gefolgt von einem Stern und enden mit den gleichen Zeichen in umgekehrter Reihenfolge:

Syntax

/* Kommentar */

[Bearbeiten] Grundlagen

Falls Sie im vorigen Kapitel Aufbau mehr oder weniger nur Bahnhof verstanden haben, lassen Sie sich nicht abschrecken. Versuchen wir jetzt lieber etwas Licht ins Dunkel zu bringen.

[Bearbeiten] Wohin gehört ein CSS?

Die CSS-Definitionen können sich entweder direkt in der (X)HTML-Datei oder separat in einer eigenen Datei befinden. Üblicherweise verwendet man die letztere der beiden Varianten, da man die (X)HTML-Datei nicht unnötig aufblähen und vor allem die CSS-Definitionen auch von weiteren (X)HTML-Seiten bequem einbinden möchte.

Falls Sie jetzt mit einem neuen Projekt beginnen, erstellen Sie also idealerweise mit Ihrem Texteditor eine neue Datei und nennen diese "screen.css". In dieser Datei werden Sie dann künftig das Layout der Bildschirmdarstellung definieren.

Vermutlich haben Sie schon eine Idee, wie Ihre künftige Website aussehen sollte. Wahrscheinlich wird diese neben einem Präsentationsteil auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Website besucht und einen interessanten Artikel drucken möchte, bringt es ihm nichts, wenn die Hälfte des Papiers mit Navigationselementen bedruckt wird. Das können Sie verhindern, wenn Sie das Layout für die Druckausgabe in einer separaten CSS-Datei definieren. Legen Sie dazu eine weitere Textdatei mit dem Namen "print.css" an.

Selbstverständlich können Sie die Dateien nennen, wie Sie wollen, z.B. "elefant.css" und "gruenekuh.css". In den nachfolgenden Artikeln werden wir aber davon ausgehen, dass Sie den obigen Namensvorschlag übernommen haben.

[Bearbeiten] Wie beginne ich?

In die erste Zeile Ihrer CSS-Dateien kommt die Definition, welchen Zeichensatz Sie in diesem Dokument verwenden:

@charset "utf-8";

Vielleicht wenden Sie sich erstmal nur der screen.css zu und schieben die print.css für später auf. Üblicherweise lässt sich diese später einfach aus der screen.css ableiten.

Anschließend sollten Sie mit etwas Kommentar beschreiben, was Sie hier eigentlich tun wollen. Meine CSS-Headers sehen meist etwa wie folgt aus:

@charset "utf-8";
 
/*
master stylesheet for www.boeni.com
(c) 2007  Stephan Böni, CH-Basel
 
version history:
1.0.0  22.06.2007  sb  initial release
1.0.1  25.06.2007  sb  fix menubar height (firefox)
1.1.0  01.07.2007  sb  new background image and smoother colors
*/
 
/*** global defaults ***/
body {
  color:       #ffffff;
  background:  #000000;
}

Fühlen Sie sich bei den Kommentaren völlig frei. Wenn Ihnen dieses Konzept nicht zusagt, erfinden Sie ein eigenes. Nur, scheuen Sie sich nicht, Kommentare großzügig zu verwenden.

Unter "global defaults" sammle ich jene Definitionen, welche die gesamtheitliche Basis liefern; in obigem Beispiel, dass der Text grundsätzlich weiß und der Hintergrund schwarz ist.

[Bearbeiten] HTML, XHTML oder XML?

Vielleicht besitzen Sie bereits eine HTML-, XHTML- oder XML-Datei, in der Sie die soeben erstellten CSS-Dateien einbinden möchten. Vielleicht müssen Sie diese Frage verneinen und fragen sich an dieser Stelle, welche Variante - HTML, XHTML oder lieber XML - Sie verwenden sollten, um einen Website zu erstellen. Um es auf einen Nenner zu bringen: Mit XHTML werden Sie vermutlich richtig liegen. Mehr dazu finden Sie im Buch Websiteentwicklung: XHTML.

Wenn wir nachfolgend von HTML reden, gilt dies natürlich immer auch für XHTML, welches der Nachfolgestandard von HTML ist. Die Dateieindung einer XHTML-Datei lautet entweder .xhtml oder .xht.^[1]

Falls Sie also noch keine (X)HTML-Seite haben, legen Sie diese nun mit Ihrem Texteditor an und nennen sie "index.xhtml". Siehe dazu Websiteentwicklung:_XHTML:_Erste_Seite.

[Bearbeiten] Einzelnachweise

1. ↑ The 'application/xhtml+xml' Media Type

CSS-Anweisungen lassen sich direkt in ein HTML/XHTML-Dokument einbauen oder aus externen Stylesheets des Typs text/css einbinden. Die beiden Methoden lassen sich auch kombinieren. Meistens hat man eine größere Anzahl von HTML-Dateien, die gleich „gestylt“ werden sollen, so ist ein externes Stylesheet, das in die HTML-Dateien eingebunden wird, vorzuziehen, da man die CSS-Regeln nur einmal formulieren muss. Auch wird so eine Änderung im externen Stylesheet direkt auf allen HTML Seiten ersichtlich.

[Bearbeiten] CSS-Regeln im (X)HTML-Dokument

Global geltende Regeln werden im Kopf der HTML-Datei (zwischen <head></head>) eingebaut. Sie werden nach dem HTML-Tag <style> formuliert und enden wieder mit dem abschließenden Tag </style>.

Eine andere Möglichkeit ist, die CSS-Regeln direkt im betreffenden HTML-Tag als style-Attributwerte zwischen den Anführungszeichen zu formulieren, z.B.:

 <img style="border:0;width:88px;height:31px" src="vcss.png" alt="Valid CSS!" />

[Bearbeiten] Einbinden von externen CSS-Dateien in (X)HTML

Das Einbinden von externen CSS-Dateien geschieht im Kopf (zwischen <head></head>) der HTML-Datei. Hierbei gibt es zwei Möglichkeiten:

• Mit dem link-Element für XHTML:

<link rel="stylesheet" href="screen.css" type="text/css" />

Anmerkung: der Slash (/) am Ende des <link>-Tags muss nur bei XHTML geschrieben werden.

• Mit dem style-Element und @import:

<style type="text/css">
  @import "screen.css";
</style>

Inzwischen ist die erste Variante gebräuchlicher.

Vielleicht haben Sie in den Grundlagen gelesen, dass Sie zwei CSS-Dateien - eine "screen.css" für die Bildschirmausgabe und eine "print.css" für die Druckausgabe - anlegen sollen. Nun, dann wollen wir diese auch korrekt einbinden. Schreiben Sie also den folgenden Text in Ihre im Grundlagen-Teil erstellte "index.html":

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    <title>Meine erste Homepage</title>
  </head>
  <body>
    <p>Hallo Welt</p>
  </body>
</html>

Mit der Ergänzung "media=" haben Sie definiert, welche CSS-Datei für welches Ausgabemedium verwendet werden soll.

Falls Sie unter Linux arbeiten, empfehle ich Ihnen, die print.css mit der screen.css zu verlinken, so lange Sie keine separate print.css nutzen, den Eintrag im HTML-Code aber schon vorbereitet haben möchten.

ln screen.css print.css

Bitte beachten Sie außerdem, dass die CSS Gruppen oder IDs für die jeweiligen XHTML Elemente genau so benannt werden müssen wie Sie sie auch schon in der screen Version genannt haben, da die Definition der einzelnen XHTML Elemente im XHTML Dokument vorgenommen werden, dieses aber nur 1 mal existiert. Außerdem sollten Sie (der IE stellt die Website auch bei nicht beachten dieser Regel korrekt dar), wenn Sie für die screen Version 2 CSS Dokumente erstellt haben, auch 2 screen Dokumente erstellen mit der gleichen Aufteilung.

CSS verwendet ein sogenanntes Boxmodell (engl. box model), welches den Aufbau einer Webseite in rechteckige Kästen aufteilt, die wiederum aus in einander verschachtelte Kästen für die Randverhältnisse dieses Kastens bestehen. Dazu zählen der transparente Außenabstand (margin), der Rahmen (border), der Innenabstand (padding) und der Inhalt (beispielsweise ein Text). Für alle diese Bestandteile können unterschiedliche Maße definiert werden. Das Prinzip des Boxmodells funktioniert wie eine Tabelle in HTML, allerdings ist das Boxmodell für die Gestaltung der Internetseite gedacht, im Gegensatz zur HTML-Tabelle. Der Vorteil des Boxmodells liegt in der Möglichkeit, alle Elemente genauestens bestimmen zu können, in Bezug auf Maße, Dicken, Farben und der noch genaueren Ausrichtung der einzelnen Seitenelemente (oben (top), rechts (right), unten (bottom), links (left)). In der Regel können diese Angaben in einer gemeinsamen Definition zusammengefasst werden. Dabei werden diese Definitionen im Uhrzeigersinn aufgelistet (Siehe das Beispiel für die Farben unter Rahmen weiter unten auf dieser Seite).

[Bearbeiten] Box-Eigenschaften

Die Eigenschaft von Boxen werden über die Elemente display, float und position definiert.

Das folgende Beispiel macht aus einem a-Tag eine Box:

a {
  display:  block;
  float:    right;
}

Mehrere solcherart hintereinander definierte Boxen werden von rechts nach links fließend dargestellt. Man beachte, dass ohne die Deklaration von float die Boxen untereinander angeordnet werden, also von oben nach unten. Um die Box im üblichen Textfluss zu halten, sollten Sie sie wie folgt definieren:

a {
  display:  inline-block;
}

Nur wenn display auf block oder inline-block steht, gelten alle der nachfolgend aufgeführten Eigenschaften. Andernfalls wird zumindest die Definition eines Außenrandes ignoriert.

Da dem div-Tag die block-Eigenschaft standardmäßig zugewiesen ist, wird es gerne für Box-Definitionen verwendet. Selbstverständlich ist die Größe einer Box ebenfalls definierbar:

div {
  width:     200px;
  height:    200px;
  overflow:  auto;
}

Diese Box ist 200 Pixel breit und hoch. Falls sie mehr Text enthalten sollte, als sie groß ist, werden Scrollbalken dargestellt. Ohne die overflow-Definition würde die Box sonst je nach Browser entsprechend vergrößert oder deren Inhalt einfach abgeschnitten werden.

[Bearbeiten] Inhalt

Der Inhalt ist im einfachsten Fall der Text einer Seite. Dieser hat seinen Platz im Mittelpunkt der Box, um ihn werden die folgende Elemente „herumgebaut“.

[Bearbeiten] Innenabstand

Der Innenabstand (padding) gibt den Abstand des Inhalts zum Rahmen (border) der Box an. Nach CSS 2.1 ist der Innenabstand wie der äußere Abstand (margin) transparent.

Es besteht die Möglichkeit einen allgemeinen Abstand zu definieren (padding), oder jede beliebige Seite einzeln (padding-top, padding-right, padding-bottom, padding-left).

Der Initialwert beträgt 0. Falls also padding nicht definiert wird und von keinem oberen Element geerbt wird, gilt "padding: 0;".

Beispiel:

div {
  padding-top:     10px;
  padding-right:   20px;
  padding-bottom:  10px;
  padding-left:    20px;
}

In diesem Beispiel werden den div-Elementen links und rechts jeweils 20 Pixel sowie oben und unten jeweils 10 Pixel Innenabstand zugewiesen.

[Bearbeiten] Rahmen

Der Rahmen (border) schließt direkt an den Innenabstand an. Es kann eine allgemeine oder eine für jede Seite bestimmte Rahmenformatierung definiert werden.

Das folgende Beispiel zeichnet eine 2 Pixel breite, durchgezogene, blaue Line um ein div-Element:

div { border: 2px solid blue; }

Das folgende Beispiel zeichnet links und rechts eine blaue und oben und unten eine grüne Linie:

div {
  border-top:     1px solid green;
  border-right:   1px solid blue;
  border-bottom:  1px solid green;
  border-left:    1px solid blue;
}

Das exakt gleiche Resultat erhalten Sie auch so:

div {
  border-width:   1px;
  border-style:   solid;
  border-color:   green blue green blue;
}

Sie können also die drei Werte width (Breite), style (Stil) und color (Farbe) separat definieren.

Die Breite der Line kann statt mit einer Maßeinheit auch mit thin (dünn), medium (mittel) oder thick (dick) definiert werden. Je nach Browser erhalten Sie aber sehr abenteuerliche Resultate.

Den Stil (style) bezeichnet die Art der Rahmenlinie. Die Werte hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelt durchgezogen) sind selbsterklärend. Dazu kommen noch die etwas ungewöhnlicheren Werte groove (wirkt wie eine eingedrückte Linie), ridge (Rille; das Gegenteil von groove), inset (wirkt wie wenn die Box eindrückt ist) und outset (wirkt wie wenn's aus der eigedrückten Box wieder hieraus kommt; das Gegenteil von inset). Je nach Browser wird die definierte Rahmenfarbe hier passend geändert oder geflissentlich ignoriert und durch Grauschattierungen ersetzt. Schließlich gibt's noch den Stil-Wert none (kein), welcher wie hidden wirkt, aber die Rahmenbreite auf 0 zurücksetzt. Verwenden Sie dies also besser nicht, da es nur verwirrt.

Bei den Farben haben Sie die üblichen Freiheiten, die Sie von der Color-Eigenschaft bereits kennen. Zudem dürfen Sie auch den Wert transparent (durchsichtig) verwenden.

Bis hier hin haben wir uns an die CCS-2.1-Normen gehalten. Jetzt kommen wir zu einigen Rahmendefinitionen, welche zurzeit noch ungenormt, aber doch von den meisten Browsern unterstützt werden.

Wenn zwei Boxen aneinander angrenzen, kann definiert werden, ob sie unanhängig bleiben oder miteinander kollabieren sollen.

div {
  border:           1px solid black;
  border-collapse:  collapse;
}

Wenn nichts definiert ist und auch nicht von einer übergeordneten Boxdefinition geerbt wird, steht boder-collapse auf "separate". Und diese Einstellung gilt prioritär. Erst wenn bei beiden der zwei sich angrenzende Boxen border-collapse auf "collapse" steht, kollabieren die Boxen. Das bedeutet, dass der Außenrand (margin) zur anderen Box entfällt und die Rahmen (border) sich verschmelzen. Dem oben aufgeführten Beispiel entsprechend, befindet sich zwischen den beiden Boxen nur eine Linie, welche 1 Pixel breit ist. Ab dem Innenrand (padding) bleiben die Boxen dann getrennt.

Kollabierende Boxen werden üblicherweise bei Tabellendefinitionen gerne verwendet.

[Bearbeiten] Rahmen - CSS3 Vorschau

Als CSS3-Entwurf vorliegend und von einigen Browsern bereits unterstützt, ist das Farbspiel bei Rahmen. Das folgende Beispiel zeichnet einen oberen Rahmen, welcher je 2 Pixel blau, grün und schwarz ist.

div {
  border-top:         6px solid;
  border-top-colors:  blue green black; }

Momentan (März 2009) wird diese Eigenschaft schon von Browsern unterstützt, die auf der Gecko- (Firefox, SeaMonkey, Flock) oder WebKit-Engine (Safari, Google Chrome) basieren. Hier ist jedoch die Angabe eines Browserspezifischen Präfix nötig, da somit klar deklariert ist, dass es sich hierbei um eine noch nicht verabschiedete CSS-Deklaration handelt.

div {
  border-top:         6px solid;
  -moz-border-top-colors:     blue green black;
  -webkit-border-top-colors:  blue green black; }

Ebenfalls neu ist die Möglichkeit von abgerundeten Ecken. Im folgenden Beispiel beginnt die Rundung 20 Pixel vor den Ecken.

div {
  border:         1px solid black;
  border-radius:  20px; }

Auch hier erfolgt die Notierung (vorläufig, bis zur Verabschiedung des Standards) wieder mit Präfix.

div {
  border:         1px solid black;
  -moz-border-radius:    20px;
  -webkit-border-radius: 20px; }

[Bearbeiten] Außenabstand

Der Außenabstand (margin) gibt den Abstand zu anderen Elementen der XHTML-/HTML-Seite an. Er schliet direkt an den äußeren Bereich des Rahmens an. Dieser Bereich ist immer transparent.

Im folgenden Beispiel wird dem div-Element einen Außenabstand von 5 Pixel zugewiesen; außer links, dort sind's 20 Pixel:

div {
  margin:        5px;
  margin-left:  20px;
}

[Bearbeiten] Übersicht aller Schriftformatierungen

[Bearbeiten] Erklärung

Mit Hilfe von font-family lassen sich verschiedene Schriftarten verwenden.

[Bearbeiten] Schriftarten

In CSS werden sogenannte Schriftartfamilien verwendet. Diese Schriftartfamilien haben jeweils Schriftarten.

So hat die Schriftartfamilie Arial die Schriftarten: Arial Bold, Arial Italic oder Arial Bold Italic

Häufig verwendete Schriftartfamilien sind:

• Times
• Arial
• Helvetica
• Verdana
• Courier
• Comic

[Bearbeiten] Kategorien der Schriftartfamilien

Schriftartfamilien werden in fünf Kategorien eingeteilt.

• Serif haben Serifen und sind proportional. Bei proportionalen Schriftarten haben die Buchstaben unterschiedliche Breiten. So ist ein "m" breiter als ein "i". Serifen sind weitere Verzierungen der Schriftarten. Beispielschriftarten: Times, Garamond
• Sans Serif haben keine Serifen sind aber ebenfalls proportionale Schriftarten. Beispielschriftarten: Arial, Geneva, Helvetica, Tahoma, Verdana
• Monospace können Serifen aufweisen sind aber keine proportionale Schriftarten. D.h. jeder Buchstabe nimmt den gleichen Platz ein wie ein anderer. Auch als Schreibmaschinenschrift bekannt. Beispielschriftarten: Courier, Lucida Console
• Cursive sind Schriftarten die Handschriften ähneln. Beispielschriftarten: Comic Sans, Lucida Handwriting
• Fantasy sind Schriftarten die in keines der anderen vier Muster passen.

[Bearbeiten] Anwenden von Schriftarten

Mit CSS muss man einem Text keine bestimmte Schriftart zuweisen. Es ist möglich dem Browser bestimmte Regeln für die Verwendung einer Schriftart zu diktieren ohne eine Schriftart zu bestimmen. Dies ist dann vielversprechend, wenn man davon ausgeht, dass dem Browser nicht alle Schriftarten zur Verfügung stehen.

Beispiel:

font-family: Monospace;

Ein unkonfigurierter Browser würde Courier als Schriftart verwenden. Steht ihm Courier nicht zur Verfügung, nimmt er beispielsweise FreeMono. Dies verhindert eine unerwünschte Darstellung des Textes.

Die Verwendung einer bestimmten Schriftart würde so aussehen:

Beispiel:

font-family: "Times New Roman";

[Bearbeiten] Besonderheit

Nicht jeder Browser unterstützt alle Schriftarten, daher ist es möglich, mehrere Schriftarten zu definieren. Dazu wird zunächst die bevorzugte Schriftart, dann durch ein Komma getrennt die zweite Schriftart angegeben. Diese wird dann verwendet, wenn der Browser die erste nicht kennt.

font-family: Arial, Verdana;

Es lassen sich auch mehr als 2 Schriftarten definieren. Die erste Schriftart, die der Browser kennt, kommt zum Einsatz.

Es ist auch möglich, zunächst eine vorgegebene Schriftart zu nutzen. Ist dem Browser diese Schriftart nicht bekannt, so soll er eine Schriftart der gleichen Kategorie nutzen.

font-family: Arial, sans-serif;

[Bearbeiten] Erklärung

Mit Hilfe von font-size lässt sich die Schriftgröße eines Textes definieren.

[Bearbeiten] Schriftgröße

Die Angabe der Schriftgröße kann numerisch, absolut oder relativ erfolgen:

[Bearbeiten] Numerische Größenangaben

Bei der numerischen Größenangabe wird ein fester Wert als Größe angegeben. Dieser kann durch Pixel-, Punkt- und anderen Angaben erfolgen.

Beispiel:

font-size: 12px;

[Bearbeiten] Absolute Größenangaben

Absoluten Größenangaben können Browserspezifisch sein.

Absolute Angaben:

• xx-small für winzig.
• x-small für sehr klein.
• small für klein.
• medium für mittel.
• large für groß.
• x-large für sehr groß.
• xx-large für riesig.

Beispiel:

font-size: small;

[Bearbeiten] Relative Größenangaben

Relative Größenangaben stehen immer in Relation zu dem Elternelement

Relative Angaben:

• smaller für kleiner als im Elternelement.
• larger für größer als im Elternelement.

Beispiel:

font-size: smaller;

Außerdem gibt es die Angabe Prozent, die sich auf die Einstellungen des Users bezieht.

h1 {font-size:200%;}

[Bearbeiten] Erklärung

Das font-weight -Element gibt an wie dick oder dünn die Buchstaben eines Textes sind.

[Bearbeiten] Mögliche Einstellungen

• normal für normale Dicke
• bold für dicke Schrift
• bolder für dickere Schrift
• lighter für dünnerer Schrift

[Bearbeiten] Numerische Einstellungen

Es gibt auch die Möglichkeit statt den vier sprachlichen Begriffen oben das Schriftgewicht numerisch von dünn zu dick anzugeben.

• 100
• 200
• 300
• 400 entspricht normal
• 500
• 600
• 700 entspricht bold
• 800
• 900

[Bearbeiten] Beispiele

Beispiel 1:

font-weight: bold;

für dicke Schrift

Beispiel 2:

font-weight: 700;

Die numerische Angbae 700 entspricht ebenfalls der dicken Schrift.

[Bearbeiten] Erklärung

Mit Hilfe des font-style -Elementes lässt sich der Schriftstil eines Textes bestimmen.

[Bearbeiten] Mögliche Einstellungen

• normal für eine normale Schrift
• italic für kursive Schrift
• oblique für schräggestellte Schrift (Nachträglich vom Computer verzerrte Schrift und dadurch nicht für eine gute Lesbarkeit optimiert. Deshalb ist italic vorzuziehen.)

[Bearbeiten] Beispiele

Beispiel 1:

font-style: italic;

Dies gibt den damit formatierten Text kursiv aus.

Beispiel 2:

font-style: oblique;

Dies gibt den damit formatierten Text schräggestellte aus.

[Bearbeiten] Erklärung

Mit Hilfe des font-variant -Elementes lässt sich die Schriftvariante variieren.

[Bearbeiten] Mögliche Einstellungen

• normal für eine normale Schrift
• small-caps für Kapitälchen.

[Bearbeiten] Beispiele

Beispiel 1:

font-variant: small-caps;

Dies gibt den Text in Kapitälchen wieder.

[Bearbeiten] Erklärung

Mit Hilfe des font-stretch -Elementes lässt sich die Ausdehnung des Textes bestimmen. Dazu gibt es vordefinierte Weitenangaben.

[Bearbeiten] Mögliche Einstellungen

• normal für normale Textausdehnung.
  
  
• wider für weiter als normal.
  
  
• narrower für schmaler als normal.
  
  
• condensed für zusammengedrängt.
• semi-condensed für halb zusammengedrängt.
• extra-condensed für stark zusammengedrängt.
• ultra-condensed für extrastark zusammengedrängt.
• expanded für geweitet.
• semi-expanded für halb geweitet.
• extra-expanded für stark geweitet.
• ultra-expanded für extrastark geweitet.

[Bearbeiten] Beispiele

Beispiel 1:

font-stretch: wider;

Dieser Text wird gedehnter als normal dargestellt.

Beispiel 2:

font-stretch: narrower;

Dieser Text wird schmaler als normal dargestellt.

[Bearbeiten] Übersicht aller Textformatierungen

1. ↑ ^{1,0 1,1 1,2} es darf kein prozentualer Wert (%) als numerische Angabe eingesetzt werden

[Bearbeiten] Erklärung

Mit dem text-align -Element kann die Ausrichtung eines Textes oder anderer Inhalte bestimmt werden.

[Bearbeiten] Mögliche Einstellungen

• left linksbündig
• right rechtsbündig
• center mittig
• justify Blocksatz

[Bearbeiten] Beispiele

Beispiel 1:

text-align: center;

Dies zentriert den damit formatierten Text.

Beispiel 2:

text-align: justify;

Dies gibt den damit formatierten Text im Blocksatz aus. Der Blocksatz ist bei Webseiten nicht zu empfehlen, da die Browser noch keine Silbentrennung vornehmen. Dadurch können relativ grosse und uneinheitliche Lücken zwischen den einzelnen Wörtern entstehen, was massiv zur Ermüdung des Lesers beiträgt. Wenn man diese Methode dennoch verwenden möchte, sollte man in jedem Fall Blockelemente mit fester Breite wie z.B. DIVs verwenden.

[Bearbeiten] Erklärung

Das word-spacing -Element bestimmt den Abstand zwischen den einzelnen Worten des Textes.

[Bearbeiten] Mögliche Einstellungen

Der Abstand kann entweder in Pixeln oder in Zentimetern angegeben werden. "0" ist jeweils Standard.

[Bearbeiten] Beispiele

Beispiel 1:

word-spacing: 10px;

Die Wörter des Textes werden in einem Abstand von 10 Pixeln ausgegeben.

Beispiel 2:

word-spacing: 1cm;

Die Wörter des Textes werden in einem Abstand von einem Zentimeter ausgegeben.

[Bearbeiten] Erklärung

Das letter-spacing -Element bestimmt den Abstand zwischen den einzelnen Buchstaben eines Textes.

[Bearbeiten] Mögliche Einstellungen

Der Abstand kann entweder in Pixeln oder in Zentimetern angegeben werden. "0" ist jeweils Standard.

[Bearbeiten] Beispiele

Beispiel 1:

letter-spacing: 5px;

Die Buchstaben des Textes werden in einem Abstand von 5 Pixeln ausgegeben.

Beispiel 2:

letter-spacing: 0.5cm;

Die Buchstaben des Textes werden in einem Abstand von einem halben Zentimeter ausgegeben.

[Bearbeiten] Erklärung

Mit Hilfe des text-decoration-Elementes lassen sich Textdekorationen bestimmen.

Oft werden Links mit underline unterstrichen. Dies hat aber den Nachteil, dass ein Unterstrich eventuell nicht sichtbar ist, je nach Schriftart.

Unterstrich_hier_dazwischen.

Darum, aber auch wegen des Aussehens, eignet sich daher ein Rahmen besser (border-bottom: 1px solid #000;):

Unterstrich_hier_dazwischen

[Bearbeiten] Mögliche Einstellungen

• none keine Dekoration
• underline unterstrichen
• overline Linie über dem Text
• line-through durchstreichen
• blink blinkender Text (nur Netscape)

[Bearbeiten] Beispiele

Beispiel 1:

text-decoration: underline;

Dies unterstreicht den formatierten Text.

Beispiel 2:

text-decoration: line-through;

Dies streicht den Text durch.

[Bearbeiten] Erklärung

Mit Hilfe des text-transform -Elementes kann die Groß- und Kleinschreibung variiert werden.

[Bearbeiten] Mögliche Einstellungen

• capitalize Jeweils Der Erste Buchstabe Eines Wortes Wird Groß Geschrieben.
• uppercase NUR GROßBUCHSTABEN.
• lowercase nur kleinbuchstaben.

[Bearbeiten] Beispiele

Beispiel 1:

text-transform: uppercase;

ALLE BUCHSTABEN WERDEN ZU GROßBUCHSTABEN.

Beispiel 2:

text-transform: lowercase;

alle buchstaben werden zu kleinbuchstaben.

[Bearbeiten] Farben

Farbdefinitionen kann mittels CSS bequem in Vier Arten realisiert werden:

• Farbnamen
• HEX-Code
• RGB-Wert
• RGB-Prozentangabe

[Bearbeiten] Farbnamen

color: yellow;
color: black;
color: white;
color: silver;

[Bearbeiten] Systemfarben in CSS 2:

Die Systemfarben richten sich nach den System-Einstellungen des Nutzers. Man kann diese Farbangaben beispielsweise verwenden, um eine Seite zu erstellen, die der Benutzeroberfläche des Nutzers ähnlich sieht.

• activeborder
• activecaption
• appworkspace
• background
• buttonface
• buttonhighlight
• buttonshadow
• buttontext
• captiontext
• graytext
• highlight
• highlighttext
• inactiveborder
• inactivecaption
• inactivecaptiontext
• infobackground
• infotext
• menu
• menutext
• scrollbar
• threeddarkshadow
• threedface
• threedhighlight
• threedlightshadow
• threedshadow
• window
• windowframe
• windowtext

[Bearbeiten] HEX-Code

color: #ffff00;
color: #000000;
color: #ffffff;
color: #c0c0c0;

TIPP: Wenn sich die Werte der jeweiligen RGB Zahl wiederholt, kann man auch eine verkürzte Variante schreiben:

color: #ffff00; /*ist das gleiche wie*/
color: #ff0;

color: #aa6633 /*ist das gleiche wie*/
color: #a63;

Falsch hingegen jedoch ist:

color: #ca6633;
color: #ca63; /*dies ist eine falsche Definition!*/

[Bearbeiten] RGB-Wert

color: rgb(255,255,0);
color: rgb(0,0,0);
color: rgb(255,255,255);
color: rgb(192,192,192);

Hier werden die jeweiligen RGB Werte von 0 bis 255 (256 Abstufungen) definiert.

[Bearbeiten] RGB-Prozentangabe

color: rgb(100%,100%,0%);
color: rgb(0%,0%,0%);
color: rgb(100%,100%,100%);
color: rgb(75%,75%,75%);

TIPP: Es kann auch mit Kommawerten gearbeitet werden.

color: rgb(7.5%,99.1%,33.3%);

[Bearbeiten] CSS Farben Links

CSS Farb-Spezifikation auf w3.org

Farbangaben auf selfhtml.org

[Bearbeiten] Werkzeuge (Auszug)

[Bearbeiten] Editoren Windows

• Topstyle
• Style Master
• Notepad++ (ein sehr schlanker Editor, der für sehr viele Sprachen ein Syntax-Highlighting mitbringt)
• PSPad mit CSS-Code Strukturierung und Einbindung von Topstyle

[Bearbeiten] Editoren MAC

• Style Master
• CSSEdit
• CODA

[Bearbeiten] Editoren UNIX

• Quanta+
• CSSED
• BlueFish

[Bearbeiten] CSS Tools MAC

• Xylescope Zeigt die CSS-Formatierung auf verschiedene Arten an

[Bearbeiten] CSS Browser Tools

• Firebug - Firefoxextension
• EditCSS - Firefox Extension
• Web Developer - Firefox Extension
• CSSViewer - Firefox Extension

[Bearbeiten] CSS Optimierer

• CSS-Weboptimierer (Dateigröße komprimieren)

[Bearbeiten] Warum überhaupt CSS/Web Standards?

Artikel "The business value of web standards" erläutert übersichtlich, wieso Web Standards (und damit intensive CSS-Nutzung) sinnvoll sind und sich auch bezahlt machen. WWM in XHTML erklärt, wieso für Firmen die Beachtung von Web Standards sinnvoll ist.

"Developing With Web Standards" ist eine gute einführende Lektüre - was sind Web Standards, wozu sind sie gut, ...

CSS Zen Garden Zeigt, wie flexibel die Optik sein kann, ohne daß die eigentliche Inhaltsdatei geändert werden müßte. Ist eine HTML-Datei, für die jeder ein Design via CSS erstellen kann, und schon hunderte Designs erstellt wurden.

[Bearbeiten] Referenzen

Die W3C-Seite zu CSS ist die Referenz. Sie bietet u.a. die Recommendation vom 12. Mai 1998 zur CSS2 Spezifikation auf englisch und deutsch.

Weiterhin gibt es den SelfHTML CSS-Bereich.

www.css4you.de - eine sehr übersichtliche Referenz.

[Bearbeiten] Zentrale Websites rund um CSS

CSS-Technik - Site mit CSS Ressourcen, Skripten und Tutorials.

Bei A List Apart werden neue Techniken erklärt.

[Bearbeiten] Über typische Fehler und deren Umgehung/Behebung

Der CSS-Spickzettel und [1] erläutern typische Fehler beim Erstellen von Style-Sheets. Curing Float Drops and Wraps konzentriert sich auf das Beheben von Problemen mit FLOATs.

CSS2 Kompatibilitäts-Tests und -Übersicht und RichInStyle listen CSS-Bugs von einzelnen Browsern. Wichtig, wenn man sie umgehen will.

[Bearbeiten] CSS-Experimente, Anregungen

The Man in Blue zeigt auf http://www.themaninblue.com/experiment/InForm/index.htm, wie Formulare prinzipiell angeordnet werden können. Sinnvoll, die einzelnen Stile kurz anzuschauen und die Wirkung zu merken, dann das eigene Formular zu bauen.

http://www.moronicbajebus.com/playground/cssplay/ bietet CSS-Experimente und -Vorlagen CSS Destroy beinhaltet CSS-Experimente, die meistens aus einer interessanten Idee hervorgehen, jedoch von den meisten Browsern "zerstört" (nicht wie gewünscht gerendert) werden.

Eric A. Meyer ist durch seine CSS-Experimente bekannt geworden; Beispiele seiner Arbeit und mehr finden sich unter http://meyerweb.com/eric/css/.

Der csszengarden ist eine Seite, die jeden einlädt, sein eigenes css für eine gegebene html-Vorlage zu erstellen. Viele Webdesigner sind dieser Aufforderung nachgekommen, so daß eine Sammlung exzelenter css-Designs entstanden ist.

[Bearbeiten] Tutorials

How To write Efficient CSS erklärt kompakte Schreibweise z. B. für font oder border.