jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP

Transkript

1 jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER

2 KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute die beste Methode, Webseiten effektiv zu formatieren. Wie Sie Style-Sheets einsetzen, haben Sie bereits in Kapitel 1»HTML und CSS lernen«gelesen. Dieses Kapitel führt Sie in den Einsatz der wichtigsten CSS-Befehle ein. Sie lernen: Text zu formatieren eine Schriftart für eine ganze Seite festzulegen Absätze zu verschönern Rollover mit hover Elemente mit CSS zu platzieren 3.1 Formatieren mit CSS In diesem Abschnitt wollen wir Ihnen einige Beispiele zeigen, die in der Praxis am häufigsten benötigt werden. Sie lernen die wichtigsten Befehle kennen, um Text zu formatieren, lernen, wie Sie am schnellsten einer ganzen Seite eine Schriftart zuweisen, und formatieren Links mit CSS Schriftformatierung Schriftformatierungen kommen meist in Absätzen oder Überschriften zum Einsatz. Der folgende Absatz ändert die Schriftart und den Schriftschnitt eines 93

3 jetzt lerne ich 3 CSS anwenden Absatzes. Die beiden Stilbefehle werden einfach durch Strichpunkt getrennt aneinandergefügt: Listing 3.1: Stilbefehle für einen Absatz <p style="font-family:courier; font-style:italic;">normaler Text in Courier und kursiv</p> Abb. 3.1: Die Schrift erscheint in Courier und kursiv Wie schon erwähnt, bietet CSS eine Vielzahl von Befehlen. Gerade zur Schriftformatierung gibt es immense Möglichkeiten. Die folgende Tabelle enthält die wichtigsten Formatierungen im Überblick: Tabelle 3.1: Schriftformatierung mit CSS Befehl Beschreibung Werte font-family font-style font-variant font-size Legt eine Schriftfamilie oder Schriftart fest. Mehrere Schriften schreiben Sie mit Kommata getrennt hintereinander. Legt den Schriftstil fest. Erlaubt Ihnen, einen Text nur als Kleinbuchstaben darzustellen. Funktioniert nur mit dem Internet Explorer. Legt die Größe der Schrift fest. Eine Schrift (z.b. Arial) oder eine Schriftfamilie (serif, sans serif etc.) italic (kursiv) oblique (Verwendet den Schriftschnitt oblique; meist auch kursiv) smallcaps (Text in Kleinbuchstaben) Numerische Werte. Können in Punkt (pt), Prozent von der normalen Schriftgröße (%) oder mit absoluten Begriffen wie small, medium und large angegeben werden. font-weight Stärke der Schrift bold (fett) numerisch in einer Skala von 100 bis (400 = normal, 700 = fett) 94

4 Formatieren mit CSS jetzt lerne ich Befehl Beschreibung Werte text-align Ausrichtung des Texts center (zentriert) justify (Blocksatz; funktioniert nicht mit gängigen Browsern) left (links) right (rechts) text-decoration Besondere Textauszeichnungen underline (unterstrichen) blink (Text blinkt) line-through (Text durchgestrichen) overline (Linie über Text) Einige der Stilbefehle können auch im font-befehl zusammengefasst werden: p {font: italic bold 18pt Arial;} Wichtig ist dabei die Reihenfolge. Wenn diese nicht stimmt, wird überhaupt keiner der Werte umgesetzt. Die richtige Reihenfolge ist: font-style, fontweight, font-size, font-face Eine Schriftart für die ganze Seite definieren Sehr häufig wollen Sie für eine Seite eine Standard-Schriftart definieren. Wenn Sie dies an zentraler Stelle in einem Style-Sheet tun, sind Sie sehr flexibel und können die Einstellung jederzeit ändern. <html> <head> <title>eine Schriftart für das gesamte Dokument</title> <style type="text/css">  </style> </head> <body> <h1>eine Überschrift</h1> <p>normaler Text</p> <table border="1"> <tr> <td>text in einer Tabelle</td> </tr> </table> Tabelle 3.1: Schriftformatierung mit CSS (Forts.) 1 Listing 3.2: Eine Schriftart für die gesamte Seite 95

5 jetzt lerne ich 3 CSS anwenden <ul> <li>text in einer Liste</li> </ul> </body> </html> Abb. 3.2: Eine Schriftart für die gesamte Seite Das obige Beispiel zeigt eindrucksvoll die Wirkungsweise eines Style-Sheets. Mit einer einfachen Code-Zeile im Kopfbereich der Seite definieren Sie die Schriftart für alle vorkommenden Texte. 1 In dieser Zeile definieren wir die Schriftart für das <body>-tag und für das <td>-tag. Die Schriftart für den <body>-tag gilt für jeglichen Text innerhalb dieses Tags, mit Ausnahme dem in Tabellen. Die Schriftart für Text in Tabellen legen wir fest, indem wir das <td>-tag genauso definieren wie das <body>- Tag. Wenn Sie im Körper der Seite für ein Tag eine andere Schriftart definieren, so überschreibt diese die Vorgabe des Style-Sheets Links Für Links bieten die Style-Sheets einige interessante Variationen. Vor allem gibt es für den normalen Link mit <a> schon drei vordefinierte Versionen, sogenannte Pseudo-Klassen: a:link steht für einen normalen Link. a:active steht für den Link, wenn der Nutzer darauf klickt. a:visited legt die Attribute für einen besuchten Link fest. Jeder dieser Versionen können Sie einzeln Farbe, Schriftart etc. zuweisen. 96

6 Formatieren mit CSS jetzt lerne ich Eine weitere Besonderheit ist ein nicht unterstrichener Link wie ihn beispielsweise die Website des SPIEGEL ( einsetzt. Abb. 3.3: Auf der Homepage des Spiegel werden rote, nicht unterstrichene Links verwendet Einen nicht unterstrichenen Link erreichen Sie mit dem Attribut textdecoration: none. Im Folgenden ein kleines Beispiel: <html> <head> <title>nicht unterstrichene Links</title> <style type="text/css">  </style> </head> <body> <p><a href="index.htm">ein nicht unterstrichener Link</a></p> </body> </html> Mittlerweile sind nicht unterstrichene Links auf sehr vielen Webseiten zu finden. Prinzipiell spricht auch nichts dagegen, allerdings sollten Sie darauf achten, dass der Nutzer klar erkennen kann, dass es sich um einen Link handelt. Listing 3.3: Ein nicht unterstrichener Link 1 97

7 jetzt lerne ich 3 CSS anwenden 3.2 Ein einfacher Rollover-Effekt Sie haben beim Surfen sicherlich schon öfter Schaltflächen entdeckt, die beim Darüberfahren mit der Maus ihr Aussehen ändern. Diese Funktionalität nennt man Rollover-Effekt. Sie wird normalerweise erreicht, indem eine Grafik mit dem Event-Handler onmouseover per JavaScript mit einer anderen vertauscht wird. Bisher ließ sich ein solcher Rollover-Effekt nicht mit normalem Text realisieren. Mit Style-Sheets gibt es allerdings einen Trick, der zumindest im Internet Explorer funktioniert. Und zwar die Pseudo-Klasse A:hover. Wenn Sie für sie eine andere Farbe definieren, wird beim Rollover die Farbe gewechselt. Im Folgenden finden Sie ein kleines Code-Beispiel: Listing 3.4: Ein einfacher Rollover-Effekt 1 <html> <head> <title>ein Rollover</title> <style type="text/css">  </style> </head> <body> <p><a href="index.htm">ein nicht unterstrichener Link</a></p> </body> </html> In dem Beispiel haben wir für die Rollover-Farbe gelb festgelegt. Außerdem haben wir die drei anderen Pseudo-Klassen für Links eingesetzt, um dem Link eine Farbe und keine Unterstreichung zu geben. Verwenden Sie diesen Effekt ruhig auf Ihren Seiten. Er funktioniert zwar nur auf dem Internet Explorer, aber Nutzer des Netscape Navigators oder des Mozilla erleiden keine funktionalen Einbußen. 3.3 Absätze Absätze lassen sich mit CSS in verschiedenster Form gestalten. Wie Sie sie positionieren, lernen Sie in Abschnitt 3.5. Hier finden Sie die Möglichkeiten, Absätze zu formatieren. Zwei Pseudo-Klassen helfen, die erste Zeile bzw. den ersten Buchstaben eines Absatzes mit eigenen Stil-Befehlen zu versehen: 98

8 Absätze jetzt lerne ich p:first-line. Diese Pseudo-Klasse erlaubt Ihnen, einen Stil für die erste Zeile eines Absatzes festzulegen. p:first-letter bietet Ihnen die Möglichkeit, für den ersten Buchstaben eines Absatzes einen anderen Stil zu vergeben. Das folgende Beispiel zeigt first-letter im Einsatz: <html> <head> <title>absätze mit Pseudo-Klassen</title> <style type="text/css">  </style> </head> <body> <p>absatz mit großem Anfangsbuchstaben.</p> </body> </html> Listing 3.5: Ein Absatz mit Pseudo-Klasse Abb. 3.4: Der große Anfangsbuchstabe zieht Aufmerksamkeit auf sich, funktioniert aber nicht in Netscape 4.x Das folgende Beispiel zeigt eine weitere Alternative zum Formatieren von Rahmen. Mit dem Stil-Befehl border legen Sie einen Rahmen fest. Zuerst geben Sie den Stil, dann die Dicke und zum Schluss die Farbe fest: <html> <head> <title>absatz mit Rahmen</title> <style type="text/css">  </style> </head> <body> <p class="rahmen1">absatz mit Rahmen</p> </body> </html> Listing 3.6: Ein Absatz erhält einen Rahmen 99

9 jetzt lerne ich 3 CSS anwenden Abb. 3.5: Der Absatz hat einen doppelten, blauen Rahmen Neben dem allgemeinen Befehl border gibt es noch einige weitere, um Stil, Dicke und Farbe einzeln festzulegen. Die folgende Tabelle zeigt sie. Tabelle 3.2: Rahmen um Absätze Attribut Beschreibung Werte border-color Rahmenfarbe Als hexadezimaler Wert, mit dem Farbnamen oder als RGB-Wert (absolut und prozentual) border-style Art des Rahmens. Vorsicht, die meisten Effekte funktionieren nur im Internet Explorer. Normalerweise sollte man die Effekte vermeiden, da sie sehr uneinheitlich dargestellt werden. none (kein Rahmen wird angezeigt) double (doppelt) groove (Rahmen mit Beleuchtungssimulation) inset (3-D-Effekt mit Farbeffekt innen) outset (3-D-Effekt mit Farbeffekt außen) ridge (3-D-Effekt) solid (Rahmen ist normal einfarbig) Außerdem gibt es die zwei Werte dashed (gestrichelt) und dotted (gepunktet), die von keinem der beiden gängigen Browser dargestellt werden. border-width Dicke des Rahmens Längenmaß wie z.b. Pixel (px), Zentimeter (cm) oder Inch (in) medium (mittel) thin (dünn) thick (dick) 3.4 Hintergründe Style-Sheets erlauben, genau wie HTML-Befehle, einen Hintergrund zu vergeben. Allerdings können sie noch einiges mehr. Beispielsweise lassen sich Hintergründe mit CSS auch für Absätze anlegen. Das zugehörige Style-Sheet- Attribut für Hintergründe heißt background und enthält die meisten anderen Style-Sheet-Attribute durch Leerzeichen getrennt. Die Reihenfolge ist nicht wichtig: body {background: blue url(textur.gif) fixed;} 100

10 Hintergründe jetzt lerne ich Mit dem obigen Beispiel legen Sie einen Hintergrund mit der Farbe Blau und dem Hintergrundbild TEXTUR.GIF fest. Das Hintergrundbild ist fixiert und scrollt nicht mit. Farben geben Sie entweder mit Farbname, hexadezimaler Notation oder als RGB-Farbe (rgb(rot, Grün, Blau)) an. Die Farbe ist in diesem Fall allerdings nicht sichtbar, da das Hintergrundbild auf dem gesamten Hintergrund wiederholt wird. Die RGB-Notation von Farben kann entweder mit den absoluten Farbwerten oder mit Prozentwerten der RGB-Farben erfolgen. 1 Abb. 3.6: Ein Hintergrund mit CSS Neben background können Sie auch einige speziellere CSS-Befehle verwenden. Sie finden sie in der folgenden Tabelle: Attribut Beschreibung Werte background-attachment Legt fest, ob das Hintergrundbild gescrollt werden kann. fixed (Hintergrundbild ist fixiert) scroll (Hintergrund scrollt mit; Standardeinstellung) background-color Hintergrundfarbe Farbe in hexadezimaler Notation, als Farbname oder mit dem RGB- Farbwert transparent (transparente Hintergrundfarbe) background-image Adresse des Hintergrundbildes url(adresse) (bei Adresse geben Sie einen relativen oder absoluten Link an) transparent (kein Hintergrundbild, Standardeinstellung) Tabell 3.3: Befehle für Hintergrundbilder 101

11 jetzt lerne ich 3 CSS anwenden Tabell 3.3: Befehle für Hintergrundbilder (Forts.) Attribut Beschreibung Werte background-position background-repeat Die Position des Hintergrundbildes im x/y-koordinatensystem. Nullpunkt des Koordinatensystems ist die Fensterecke links oben. Legt fest wie das Hintergrundbild wiederholt wird. Koordinaten in Pixel oder Prozent (z.b. background-position: ). top (oben) center (mittig) bottom (unten) left (links) right (rechts) repeat (horizontal und vertikal wiederholt; Standardeinstellung) repeat-x (horizontal wiederholt) repeat-y (vertikal wiederholt) no-repeat (Hintergrundbild wird nicht wiederholt) 3.5 Positionieren mit CSS Da eine Webseite normalerweise von links oben nach rechts unten verläuft, ist die Positionierung von Elementen nicht so einfach. Im Prinzip gibt es nur zwei Methoden: die Positionierung mit Tabellen und die Positionierung mit CSS. Über Tabellen haben Sie schon in Kapitel 2»HTML anwenden«das Wichtigste gelesen. Die CSS-Alternative lernen Sie hier kennen Abstände Mit dem Attribut margin legen Sie den Abstand für Elemente fest. Für das <body>-tag sieht das so aus: body {margin: 60px 80px;} 1 Der linke Wert gibt den Abstand oben und unten an, der rechte den Abstand links und rechts. Mögliche Werte sind Angaben in Pixel (px), Prozent (%) oder Inch (in). Wenn Sie auf auto schalten, wird der Abstand vom Browser festgelegt. 102

12 Positionieren mit CSS jetzt lerne ich Abb. 3.7: Abstand von oben und links Weitere Attribute regeln den Abstand in alle vier Richtungen einzeln: Attribut Beschreibung Werte margin-bottom Abstand von unten Längenmaß oder Prozentwert margin-left Abstand von links Längenmaß oder Prozentwert margin-right Abstandvon rechts Längenmaß oder Prozentwert margin-top Abstand von oben Längenmaß oder Prozentwert Tabelle 3.4: Die Abstände für alle vier Richtungen Positionieren Abstände alleine reichen allerdings noch nicht zum exakten Positionieren aus. Dafür legen Sie Koordinaten für das jeweilige Element fest. top gibt die Koordinate von oben, left die Koordinate von links an: <div style="position:absolute; top:150px; left:150px; width:150px;"> <p>ein positionierter Absatz</p> </div> position legt fest, wie die Positionierung erfolgt: absolute fixiert ein Element absolut im immer gleichen Abstand zum Fensterrand. Diese Art der Positionierung kommt normalerweise zum Einsatz, wenn Sie mit Style-Sheets positionieren. fixed platziert ein Element ebenfalls im festgelegten Abstand. Allerdings wird das Element nicht mitgescrollt, wenn Sie sich mit den Scroll-Balken bewegen. Diese Option wird leider von keinem gängigen Browser unterstützt. relative orientiert die Position des Elements immer an dem jeweiligen Vorgänger. Wenn dieser beispielsweise größer ist, als es die Position des Nachfolgers erlaubt, wird es direkt an den Vorgänger angeschlossen. static behält die normale Folge der einzelnen Elemente bei. 103

13 jetzt lerne ich 3 CSS anwenden Abb. 3.8: Ein absolut positionierter Absatz Ebenenreihenfolge Ein positioniertes Element liegt damit in einer Ebene. Was aber, wenn Sie mehrere Elemente platzieren und sich diese überlappen? Dann kommt entscheidet die Reihenfolge im HTML-Code. Das zuletzt kommende Element liegt am höchsten: <div style="position:absolute; top:150px; left:150px; width:150px; border: double blue 10px; background:white;"> <p>ein positionierter Absatz</p> </div> <div style="position:absolute; top:150px; left:150px; width:150px; background:green;"> <p>ein zweiter Absatz</p> </div> Abb. 3.9: Der zweite Absatz liegt über dem ersten 104

14 Fragen jetzt lerne ich Um diese Reihenfolge umzudrehen, können Sie den Stil-Befehl z-index einsetzen. Er weißt einem Element einen Index zu, der bei 0 (auf der untersten Ebene) beginnt. <div style="position:absolute; top:150px; left:150px; width:150px; z-index:2; border: double blue 10px; background:white;"> <p>ein positionierter Absatz</p> </div> <div style="position:absolute; top:150px; left:150px; width:150px; z-index:1; background:green;"> <p>ein zweiter Absatz</p> </div> Abb. 3.10: Nun liegt der erste über dem zweiten Absatz, so dass der zweite Absatz ist vollständig verdeckt ist. 3.6 Fragen 1. Worin unterscheiden sich die Einheiten px und pt? 2. Wieso sollten Sie manchmal besser einen Rollover-Effekt mit JavaScript realisieren? 3. Welche Möglichkeiten zur Farbnotation gibt es in CSS? 4. Binden Sie zwei Grafiken in eine HTML-Seite ein. Positionieren Sie die beiden so, dass sie einander leicht überlappen. 5. Was müssen Sie tun, damit die überlappenden Grafiken auch im Netscape Navigator 4.x richtig positioniert werden? 6. Ändern Sie die Ebenenreihenfolge der beiden Grafiken. 105