|
Was sind Cascading Style-Sheets?
Was kann man mit Style Sheets
definieren?
1. Einbettung der Formatvorlagen
im <Head> von HTML-Dokumenten
1.2 Definition von Klassen <class>
in einer Formatvorlage
2. Inline-Formatvorlagen
3. Auslagerung von Formatvorlagen
und Verknüpfung mit den HTML-Dokumenten
3.1 Wie sieht die Definition
einer externen Datei in der HTML-Seite aus?
4. Eine unvollständige
Übersicht an CSS Befehlen
Beispiel für farbige Scrolleisten und nicht unterstrichene
Links.
Weitere Links zu CSS:
Buchtipps
Was sind Cascading Style-Sheets?
Cascading Style-Sheets (CSS2) des (W3C)
sind Formatvorlagen, wie man sie aus den gängigen Programmen
für Textverarbeitung (z.B Word) und Programmen für Desktop
Publishing (z.B. Publisher) kennt. Darin kann man typografische
Informationen für ein Dokument/Webseite, einer bestimmte
Stelle im Dokument oder seiner gesamten Webseiten definieren.
Style-Sheets (CSS) sind kein Bestandteil von HTML, sondern
eine eigene "Sprache", die allerdings
in HTML verwendet werden kann. Jedoch können nur Internet
Explorer ab der Version 3.0 und Netscape Navigator ab
Version 4, CSS interpretieren. Die anderen Browser "sehen"
nur ein reines HTML-Dokument mit den Formatierungselementen
wie Überschriften, Absätzen Listen und Tabellen usw.
Man kann mit CSS Sachen definieren,
die mit normalem HTML nicht gehen, ausserdem ist es
eine große Hilfe, bei umfangreichen Webseiten, wenn
man eine externe CSS Datei hat, dann braucht man nämlich
nur eine Datei ändern, und nicht 100 oder mehr Seiten.
nach oben
Was kann man mit Style Sheets definieren?
- Formatierung der Hyperlinks (Farben/ Unterstreichung
oder nicht/ Hover, wenn man mit der Maus drüber
geht)
- Schriftart, Schriftgröße und Schriftfarbe
- Textauszeichnungen (fett, kursiv und unterstrichen
...)
- Textausrichtung (Standard/ Zentriert/Rechts/
Blocksatz)
- Zeichenabstand, Zeilenhöhe, Wortabstand
- Rahmen/Tabellen (Farbe, Grösse, Innentext...)
- Vorder- und Hintergrundfarbe oder Hintergrundgrafik
- Mauszeiger können neue Formen annehmen -
wie hier auf der HP
- Randabstände
- Positionierungen (relative und absolut für
beliebige Objekte)
|
nach oben
Wie funktioniert es?
Es gibt drei verschiedene Möglichkeiten
- Punkt 1 und 3 sind am leichtesten):
1. Einbettung der Formatvorlagen im
<Head> Bereich von HTML-Dokumenten
Mit dieser Methode werden die Formatvorlagen
jeweils für eine gesamte Webseite festgelegt.
Die anderen Seiten werden damit nicht formatiert. Die
Einbettung erfolgt über das <style> - Tag im Head
Bereich der Datei. Ein Beispiel:
|
<HTML>
<HEAD>
<TITLE>CSS, welches in einer gesamten HTML-Seite
gilt</TITLE>
<style type="text/css">
<!--
p {font-family: Verdana, Tahoma, Arial, Helvetica;
color:white;font-size:14pt}
h1 {font-size:20pt}
td {font-size:10pt}
li {font-family: Verdana, Tahoma, Arial, Helvetica;
font-size:10pt}
-->
</style>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF">
<H1>Überschrift1</H1>
...Hier kommt dann der Fliesstext...
</BODY>
</HTML>
|
Die obige Anweisung würde beispielsweise
bedeuten, dass im Dokument alle Überschriften ersten
Ordnung sowie der Fliesstext mit der Schrift (in der
Reihenfolge, wie vorhanden) in Verdana, Tahoma, Arial
oder Helvetica in weiss dargestellt werden. Der normale
Fliesstext in der Grösse 14pt und die Überschrift h1
in 20pt. Das Problem bei diesen Anweisungen ist es ,
dass die Formatierungen für alle aufgezählten Elemente
gelten, die damit praktisch neu definiert wurden. Also
sprich - Egal, was Du in Deiner Webseite
für Schriftarten und -farben ausgewählt hast, es gelten
die CSS Angaben! Klicke hier,
um das Beispiel im neuen Fenster anzuschauen.
nach oben
1.2 Definition von Klassen <class>
in einer Formatvorlage
Falls Ihr doch in Eurer Webseite zusätzlich
etwas anderes darstellen wollt, kann man das durch die
Definition von Klassen machen. Danach ist dann sowohl
die Verwendung der mit Formatvorlagen dargestellten
Elemente als auch der Standardformatierungen aus HTML
möglich. Eine Klasse wird folgendermaßen definiert:
|
<HTML>
<HEAD>
<TITLE>Beispiel CSS-Klassen und Standardformatierungen
die gleichzeitig verwendet werden</TITLE>
<STYLE TYPE="text/css">
<!--
H1.klasse { font-family: Arial;color:#ceaa61 }
-->
</STYLE>
</HEAD>
<BODY>
<H1 class="klasse">Überschrift,
die mit CSS definiert wurde</H1>
<H1>Eine ganz normale Überschrift</H1>
...
</BODY>
</HTML>
|
Bei diesem Beispiel wird dann die erste
Überschrift in Arial und dieser 'goldenen" Farbe,
wie hier im Text dargestellt (#ceaa61), während die
zweite Überschrift in der Standard-Schriftart und in
weiss auf dem Bildschirm erscheint. Klicke hier
und Du siehst das Beispiel im neuen Fenster.
nach oben
2. Inline-Formatvorlagen
Inline-Formatierungen können in einer
gesamten Webseite verwendet werden, ebenso wie Attribute
von HTML-Tags, wobei Formatvorlagen natürlich wesentlich
mehr Möglichkeiten bieten. Inline-Formatierungen sind
auch die einzige Möglichkeit, Ausnahmen von anderen
Formatvorlagen festzulegen.
Beispiel einer Inline-Formatvorlage:
|
<HTML>
<HEAD>
<TITLE>Beispiel - Inline-Formatvorlagen</TITLE>
</HEAD>
<BODY bgcolor="#000000" text="#FFFFFF">
<h1 style="color:blue; font-face: Arial,
Verdana; text-indent:15pt;">Überschrift
mit einer Inline Formatierung</h1>
<H1>Eine ganz normale Überschrift</H1>
...
</BODY>
</HTML>
|
Anhand dieses Beispiels dürfte der
Begriff Inline-Formatvorlage wohl deutlich geworden
sein. Es wurden keine Formatierungen im
Head der Webseite vorgenommen, sondern die Formatvorlagen
gleich mit Hilfe des style-Attributs an das Tag angehängt.
Die Formatvorlage endet dann natürlich auch dort, wo
dieses wieder geschlossen wird.
Zur Erklärung der Formatierung:
Die Überschrift der ersten Ordnung (h1), wird in Arial,
Helvetica dargestellt. In der Farbe blau. Und diese
eine Überschrift wird mit 15pt eingerückt (text-indent
15 pt). Die nachvollgende Überschrift wird wieder in
der Standardformatierung dargestellt. Klicke hier
um das Beispiel im neuen Fenster zu sehen.
nach oben
3. Auslagerung von Formatvorlagen und
Verknüpfung mit den HTML-Dokumenten
Für die Definition von Formatvorlagen
einer kompletten Website ist es natürlich vorteilhaft,
diese Formatvorlagen in einer ausgelagerten Datei zu
speichern und zentral abzulegen, so dass im Falle einer
Layoutänderung nur das Style-Sheet (.css Datei) bearbeitet
werden muss. Damit erspart man sich auf Dauer viel Zeit
und Arbeit, aber auch Ergänzungen sind jederzeit ohne
großen Aufwand möglich.
Die ausgelagerte Datei enthält nichts
anderes als die Formatvorlagen, welche sonst im Head
eingetragen werden, allerdings ohne <style>- Tags:
|
body {
margin-top : 10px;
margin-bottom : 10px;
cursor : crosshair ;
scrollbar-arrow-color: #FD9DB0;
scrollbar-base-color: #000000;
scrollbar-highlight-color : #CEAA61;
scrollbar-shadow-color : #CEAA61;
background-color : #000000;
}
p , ul , ol , li , div , td , th , address , blockquote
, nobr , b , i {
font-family : Verdana, Tahoma, Arial, Helvetica,
sans-serif; color: #CEAA61;
background : #000000;
}
p.justify {
font-size:10pt;
text-align:justify;
color: #CEAA61;
background : #000000;
}
h1 {
font-size : 18pt;
color: #CEAA61;
}
h2 {
font-size : 16pt;
color: #CEAA61;
}
h3 {
font-size : 12pt;
color: #CEAA61;
}
h4 {
font-size : 10pt;
color: #CEAA61;
}
p , ul , ol , li , div , td , th , address , nobr
, b , i {
font-size : 10pt;
}
a:link {
color: #F1AEC2;
text-decoration: none;
}
a:visited {
color : #F1AEC2;
text-decoration : none;
}
a:hover {
color : #F1AEC2;
text-decoration : underline;
}
...
|
So könnte ein Style-Sheet aussehen,
dass in eine externen Datei ausgelagert wurde. Diese
Datei wird dann unter einem sinnvollem Namen sowie der
Endung .css abgespeichert und kann im Root-Verzeichnis
oder einem anderen beliebigen Ordner/Verzeichnis abgelegt
werden. Die meisten modernen HTML-Editoren verfügen
über einen eigenen Editor für Style-Sheets, so dass
der Aufwand sich im Rahmen hält und die Kenntnis sämtlicher
Formatierungsmöglichkeiten nicht unbedingt notwendig
ist. Oder man behilft sich mit einem CSS Editor z.B
TopStyle.
3.1 Wie sieht die Definition einer
externen Datei in der HTML-Seite aus?
Um diese Formatvorlagen nun zur Darstellung
von HTML-Dokumenten verwenden zu können, müssen die
HTML-Dokumente mit den Formatvorlagen verknüpft werden.
Dies geschieht über einen <Link> -Tag im Head
der Dokumente:
|
<HTML>
<HEAD>
<TITLE>Ausgelagerte Formatvorlagen - Beispiel
Grafikland/TITLE>
<link rel="stylesheet" type="text/css" href="grafikland.css">
</HEAD>
<BODY>
Inhalt mit den Formatierungen aus der CSS-Datei
...
</BODY>
</HTML>
|
In meinem Fall heisst die ausgelagerte
CSS Datei grafikland.css - Ich habe mehrere Webseiten
(Projekte), so kann ich es am Besten auseinanderhalten.
Man könnte die Datei aber einfach auch stylsheet.css
benennen.
Alle nicht definierten Tags werden mit den Standardeinstellungen
angezeigt.
<link
rel="stylesheet" type="text/css"
href="grafikland.css">
Diese kurze Zeile muss in jedes HTML-Dokument
eingefügt werden, dass die angegebenen Formatvorlagen
verwenden soll, dafür entfallen die einzelnen Angaben
in jedem Dokument.
nach oben
4. Eine unvollständige Übersicht
an CSS Befehlen:
|
Befehl
|
Werte
|
|
Hyperlinks
|
|
A:link
|
Link
|
|
A:visited
|
Besuchter Link
|
|
A:active
|
Aktiver Link
|
|
A:hover
|
OnMouse-Over-Effekt
|
|
Schriftdefinitionen
|
|
font-family
|
Schriftarten (z.B. Verdana, Tahoma, sanserif)
|
|
font-style
|
normal | italic | oblique
|
|
font-variant
|
normal | small-caps
|
|
font-weight
|
normal | bold | bolder | lighter
|
|
font-size
|
absolute Größe | relative Grösse | Größe in Prozentangabe
|
|
Farben und Hintergrund
|
|
color
|
Farbe in Wort und Hexadezimalzahl z.B blue oder
#CEAA61 oder spezielle Farbwörter
|
|
background-color
|
transparent | Farbe
|
|
background-image
|
none | URL der Grafik
|
|
background-repeat
|
repeat | repeat-x | repeat-y | no-repeat
|
|
background-attachment
|
scroll | fixed
|
|
Farbwörter
|
|
activeborder
|
Farbe der
aktiven Fenstertitelzeile.
|
|
Activecaption
|
Farbe der
Überschrift in der aktiven Fenstertitelzeile.
|
|
Appworkspace
|
Farbe des
Hintergrunds der aktiven Anwendung.
|
|
Background
|
Farbe des
Desktop-Hintergrunds.
|
|
Buttonface
|
Farbe von
Buttons in Dialogfenstern.
|
|
Buttonhighlight
|
Farbe für
3D-Schatten von Buttons in Dialogfenstern.
|
|
Buttontext
|
Farbe von
Texten beschrifteter Buttons in Dialogfenstern.
|
|
Captiontext
|
Farbe von
Überschriften in Dialogfenstern.
|
|
Greytext
|
Farbe von
deaktiviertem Text in Dialogfenstern.
|
|
Highlight
|
Farbe von
ausgewählten Einträgen in Auswahllisten.
|
|
Highlighttext
|
Farbe von
selektiertem Text.
|
|
Inactiveborder
|
Farbe einer
nicht aktiven Fenstertitelzeile.
|
|
Inactivecaption
|
Farbe der
Überschrift einer nicht aktiven Fenstertitelzeile.
|
|
Infobackground
|
Farbe für
Tooltips und Hints (kleine Popup-Hilfen).
|
|
Infotext
|
Textfarbe
für Tooltips und Hints.
|
|
Menu
|
Farbe für
Menüleisten.
|
|
Menutext
|
Farbe für
Menüeinträge.
|
|
Scrollbar
|
Farbe der
Scroll-Leiste in Fenstern.
|
|
Threeddarkshadow
|
dunkle Farbe
bei Schatten von 3D-Elementen.
|
|
Threedface
|
Farbe von
3D-Elementen.
|
|
Threedlightshadow
|
Farbe von
gerade angeklickten 3D-Elementen.
|
|
Threedhighlight
|
Helle Farbe
bei Schatten von 3D-Elementen.
|
|
Threedshadow
|
Dunkle Farbe
bei Schatten von 3D-Elementen.
|
|
Window
|
Hintergrundfarbe
von Dokumentfenstern
|
|
Windowframe
|
Farbe von
Fensterrahmen.
|
|
Windowtext
|
Farbe von
normalem Text in Dokumentfenstern
|
|
Text
|
|
word-spacing
|
normal | Größe
|
|
letter-spacing
|
normal | Grösse
|
|
text-decoration
|
none | underline | overline | line-through |
blink
|
|
vertical-align
|
baseline | sub | super | top | text-top | middle
| bottom | Prozent
|
|
text-transform
|
none | capitalize | uppercase | lowercase
|
|
text-align
|
left | right | center | justify
|
|
text-indent
|
Größe | Prozent
|
|
line-height
|
normal | Nummer | Größe | Prozent
|
|
Positionierung/Rand
|
|
position
|
static | absolute | relative
|
|
left
|
auto | Größe | Prozent
|
|
top
|
auto | Größe | Prozent
|
|
width
|
auto | Größe | Prozent
|
|
height
|
auto | Größe | Prozent
|
|
clip
|
auto | Form
|
|
overflow
|
visible | hidden | scroll | auto
|
|
z-index
|
auto | Zahl
|
|
visibility
|
inherit | visible | hidden
|
|
margin-left :
|
absoluter Abstand/Rand z.B.margin-left:15pt
(in pt(Punkt), pc (pica), in (Inch), mm oder cm)
|
|
margin-right :
|
absoluter Abstand/Rand
(in pt(Punkt), pc (pica), in (Inch), mm oder cm)
|
|
margin-bottom :
|
absoluter Abstand/Rand
(in pt(Punkt), pc (pica), in (Inch), mm oder cm)
|
|
margin-top :
|
absoluter Abstand/Rand
(in pt(Punkt), pc (pica), in (Inch), mm oder cm)
|
|
Tabellen
|
|
border-style
|
Rahmentyp - z.B. dotted; border-width: thin;/dashed;
border-width: thin/solid/ridge/dashed/dotted...
|
|
border-color
|
Rahmenfarbe
|
|
padding-top
|
Innenabstand oben
|
|
padding-bottom
|
Innenabstand unten
|
|
padding-left
|
Innenabstand links
|
|
padding-right
|
Innenabstand rechts
|
|
padding
|
Innenabstand alle Seiten
|
|
Sonstiges
|
|
Cursor - Achtung, die in IE 5.5 definierte
Cursor können in IE 6+ leicht verändert aussehen
|
|
|
Bitte geht mit der Maus
auf die Begriffe!
|
|
auto ( IE 5.5)
|
|
|
default ( IE 5.5)
|
|
|
crosshair ( IE 5.5)
|
|
|
hand (IE 5.5)
|
|
|
move ( IE 5.5)
|
|
|
n-resize ( IE 5.5)
|
|
|
ne-resize ( IE 5.5)
|
|
|
e-resize ( IE 5.5)
|
|
|
se-resize ( IE 5.5)
|
|
|
s-resize ( IE 5.5)
|
|
|
sw-resize (IE 5.5)
|
|
|
w-resize ( IE 5.5)
|
|
|
nw-resize ( IE 5.5)
|
|
|
text (IE 5.5)
|
Text-Cursor (wie in Word)
|
|
wait ( IE 5.5)
|
Wartezustand (meist Sanduhr)
|
|
help (IE 5.5)
|
Hilfe (meist Fragezeichen)
|
|
progress (IE 6)
|
|
|
not-allowed (IE 6)
|
|
|
no-drop (IE 6)
|
|
|
vertical-text ( IE 6)
|
|
|
all-scroll ( IE 6)
|
Pfeile in alle 4 Richtungen mit Kreis in der
Mitte
|
|
col-resize ( IE 6)
|
links und rechts Pfeil mit zwei Mittellinien
|
|
row-resize ( IE 6)
|
Pfeil nach oben und Unten mit zwei Mittellinien
|
|
Scrollbar
...damit kannst Du die Scroll-Leiste Deines Browsers
farblich ändern. Achtung, dass geht nur mit dem
IE ab Version 5.5!
|
|
scrollbar-3dlight-color
|
Farbe des 3-D Effekts (links aussen)
|
|
scrollbar-arrow-color
|
Farbe des Pfeils
|
|
scrollbar-base-color
|
Basisfarbe der Leiste
|
|
scrollbar-darkshadow-color
|
Farbe des Schattens rechts aussen
|
|
scrollbar-face-color
|
Farbe der Oberfläche
(mit scrollbar-base-color kombinierbar)
|
|
scrollbar-highlight-color
|
Farbe des Schattens am oberen linken Rand
|
|
scrollbar-shadow-color
|
Farbe des Schattens am unteren rechten Rand
|
|
scrollbar-track-color
|
Farbe der Laufleiste an den Stellen, an denen
keine Leiste sichtbar ist, weil die Seite in den
Browser passt.
|
Und vieles andere mehr...
nach oben
Zum
Schluss gibt es noch ein Beispiel für farbige Scrolleisten
und nicht unterstrichene Links.
Weitere Links zu CSS:
Dr.
Web - Alles zum Thema CSS
CSS
von Stefan Münz
Style
Sheets von Claudia
Eine wunderschöne Webseite mit einer
guten CSS Rubrik hat auch Fabian
Lorenzen. Danke noch mal Fabian für Deine Tipps.
Und wem das alles zu kompliziert ist,
kann sich mit einem CSS Editor behelfen, z.B. von TopStyle.
Es ist meiner Meinung nach zuviel verlangt, alles im
Kopf zu haben. Nun, dass ist das gleiche Thema, wie
es HTML Puristen und Leute gibt, die mit Editorprogrammen
arbeiten ;-)
Buchtipp:
Internet
intern. Cascading Style Sheets von Stefan Münz und
co.
|
