CSS Cascading Style Sheets
Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln an einer Stelle zusammengefasst werden können.
Was ist ein Style Sheet? Style Sheets legen das Aussehen (die Formatierung) von Dokumenten (HTML oder XML) fest. Die Formatierung soll nicht im HTML-Dokument definiert werden, denn: Nur dann werden verschiedene Sichten (Darstellungen) auf die Daten möglich. Es wird ein einheitliches Design für alle Seiten sichergestellt. HTML ist nicht dazu geeignet, Dokumente zu formatieren. Es bietet dafür nicht die nötige Unterstützung.
CSS!" XSL W3C hat mit der Festlegung des XSL Standards angefangen, bevor derjenige von CSS festgelegt war. Wozu gibt es zwei Style Sheet Sprachen? CSS XSL Verwendung mit HTML? ja nein Verwendung mit XML? ja ja Transformations-Sprache? nein ja Syntax CSS XML
Cascading Order Bei Widersprüchlichen Formatierungs-Anweisungen werden diese mit folgender Priorität angewandt: 4 3 2 1 Anweisung innerhalb eines Elementes Interne Style-Definition (im <head> tag) Externe Style Sheets Browser Default
CSS Syntax Jede CSS-Anweisung besteht aus drei Teilen: einem Selektor, den Properties und deren Wert: selector { prop1:value1; prop2:value2;... } body { color:black } p { font-family:"sans serif" } h1 { text-align:center; color:red } p { text-align:center; color:black; font-family:arial }
Kommentare CSS Kommentare können an beliebiger Stelle eingefügt werden. Kommentare starten mit "/*", und enden mit "*/": /* This is a comment */ p { text-align: center; } /* This is another comment */ color: black; font-family: arial
Selektoren
Selektoren Ein einfacher Selektor ist entweder ein Element- Name oder ein *. Diesem können Attribut-Selektoren, ID-Selektoren und Pseudo-Klassen angefügt werden. p:first-child {color:red} p:first-line { text-align: center } *[text] {color:blue} p#chapter1 {color:blue}
Der * Selektor Der universelle Selektor * steht für ein beliebiges Element (bzw. Element-Name). Der Stern kann normalerweise weggelassen werden: *[LANG=fr] ist äquivalent zu [LANG=fr] *.warning ist äquivalent zu.warning *#intro ist äquivalent zu #intro
Gruppierung Selektoren können zu Gruppen zusammengefasst werden. h1, h2, h3, h4, h5, h6 { text-decoration:underline } p[att1], p[att2] { font-weight:bold; color:green }
Das Class Attribut Mit dem Class-Attribut können (HTML-)Elemente weiter unterschieden werden. <p class=normal> Dies ist normaler Fliesstext. </p> <p class=warning> Dies ist eine Warnung! </p> Für die verschiedenen Typen von Abschnitten können dann im Style Sheet verschiedene Formatierungen angegeben werden: p.normal { text-align: justify} p.warning { text-align: center; color:red }
Vererbung Normalerweise werden die gesetzten Properties eines Knotens an alle Kind-Knoten weitervererbt. Die Anweisung body { color: red; font-family: "Times New Roman" } setzt alle Texte in einer roten Times-Roman Schrift.
Properties
Die wichtigsten CSS Properties background-color, background-image, border, border-color, border-style, border-width, color, display, float, font, font-family, font-size, fontstyle, font-variant, font-weight, height, letterspacing, list-style, margin, padding, text-align, text-decoration, text-transform, vertical-align, width, word-spacing,
Color In CSS gibt es die 16 vordefinierten (VGA-)Farben: Beliebige Farben können gesetzt werden durch: rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) oder hexadezimal: #FF0000, #00FF00, #0000FF
Background Der Hintergrund (Farbe, Hintergrundbild,...) wird definiert durch: background-color background-image background-repeat background-attachment background-position oder background. body { background: white /*image*/ url(bar.gif) /*repeat*/ no-repeat /*attachment*/ fixed top } /*position*/
Font Text-Fonts werden definiert durch die Properties: - font-family - font-size - font-style - font-variant -font-weight oder font. p.cl { font-size: 12pt; font-weight: bold; font-family: Arial, sans-serif } p.cc { font: italic 10pt Times, serif } p.ce { font: small-caps bold 12px sans-serif }
Text-Properties Das Aussehen des Textes wird bestimmt durch die Properties -text-indent -line-height - text-align - vertical-align - text-decoration - word-spacing - text-transform - letter-spacing p.cl { text-indent: 0.25in; text-align: justify } p.cc { text-decoration: underline } p.ce { word-spacing: 0.2em }
Text-Beispiele p.ipos { text-indent: 5mm } p.ineg { text-indent: -5mm } p.deco { text-decoration: underline } p.align { text-align: right } p.spacing { letter-spacing: 2mm; line-height: 2mm }
Height, Width Alle Dokument-Elemente erzeugen eine rechteckige Box (element box). Die Grösse dieser Box kann festgelegt werden durch die Properties height und width. margin width height border padding
Margin Die Ränder einer Box können definiert werden durch: -margin-top -margin-bottom -margin-left -margin-right oder margin. p.cl { margin:0.25in } p.cc { margin:10px 20px 10px 20px } p.ce { margin-left: 0.2em }
Border Der Rand (Farbe, Art,...) wird mit den Properties - border-color - border-style - border-width - border-left (-right, -top, -bottom), oder border definiert. h1 { border-width:2mm; border-style:solid; border-color:silver; } h2 { border: thick double blue } h3 { border: thin dotted red }
Padding Der Rand zwischen dem eigentlichen (Text)-Inhalt und dem Rahmen (border) wird definiert durch die Properties - padding-top - padding-bottom - padding-right - padding-left oder - padding h1 { padding-top:3mm; padding-bottom:2mm; padding-left:2mm } h2 { padding : 5mm } h3 { padding : 2mm 3mm 1mm }
List-Style Das Aussehen von Listen kann mit den folgenden Properties definiert werden: list-style-type list-style-image list-style-position, oder list-style li { list-style-type:decimal; list-style-position:inside } li { list-style-image:url(b.gif) } li { list-style: circle outside}
List Beispiel ol li ul li { list-style: square outside; font-weight: normal; } ol li { list-style:lower-roman; font-weight: bold; }
Grössen-Einheiten In CSS sind die folgenden Einheiten bekannt: absolut: cm, mm in (1 in = 2.54 cm) pt (1 pt = 1/72 in) pc (1 pc = 12 pt = 12/72 in) relativ: em die Höhe des aktuellen Fonts ex die Höhe von "x" px Pixel
Unterstützung durch verschiedene Browser Welche CSS Features durch welche Browser (Netscape, Mozilla, Internet Explorer,...) unterstützt werden, kann den Tabellen unter www.richinstyle.com/bugs/table.html entnommen werden
Übung
Cascading Style Sheet Kopieren Sie das File catalog.html unter www.hta-be.bfh.ch/~amrhein/xsl/uebung9 in Ihr Verzeichnis. Erstellen Sie zu diesem HTML-File ein Style Sheet, welches möglichst genau die folgende Ausgabe liefert. Weitere Hinweise finden Sie unter www.hta-be.bfh.ch/~amrhein/xsl/uebung9