17. CSS - Cascading Style Sheets Kapitel 17: CSS

Transkript

1 17. CSS - Cascading Style Sheets 17-1 Kapitel 17: CSS

2 17. CSS - Cascading Style Sheets 17-2 Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung Die Beispiele sind dem Tutorial: entnommen.

3 17. CSS - Cascading Style Sheets 17-3 Was kann CSS? (1) CSS steht für Cascading Style Sheets. Es ist ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z.b. zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittenere Positionierung und vieles anderes benutzen. Zum Verständnis von CSS sind Grundkenntnisse von HTML nötig.

4 17. CSS - Cascading Style Sheets 17-4 Was kann CSS? (2) Mit CSS kann Inhalt und Layout einer HTML-Seite voneinander getrennt werden. CSS bietet mehr Möglichkeiten und ist zudem viel genauer und ausgereifter als die Formate von HTML. CSS wird von allen neueren Browsern unterstützt.

5 17. CSS - Cascading Style Sheets 17-5 Werkzeuge für CSS Zum Erstellen von Style Sheets sollte nur ein einfacher Texteditor, der keine Formatinformationen mit speichert, verwendet werden (z. B. Notepad oder Wordpad - Speicherung als text - in Windows). Es gibt auch spezielle CSS-Editoren (z.b. Topstyle) Zum Testen benutzt man einen möglichst aktuellen Browser.

6 17. CSS - Cascading Style Sheets 17-6 Vorteile von CSS Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus präzisere Kontrolle über das Layout verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.) eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken

7 17. CSS - Cascading Style Sheets 17-7 Syntax von CSS Selector {Eigenschaft : Wert;...} Selector: Welchem HTML-Tag wird diese Eigenschaft zugeordnet (z. B."body") Eigenschaft: Die Eigenschaft kann z. B. die Hintergrundfarbe sein ("background-color") Wert: Der Wert der Eigenschaft background-color kann z. B. rot sein ("#FF0000")

8 17. CSS - Cascading Style Sheets 17-8 Wo wird der CSS-Code angegeben? (1) 3 Möglichkeiten: 1. In-line mit dem Attribut style: Beispiel: <html> <head> <title>example</title> </head> <body style="background-color: #FF0000;"> <p>das ist eine rote Seite.</p> </body> </html>

9 17. CSS - Cascading Style Sheets 17-9 Wo wird der CSS-Code angegeben? (2) 2. In-document (im Header) mit dem Tag <style>: Beispiel: <html> <head> <title>example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>das ist eine rote Seite. </p> </body> </html>

10 17. CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (3) 3. Verweis auf ein externes Style-Sheet: Dieser Verweis muss im Header des HTML-Dokumentes eingetragen werden Beispiel: <html> <head> <title>example</title> <link rel="stylesheet" type="text/css" href="css/name.css" /> </head> <body>... </body> </html> css/name.css body {background-color: #FF0000;}

11 17. CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (4) noch Verweis auf ein externes Style-Sheet: Das Style-Sheet Format(e) befindet sich in einer externen Datei mit Namen name.css Diese Datei im Unterverzeichnis css und hat den folgenden Inhalt (Beispiel): body { background-color: #FF0000; } Diese Form hat den Vorteil, dass das gleiche Style- Sheet für mehrere HTML-Dateien verwendet werden kann.

12 17. CSS - Cascading Style Sheets Wo wird der CSS-Code angegeben? (5) Alle Formatierungsangaben werden durch den Namen bestimmten Gruppierungstags zugewiesen. Beispiel: P {font-style: italic; font-weight: bold; font-size: 15px; font-family: arial, sans-serif; color:maroon; text-align:center;} Diese Eigenschaften werden den Blöcken, die in <P>...</P> eingeschlossen sind, zugewiesen. mit * können Eigenschaften allen zugewiesen werden.

13 17. CSS - Cascading Style Sheets Inhalt 1. Einführung CSS 2. Farben, Hintergründe, Zeichensätze 3. Gruppierungen 4. Box-Modell 5. Validierung

14 17. CSS - Cascading Style Sheets Farben und Hintergründe - Vordergrundfarbe Die Eigenschaft color beschreibt die Vordergrundfarbe (Textfarbe). Beispiel: alle Überschriften sollen rot dargestellt werden. Falls sie mit dem <h1>-tag markiert werden, kann man folgenden Code anwenden: h1 { color: #ff0000; } Farben können als Hexadezimalwerte, wie im obigen Beispiel (#ff0000), mit dem jeweiligen englischen Farbnamen (red) oder als RGB-Werte (rgb(255,0,0)) angegeben werden.

15 17. CSS - Cascading Style Sheets Hintergrundfarbe Die Eigenschaft background-color beschreibt die Hintergrundfarbe. Die allgemeine Hintergrundfarbe sollte im Element <body> festgelegt werden. Zum Hinterlegen einer Schrift kann diese Eigenschaft aber auch anderen Elementen zugewiesen werden. Beispiel: body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Liste der hexadezimalen Farbwerte:

16 17. CSS - Cascading Style Sheets Hintergrundbild (1) Die Eigenschaft background-image beschreibt das Hintergrundbild. Sie muss im Element <body> zusammen mit dem Ort des Bildes angegeben werden. Beispiel: body { background-color: #FFCC66; background-image: url("bildname.gif");} Das Bild wiederholt sich standardmäßig sowohl horizontal als auch vertikal.

17 17. CSS - Cascading Style Sheets Hintergrundbild (2) Mit der Eigenschaft background-repeat kann die Wiederholung des Bildes beeinflußt werden. Wert background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat Beschreibung Wdh.: horizontal Wdh.: vertikal Wdh.: horizontal und vertikal keine Wdh. Weitere Eigenschaften des Hintergrundbildes: Eigenschaft Wert Wirkung background-attachment fixed oder scroll Bild scrollt bzw.bleibt fest background-position z.b.bottom right Bild wird rechts unten pos.

18 17. CSS - Cascading Style Sheets Hintergrundbild (3) Beispiel: body { background-color: #FFCC66; background-image: url( bild.jpg ); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; } Wenn die Reihenfolge eingehalten wird: background-color background-image background-repeat background-attachment background-position geht es noch einfacher: background: #FFCC66 url( bild.jpg ) no-repeat fixed top left;

19 17. CSS - Cascading Style Sheets Zeichensätze (Fonts)(1) CSS - Eigenschaften: font-style: "normal" (kein Stil), "italic" (kursiv) oder "oblique" (schräg) font-variant: "normal" oder "small-caps"(großbuchst. font-weight: "normal" oder "bold" font-size: Schriftgröße (Pixel oder Prozent) font-family: da man nicht weiss, welche Fonts auf dem Zielcomputer implementiert sind, werden möglichst mehrere angegeben, oder eine "font-family". Ein Font davon wird dann ausgewählt.

20 17. CSS - Cascading Style Sheets Zeichensätze (Fonts)(2) Alle Font-Eigenschaften werden in den Elementen zur Markierung von Texten angegeben z. B.: p, t1...t6, td, Beispiel: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } oder in Kurzform unter Beachtung der obigen Reihefolge: p { font: italic bold 30px arial, sans-serif; }

21 17. CSS - Cascading Style Sheets Absatzformatierungen Die Absatzformatierungen werden an den gleichen Stellen angegeben wie die Fonts und zwar: text-indent: Einrückung am Anfang eines Absatzes (in Pixel) text-align: Ausrichtung "left", "right", "center", "justify" (Blocksatz) text-decoration: "underline", "overline", "line-through" letter-spacing: Buchst.abst in Pixel (z.b. 3px) text-transform: "uppercase" Großbuchst., "capitalize" Anfbuchst. groß

23 17. CSS - Cascading Style Sheets Pseudoklassen Mit Pseudoklassen werden unterschiedliche Zustände (Ereignisse) bei Links beschrieben. Man verwendet das <a>-tag. Zustände: a: link: nicht besuchter Link a: visited: besuchter Link a: active: aktiver Link a: hover: vom Mauszeiger berührter Link Diesen Pseudoklassen können nun unterschiedliche Eigenschaften, z.b. Farben zugewiesen werden.

24 17. CSS - Cascading Style Sheets Links - Beispiele a:link { color: blue; } a:visited { color: red; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; } Effekt von hover - Die Schrift wird orange und kursiv beim Überfahren mit der Maus. Andere Effekte kann man erhalten, wenn man z.b. in a:hover letter-spacing:10px oder text-transform:uppercase benutzt. mit text-decoration:none wird die Unterstreichung von Links unterdrückt.

25 17. CSS - Cascading Style Sheets class Mit class wird es möglich, ausgewählten Elementen spezielle Eigenschaften zuzuweisen. Damit müssen nun nicht alle Links gleich aussehen. Im folgenden Beispiel sehen die Links für Weißwein gelb, die für Rotwein rot und die restlichen blau aus. Wie man im folgenden Beispiel sieht, kann man Eigenschaften von Elementen einer bestimmten Klasse mit Hilfe von.classname im Stylesheet des Webdokumentes festlegen.

26 17. CSS - Cascading Style Sheets Beispiel für class <p> Trauben für Weißwein</p> <ul> <li><a href="ri.htm" class="ww">riesling</a></li> <li><a href="ch.htm" class="ww">chardonnay</a></li> </ul> <p> Trauben für Rotwein</p> <ul> <li><a href="me.htm" class="rw">merlot</a></li> <li><a href="pn.htm" class="rw">pinot Noir</a></li> </ul> a { color: blue; } a.ww { color: #FFFFFF; } a.rw { color: #800000; }

27 17. CSS - Cascading Style Sheets id Mit id kann einzelnen Elementen ein spezielles Format gegeben werden. Das besondere an dem Attribut id ist, dass es kein weiteres Element im selben Dokument geben kann, welches dieselbe id trägt. Jede id muss einzigartig sein. Im folgenden Beispiel werden den Kapitel-Überschriften eines Dokumentes unterschiedliche id s gegeben. Im CSS wird muß dem Selektor ein Doppelkreuz vorangestellt werden - #name.

28 17. CSS - Cascading Style Sheets Beispiel für id <h1 id="k1">kapitel 1</h1>... <h2 id="k1-1">kapitel 1.1</h2>... <h1 id="k2">kapitel 2</h1>... <h2 id="k2-1">kapitel 2.1</h2>... CSS dazu: #k1-1 { color: red; }

29 17. CSS - Cascading Style Sheets div und span div dient zur Gruppierung und damit zur Strukturierung eines Dokumentes und ist von zentraler Bedeutung für die Anwendung von css. span allein ist neutral und bewirkt nichts, doch mit CSS zusammen können visuelle Besonderheiten erzeugt werden. Es wird innerhalb eines Blockes im Textfluss verwendet. div dagegen gruppiert Blöcke. Beim div-beispiel werden die Ergebnisse rot bzw. schwarz hinterlegt. Die Schriftfarbe ist weiß.

30 17. CSS - Cascading Style Sheets Beispiel für span In Goethes Ausspruch sollen die Tugenden rot geschrieben werden: <p><span class="tugend">edel</span> sei der Mensch, <span class="tugend">hilfreich</span> und <span class="tugend">gut</span>.</p> Das zugehörige CSS: span.tugend { color:red; } Das Ergebnis: Edel sei der Mensch, hilfreich und gut.

31 17. CSS - Cascading Style Sheets Deutsche Bundeskanzler: <div id="spd"><ul> <li>gerhard Schröder</li> <li>helmut Schmidt</li> </ul></div> <div id="cducsu"><ul> <li>angela Merkel</li> <li>helmut Kohl</li> </ul> </div> Beispiel für div CSS: #spd{ background red; color white;} #cducsu{ background black; color white;}

33 17. CSS - Cascading Style Sheets Box-Modell (1) Das Box-Modell in CSS beschreibt die Boxen (oder Kästen), die für HTML-Elemente generiert werden. Einstellungen: Außenabstand - margin Rand - border Innenabstand - padding im Inhalt - height und with

34 17. CSS - Cascading Style Sheets Box-Modell (2)

35 17. CSS - Cascading Style Sheets Randabstände (1) Die Randeinstellungen gelten für die gesamte Seite: Beispiel: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } oder für einen Block: p { margin: 5px 50px 5px 50px;} ausschlaggebend ist das Gruppierungselement analog kann padding für die Innenabstände verwendet werden.

36 17. CSS - Cascading Style Sheets Randabstände(2) Die Elemente zum Einstellen der Boxen werden in den Gruppierungselementen z. B. div, span, p, h1...h6, ul, ol angegeben. Beispiel: <div class="beisp">dies ist ein Block, der gelb unterlegt ist und vorgegebene Randabstände hat. </div> CSS: div.beisp { background: yellow; padding: 20px 20px 20px 80px; }

37 17. CSS - Cascading Style Sheets Umrandung Die Boxen können umrandet werden. Die Umrandung kann farbig border-color in unterschiedlicher Dicke border-with z.b.thin, medium, thick oder Pixel in unterschiedlicher Strichart border-style z.b. solid, dotted, double,... ausgeführt werden. Dabei kan jeder Rand einzeln formatiert werden z.b.border-top-with

38 17. CSS - Cascading Style Sheets Umfließender Text Mit der Eigenschaft float kann ein Element (z.b. ein Bild) von einem anderen (z.b. Text) umflossen werden. Beispiel: <div id="pic"> <img src="bild.jpg" alt="bild"> </div> Dieser Text fließt um das Bild herum</p> CSS: #pic { float:left; width: 100px;} Dieser Text steht unter dem Bild <p id="unten">unterer Text</p> CSS: #unten {clear:left}

39 17. CSS - Cascading Style Sheets absolute Positionierung Es können auch Boxen fest positioniert werden. Das Browserfenster wird dabei als koordinatensystem verwendet. Die Positionierung wird in Pixel angegeben. Beispiel: <div id="box1"> Box 1 </div> CSS: #box1{position:absolute;top:50px;left:50px;} Wichtig ist die Angabe position: absolute; Die Abstände werden von oben top und rechts oder links right/left bzw. von unten bottom und rechts oder links in Pixeln angegeben.

41 17. CSS - Cascading Style Sheets Validierung Zweck: Erfolgreich validierte Seiten genügen dem W3C-Standard. Sie werden deshalb mit hoher Wahrscheinlichkeit in unterschiedlichen Browsern gleich dargestellt. HTML- und CSS-Validator: HTML5: HTML5:// CSS-Validator: