CSS Cascading Stylesheets
Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen <div> und <span> Numerische Angaben zu CSS-Eigenschaften Duffner: Erstellen von Web-Seiten 2
Was sind Cascading Stylesheets Ergänzung zu HTML CSS erweitern die Darstellungsmöglichkeiten von HTML im Bereich Typographie und Seitenlayout Strikte Trennung von Layout und Inhalt möglich! Layout CSS HTML Dokumentstruktur CSS-Formate können zentral definiert werden im Header einer HTML-Datei oder in einer separaten Datei, die dann für mehrere HTML-Seiten verwendet werden kann Stylesheets kaskadieren (engl.: "cascading") Stylesheet übernimmt Formatierungen eines übergeordneten Stylesheets ( Vererbung ). Z.B. Schriftart für alle Header-Tags festlegen Schriftgröße für jedes Tag separat Duffner: Erstellen von Web-Seiten 3
Vorteile von CSS mehr Einfluss auf Typographie und Seitenlayout Schriftgröße, Zeilen- und Buchstabenabstand Einrückungen, Ränder und die Elementposition Der Stil wird von der Dokumentstruktur getrennt. evtl. kleinere Dokumente z.b. einmalige Schriftangaben am Dokumentanfang anstelle von <font>-beschreibungen für jedes einzelne Element kürzere Ladezeit! leichteres Site-Management mehrere HTML-Seiten mit einem Stylesheet verbinden Stiländerungen in vielen Webseiten über eine einzige Änderung leicht zu erlernen Duffner: Erstellen von Web-Seiten 4
Nachteile von CSS keine Browserunterstützung älterer Browser Nicht alle Browser interpretieren Stylesheets gleich Mozilla (Firefox) o.k. MS Internet Explorer 6.0 noch Schwächen Duffner: Erstellen von Web-Seiten 5
CSS: Versionen CSS 1.0: 1. CSS-Version 1996 CSS 2.0: 2. CSS-Version 1998 http://www.w3.org/style/css/ Duffner: Erstellen von Web-Seiten 6
Regelsyntax für Stylesheets Stylesheets bestehen aus einer oder mehreren Regeln, die beschreiben, wie ein Seitenelement aussehen soll. p {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 120%;} Absätze <p> in Schriftart Arial (alternativ Helevetica oder andere serifenlose Schrift), Schriftgröße 10 Punkt, Zeilenabstand 1,2 zg. Selektor {Eigenschaft: Wert;} Deklaration Selektoren können HTML-Tags sein oder auch selbst definiert werden. Klassen! Duffner: Erstellen von Web-Seiten 7
Einem HTML-Dokument Styles hinzufügen 1. Externe Stylesheets Formate zentral in separater CSS-Datei definieren z.b. styles.css HTML-Dateien mit dieser Datei verlinken <html> <head> <link rel="stylesheet" type="text/css href= styles.css"> 2. Eingebettete Stylesheets Formate, die im Header einer HTML-Datei vereinbart werden <html> <head> <style type="text/css"> h1 {color: red} p {font-size: 12pt; font-family: Arial;} </style> 3. Inline-Sylesheets Formate innerhalb eines HTML-Tags definieren <H1 STYLE="color: red">eine rote Überschrift</H1> I.d.R. externe Stylesheets verwenden! Duffner: Erstellen von Web-Seiten 8
<div> und <span> klammern einen gemeinsamen Bereich für Text, Grafiken, Tabellen <div> (div = division = Bereich) alles, was zwischen <div> und </div> steht, ist Teil eines Bereiches Bsp. mit Stylesheets: <DIV STYLE="color: blue"> <H1>Titel!</H1> <P>Hier ein ganzer Absatz voller Text.</P> </DIV> <span> erzeugt keinen neuen Absatz Bsp. mit Stylesheets: <P>Dies ist ein Absatz und <SPAN STYLE="color: blue">dieser Bereich wird anders behandelt</span> als der Rest des Absatzes.</P> <div> und <span> werden oft zusammen mit Stylesheets verwendet Duffner: Erstellen von Web-Seiten 9
Numerische Angaben zu CSS-Eigenschaften Abk. Angabetyp Bedeutung Beispiele pt absolut Typogr. Maßeinheit Punkt 1 pt = 1/72 Inches font-size:12pt; pc absolut Typogr. Maßeinheit Pica 1 pc = 12 Punkt line-height:1.2pc; in absolut Inch. 1 Inch = 2.54 cm margin-left:1in; mm absolut Millimeter margin-bottom:10mm; cm absolut Zentimeter font-size:2.54cm; px absolut/ relativ Pixel Abhängig von der Pixeldichte des Ausgabegeräts border-width:3px; em relativ bezogen auf die Schriftgröße des Elements word-spacing:0.3em; ex relativ bezogen auf Höhe des Kleinbuchstaben x im Element font-size:1.3ex; % relativ Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternlements, oder zu einem allgemeineren Kontext. font-size:10pt; line-height:120%; Duffner: Erstellen von Web-Seiten 10