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.