Cascading Style Sheets
Werbung
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 <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 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.
<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
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
