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?

Verwendung mit HTML? Verwendung mit XML? Transformations-Sprache? Syntax

CSS

XSL

ja ja nein CSS

nein ja ja 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 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 ElementName 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] *.warning *#intro

ist äquivalent zu ist äquivalent zu ist äquivalent zu

[LANG=fr] .warning #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. Dies ist normaler Fliesstext. Dies ist eine Warnung! 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

height

width

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 – ex – px

die Höhe des aktuellen Fonts die Höhe von "x" 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