sich alles mit CSS realisieren lässt. In diesem Kapitel bringen wir
Ihnen das Basiswissen von CSS näher und zeigen Ihnen wie HTML
(Struktur) und CSS (Design) zusammen funktionieren.
Regeln und Style Sheets
Um mit CSS zu beginnen müssen Sie nicht einmal selbst irgendwelche
Style Sheets schreiben. Kapitel 16 erklärt wie Sie bereits existierende
Style Sheets aus dem Web in Ihrem Dokument verwenden können.
Es gibt zwei Wege um CSS zu generieren. Entweder Sie versuchen es "per
Hand" mit einem einfachen Texteditor oder Sie verwenden einen
speziellen Editor welcher CSS unterstützt. Diese Editoren erlauben die
Erzeugung von CSS ohne dass Sie dabei den Syntax verstehen müssen. Wie
auch immer, oftmals möchte der Designer den erzeugten Style Sheet per
Hand tunen um den einen oder anderen Effekt zu erzeugen. Aus diesem
Grunde empfehlen wir die Nutzung eines einfaches Text Editors - nicht
zuletzt um den Lernfaktor zu erhöhen. Lassen Sie uns beginnen!
H1 { color: green }
--
* Selektor - dem Teil vor der geschweiften Klammer
* Deklaration - dem Teil innerhalb der Klammern
[image]
Der Selektor dient als Verbindungsstück zwischen dem HTML Dokument und
dem Style. Er legt fest welche Elemente vom Style Sheet beeinflusst
werden. Die Deklaration legt fest welcher Effekt verwendet werden soll.
In diesem Beispiel ist der Selektor h1 und die Deklaration
"color: green." Dadurch werden alle h1 Elemente beeinflusst und der
Effekt der Deklaration auf diese angewand. Oder anders gesagt - sie
werden alle grün. (Die color Eigenschaft beeinflusst nur die
Vordergrundfarbe, es existieren andere Eigenschaften für Hintergründe,
Umrandungen, etc.)
--
getrennten Liste zusammenfassen. So wie hier:
H1 {
color: green;
text-align: center;
}
Alle Deklarationen müssen sich innerhalb der geschweiften Klammern
befinden. Ein Semikolon trennt die Deklarationen und kann - aber muss
nicht - auch am Ende der letzten Deklaration angefügt werden. Um den
Code lesbarer zu gestalten empfehlen wir so wie hier jede Deklaration
in eine eigene Zeile zu setzen. (Browsern ist dass jedoch egal, sie
ignorieren alle Leerzeichen und Zeilenumbrüche.)
Nun kennen Sie die Grundregeln wie CSS Regeln und Style Sheets erzeugt
werden. Wie auch immer, wir sind noch lange nicht fertig. Damit der
Style Sheet auch einen sichtbaren Effekt erzeugt muss er mit dem HTML
Dokument verbunden werden.
Style Sheets mit Dokumenten verbinden
Wie schon geschrieben muss, um einen Effekt zu erzeugen, der Style
Sheet mit dem Dokument verbunden werden. Das bedeutet also dass CSS und
HTML Seite miteinander kombiniert werden müssen. Das kann durch einen
dieser vier Wege geschehen:
1. Der für das gesamte Dokument geltende Style Sheet wird mit Hilfe
des style Elements in das Dokument selbst gesetzt.
2. Der Style Sheet wird mit Hilfe des style Attributes direkt in einem
Element verankert.
3. Ein externer Style Sheet wird mit Hilfe des link Elements mit dem
--
Browser und CSS
Für eine up-to-date Übersicht aktueller Browser besuchen Sie am besten
die W3C Übersichtsseite.
Damit das hier besprochene CSS funktioniert müssen Sie einen CSS
fähigen Browser verwenden, also einen Browser welcher CSS unterstützt.
Ein CSS fähiger Browser wird das style Element als Containerelement für
Style Sheets interpretieren und das Dokument entsprechend darstellen.
Der Grossteil der modernen Browser unterstützt CSS, so z.B. der
Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) und
Opera 3.5 (O3.5). Untersuchungen haben gezeigt dass mehr als die Hälfte
--
CSS bietet eine eigene Möglichkeit Kommentare innerhalb des Quellcodes
zu platzieren. Ein CSS Kommentar beginnt mit "/*" und endet mit "*/".
(Wenn Sie sich mit C Programmierung auskennen wird Ihnen das bekannt
vorkommen) CSS Regeln innerhalb eines CSS Kommentars werden keine
Auswirkung auf die Darstellung des Dokuments haben.
Dem Browser muss aber auch noch mitgeteilt werden dass Sie nun mit CSS
Style Sheets arbeiten. CSS ist bisher die einzige Style Sheet Sprache
welche in Verbindung mit HTML Dokumenten genutzt werden kann. Und das
wird sich sobald wohl auch nicht ändern. Für XML sieht das anders aus.
Aber nur weil es derzeit der Fall ist kann nicht auch in Zukunft davon
ausgegangen werden. Dem Browser muss also mitgeteilt werden dass wir
CSS verwenden. Das wird mit einem type Attribut des style Elements
realisiert. Der Wert von type legt fest welche Sprache für die Style
Sheets verwendet werdens soll. Für CSS wird der Wert "text/css"
verwendet. Das folgende Beispiel zeigt Ihnen wie Sie das hier Gelernte
anwenden können (in Kombination mit HTML Kommentaren).
Bach's home page
Wie auch immer, der Grossteil der HTML Dokumente wird wesentilch
--
Vererbung überschreiben
Im vorangegangenen Beispiel wurde allen Elementen die gleiche Farbe
durch Vererbung zugewiesen. Manchmal jedoch sehen Kinden nunmal nicht
aus wie ihre Eltern. Wenig überraschend bietet auch CSS hier eine
entsprechende Möglichkeit. Sagen wir alle h1 Elemente sollen blau
anstatt grün dargestellt werden. Das kann in CSS einfach realisiert
werden:
--
Festlegen von Schriftarten. Dieser Abschnitt gibt Ihnen einen Überblick
über die am meissten genutzten Eigenschaften von CSS.
Häufige Aufgaben: Schriftarten (Fonts)
Lassen Sie uns mit Fonts beginnen. Wenn Sie in letzter Zeit
irgendwelche Textprogramme verwendet haben sollten können Sie
vermutlich den folgenden kleinen Style Sheet lesen:
H1 { font: 36pt serif }
Diese Regel legt den Font für h1 Elemente fest. Der erste Teil des
Wertes 36pt legt die Schriftgrösse auf 36 Punkte fest. Ein Punkt ist
ein altes typographisches Überbleibsel aus vergangen Zeiten welches es
bis in das digitale Zeitalter geschafft hat. Im nächsten Kapitel werden
wir Ihnen zeigen warum Sie besser "em" nutzen sollten, aber lassen Sie
uns hier mit "pt" fortfahren. Der zweite Teil des Wertes - serif -
teilt dem Browser mit dass er eine Schriftart mit Serifen nutzen soll
(diese kleinen Verziehrungen an den Buchstaben, Kapitel 5 gibt dazu
weitere Informationen). Diese dekorativen Schriftarten passen besser zu
einer Homepage über Bach da es damals noch keine modernen Serifen-losen
Schriftarten gab. Hier das Ergebnis:
(Schauen Sie selbst)
--
[image]
Beachten Sie bitte dass wir hier der padding-Eigenschaft nur einen Wert
(0.5em) zugewiesen haben. Genau wie bei der margin Eigenschaft kann
padding 4 Werte annehmen. Diese werden sich auf die Abstände oben,
rechts, unten und links auswirken. Wie auch immer, wenn ein Wert für
alle vier Seiten gelten soll ist es ausreichend diesen nur einmal
anzugeben. Dies ist anwendbar auf padding und margin (sowie auch auf
andere Umrandungs-Eigenschaften welche wir später noch besprechen
werden).
Häufige Aufgaben: Verlinkungen
Um das Lesen von HTML Dokumenten dem Besucher zu erleichtern sollten
sich Verlinkungen von restlichen Text abheben. HTML Browser stellen
Links in der Regel mit einem Unterstrich dar. Auch haben sich gewisse
Farb-Schemata eingebürgert um dem Nutzer zu signalisieren ob ein Link
bereits besucht wurde oder nicht. Da Links ein grundlegender
Bestandteil des Webs sind bietet CSS ganz spezielle Möglichkeiten um
diese zu designen. Hier ein Beispiel:
A:link { text-decoration: underline }
Das obige Beispiel legt fest dass noch nicht besuchte Links
unterstrichen dargestellt werden sollen:
(Schauen Sie selbst)
[image]
Die Links werden wie von uns gewollt unterstrichen dargestellt, aber
ebenso auch in der Farbe blau was wir jedoch nicht festgelegt hatten.
Wenn Sie dem Browser nicht alle möglichen Styles für einen Link
vorgeben so wird er aus einer Standard-Farbpalette selbst auswählen.
Das Zusammenarbeiten von selbst erstellten Styles, Browser eigenen
Styles und Benutzer-definiertern Styles ist ein anderer Bereich von CSS
bei welchen Lösungen für Konfliksituationen bereitgestellt werden
müssen. Das C in CSS steht für Cascade (Verkettung). Wir werden diese
Verkettung weiter unten erklären.
Dem Selektor (A:link) schenken wir hier ein wenig mehr Aufmerksamkeit.
Sie wissen vielleicht schon dass es sich bei "A" um ein HTML Element
handelt, der zweite Teil ist jedofch neu. ":link" wird in CSS als
sogenannte Pseudoklasse bezeichnet. Pseudoklassen werden dafür
--
einzelnes Dokument Style Sheets aus vielen verschiedenen Quellen nutzen
kann: dem Browser, dem Designer oder dem Besucher der Seite selbst.
In den letzten Beispielen haben Sie gesehen dass sich die Farbe der
Links ohne irgendwelche Style Sheet Angaben in ein blau verändert hat.
Ebenso wusste der Browser wie er blockquote Absätze und h1
Überschriften formatieren musste ohne dass wir es ihm gesagt haben.
Alles was der Browser über diese Formatierungen weiss ist in seinem
eigenen Standard Style Sheet hinterlegt und wird mit dem Style Sheet
des Autors und denen des Besuchers bei der Darstellung verbunden.
Wir wissen schon seit Jahren dass Designer ihre eigene Style Sheets
verwirklichen wollen. Wir haben aber auch herausgefunden dass der
Seitenbesucher selbst ebenfalls festelegen möchte wie sich ihm eine
Webseite präsentiert. Dies kann dadurch realisiert werden indem ein
persönlicher Style Sheet im Browser angegeben wird. Alle Konflikte
zwischen den verschiedenen Style Sheets müssen vom Browser gelöst
werden. In der Regel besitzt der Style Sheet des Designers die höchste
Priorität, gefolgt vom Style Sheet des Besuchers...gefolgt vom Style
Sheet des Browsers. Aber ebenso kann der Besucher eine eigene Style
Sheet Regel als besonders wichtig deklarieren und damit die Regeln des
Designers oder Browsers überschreiben.