CSS (
Cascading
Style
Sheets) ist eine
deklarative Stylesheet-Sprache für
strukturierte Dokumente (z. B. HTML
und XML), die vom World Wide Web
Consortium (W3C) spezifiziert wird.
Durch die Trennung von Stil und
Inhalt wird das Veröffentlichen
und Betreuen von Dokumenten wesentlich
vereinfacht. CSS wurde vor allem
im Hinblick auf HTML entwickelt,
ist aber auch für XML-Dokumente
anwendbar. CSS ermöglicht es auch,
Inhalte dem jeweiligen Ausgabemedium
(z. B. Druck, Projektion, Sprachausgabe
etc.) entsprechend abzuändern. Das
ist nützlich, um zum Beispiel Weblinks
beim Drucken extra aufzuführen und
nicht (wie oft bei HTML-Seiten)
zu verbergen. Oder um für ein Anzeigemedium
wie einen PDA oder ein Mobiltelefon
mit geringerer Auflösung die Anzeige
zu optimieren (geringere Seitenbreite
und -höhe).
Die Fähigkeiten von CSS
sind vielfältig: Neben diversen,
weit über HTML hinausgehenden
Fähigkeiten im Farb- und Schriftbereich,
die sich allerdings (noch) nicht
mit spezialisierten Textsatzsprachen
wie TeX messen können, bietet es
etwa die Möglichkeit, alle Elemente
frei zu positionieren, Hintergrundbilder
und Vorlesestimmen festzulegen.
CSS gilt heutzutage als die Standard-Stylesheet-Sprache
für das Web.
Vor- und Nachteile von CSS:
- Größere Layoutmöglichkeiten:
Das Design ist konsistent zwischen den Browser
(siehe unten).
- kürzere Zeiten
zur Erstellung
und Pflege von Homepages: Von einer einzigen
Datei aus kann ein komplettes Homepage-Design
erstellt und bei Bedarf geändert werden.
- Schnellere Übertragung:
CSS
macht zahlreiche HTML-Wiederholungen überflüssig.
Weniger Code bedeutet schnelleren Download.
- Homepage funktioniert auch noch bei
alten Browsern:
Auch bei Browsern,
die CSS nicht unterstützen, wird die Homepage
noch angezeigt (allerdings dann ohne CSS-Design).
- Unterschiedliche Unterstützung durch
Browser:
Größter Nachteil ist teilweise
uneinheitliche Unterstützung durch Browser.
Deshalb sollten nicht alle CSS-Definitionen
eingesetzt werden.
Schneller, schöner Formatieren mit CSS:
Über CSS kann die Formatierungen einfach
und elegant vorgenommen werden. So können z.
B. Schriftattribute wie Farbe, Schriftart und
-schnitt und Abstände bequem eingestellt werden.
CSS sind vergleichbar mit den Formatvorlagen
im Word.
Das Besondere an CSS ist, dass diese "Formatierungen"
durch Auslagerung dann einfach für alle Seiten
einer Homepage gelten. Dementsprechend werden
bei Änderungen nur noch an einer Stelle diese
Änderungen durchgeführt und alle Seiten einer
Homepage sind geändert (wird erst weiter hinten
gezeigt).
CSS ist in der Version 1 so weit verbreitet,
dass es problemlos eingesetzt werden kann. Das
Besondere an CSS ist, dass Browser, die kein
CSS kennen, absolut kein Problem mit CSS haben.
Alte Browser ignorieren CSS einfach und der
Seitenaufbau funktioniert trotzdem. CSS greift
nicht in die HTML-Befehle ein, sondern wird
darüber gelegt.
CSS ist einfacher als im Allgemeinen angenommen.
Es gibt nur ein paar grundlegende Regeln zum
Erfolg mit CSS:
Aufbau:
|
|
Selektor
|
Deklaration |
|
|
H1
|
{COLOR:
green} |
H1 (oder irgend etwas anderes): Selektor
- darauf bezieht sich der zweite Teil, die
Deklaration.
{ ... } : Vereinbarung (Declaration),
wie was aussehen soll.
Im Beispiel sollen
alle Überschriften H1 nun die Farbe rot
bekommen.
Eigenschaften und Werte:
Die Vereinbarung (Deklaration) besteht
aus zwei Teilen: dem Eigenschaftsteil, wie
z. B. Farbe, Größe, und der dazugehörige
Wert, wie rot(Farbe) oder 30 (Größe).
TAG {Eigenschaft: Wert}
Vererbung:
Die Deklarationen können vererbt werden.
Wird z. B. für das <BODY>-Tag die Farbe
per CSS bestimmt, hat der <LI>-Tag automatisch
die gleiche Farbe, wenn diese dort nicht
definiert ist.
Cascade:
Es kann mehrere Style Sheets geben, die
auch konkurrierend sein können. Wer dann
jeweils "gewinnt", hängt von verschiedenen
Regeln ab. Das gehört aber zu den Techniken
für Fortgeschrittene. So kann z. B. auch
ein Design extra für den Ausdruck definiert
werden.
Immer die geschwungenen Klammern beachten!
CSS im <Head>-Tag
Nun zur praktischen Umsetzung. Als folgendes
Beispiel soll das CSS folgende Regeln haben:
- Zeichensatz soll Comic Sans MS sein,
und falls dieser nicht installiert ist,
als Alternative verdana bzw. serif
- <BODY> Farbe ist grün
- Überschrift <H1> ist rot und 18 Punkt
groß
- Überschrift <H2> ist 14 Punkt groß
- <P>-Tag ist 10 Punkt groß
Dazu müssen folgende Zeilen in den <HEAD>-
Bereich.
<STYLE TYPE = "text/css">
BODY {FONT-FAMILY: "Comic Sans MS", verdana, serif; COLOR: green;}
H1 {FONT-SIZE: 18pt; COLOR: red;}
H2 {FONT-SIZE: 14pt}
P {FONT-SIZE: 10pt}
</STYLE>
Wichtige Punkte zum Beachten:
- Die Klammern sind geschwungen {}
- Bitte die Farben beachten. Hier ist
das Prinzip der Vererbung am besten sichtbar.
H1 ist grün und H2 erbt von diesem die Farbe.
Alle Tags innerhalb des Body-tags, wenn
nicht anders definiert, erben also die Attribute.
In diesem Beispiel die Farbe.
- Zeichensatzauswahl: Immer mehrere Zeichensätze
zur Auswahl geben, da nicht davon ausgegangen
werden kann, dass alle Zeichensätze installiert
sind. Ist also Comic Sans MS nicht installiert,
wird Verdana angezeigt.
- Zeichensatz: Schriften, deren Namen
aus mehr als einem Wort besteht, müssen
in Anführungszeichen eingebettet werden,
z.B. "Comic Sans MS".
- Mehrere Deklarationen innerhalb eines
Tags müssen durch Semikolon getrennt werden.
Befehl direkt im Quellcode:
Direkt im Quellcode wirkt der Befehl nur
an dieser bestimmten Stelle der Seite, so dass
man abweichende Designs verwenden kann.
Beispiel:
<h1 style="letter-spacing:30;" >Überschrift</h1>
Alle Buchstaben bis zum Ende von </h1> werden
jeweils mit einem Abstand von 30 zwischen den
Buchstaben dargestellt.
Natürlich können die Befehle auch kombiniert
werden.
Zusätzlich zur Buchstabenbreite kommt jetzt
noch eine andere Farbe hinzu:
<h1 style="letter-spacing:30;color:red" >Überschrift</h1>
Hier ist natürlich die Frage berechtigt,
warum nicht gleich mit den gewohnten HTML Befehlen?
Die Logik der Sache wird klar, wenn man diese
Formatdefinitionen auslagert. Dadurch kann dann
z. B. eine Einstellungen erstellt werden, die
dann für alle <h1> gelten, ohne dass speziell
noch in den HTML-Tag eingegriffen werden muss.
Auslagern von CSS-Befehlen:
Zum Auslagern werden 2 Dinge benötigt. Als
erstes eine neue Datei, ich nenne diese design.css
(kann aber auch beliebig anders heißen) und
als zweites ein Verweis darauf in der HTML-Datei,
die diese ausgelagerte Datei nutzen soll.
Verweis in der HTML-Datei:
Dieser Verweis
sollte im head-Bereich eingegeben werden.
<link rel="stylesheet" href="design.css" type="text/css">
So, nun erstellen wir eine neue Datei mit
dem Namen "design.css".
Inhalt:
H1 { color : red; letter-spacing : 30;}
Unbedingt auf Leerzeichen achten, und als
Klammern kommen hier die geschweiften zum Zuge!!
So, Datei abspeichern und im HTML Editor zurück
zur ursprünglichen Internetseite.
CSS - Befehl:
Anbei die wichtigsten CSS Befehle zum Ausprobieren,
Spielen, Spaß und Erfolg im zukünftigen Leben,
in der Ehe und allgemein Haben.
|
Befehl |
Bedeutung |
weitere mögliche Angaben |
|
Schrift: |
|
|
| font-family
: |
Schriftart |
Arial,
Times New Roman, etc. |
|
font-size
: |
Schriftgröße |
numerischer
Wert in pt(Punkt) mm oder cm |
| color
: |
Schriftfarbe |
red,
green, white usw. oder HTML Farbangabe |
|
font-variant: |
Schriftvariante |
normal,
small-caps |
| font-weight: |
Schriftgewicht |
normal,
bold, bolder, lighter |
|
font-style: |
Schriftstil |
normal,
oblique, italic |
|
|
|
|
|
Textgestaltung: |
|
|
| text-align
: |
Textausrichtung |
left,
right, center, justify (Blocksatz) |
|
line-height
: |
Zeilenabstand
(Durchschuss) |
numerischer
Wert in pt(Punkt) mm oder cm |
| text-decoration
: |
Textgestaltung |
underline,
overline, line-through, blink |
|
word-spacing: |
Wortabstand |
numerischer
Wert in pt(Punkt) mm oder cm |
| letter-spacing: |
Zeichenabstand |
numerischer
Wert in pt(Punkt) mm oder cm |
|
text-indent: |
Texteinrückung |
numerischer
Wert in pt(Punkt) mm oder cm |
| text-transform: |
Textart |
capitalize,
upppercase, lowercase, none |
|
|
|
|
|
Seitenränder: |
|
|
| margin-left
: |
absoluter
Abstand zum Seitenrand |
numerischer
Wert in pt(Punkt) mm oder cm |
|
margin-right
: |
absoluter
Abstand zum Seitenrand |
numerischer
Wert in pt(Punkt) mm oder cm |
| margin-bottom: |
absoluter
Abstand zum Seitenrand |
numerischer
Wert in pt(Punkt) mm oder cm |
|
margin-top
: |
absoluter
Abstand zum Seitenrand |
numerischer
Wert in pt(Punkt) mm oder cm |
|
|
|
|
|
Links: |
|
|
| A:link |
Link |
fast
alle CSS-Befehle anwendbar |
|
A:visited |
Besuchter
Link |
fast alle
CSS-Befehle anwendbar |
| A:active |
Angeklickter
Link |
fast
alle CSS-Befehle anwendbar |
|
A:hover |
Link beim
überfahren mit Maus |
fast alle
CSS-Befehle anwendbar |
|
|
|
|
|
Bilder: |
|
|
| background
: |
Hintergrundfarbe |
red,
green, white usw. oder HTML Farbangabe |
|
background-image |
Hintergrundbild |
none,
URL |
| background-repeat |
Kachel |
repeat,
repeat-x, repeat-y, no-repeat |
|
|
|
|
|
Ränder: |
|
|
| border-top-width: |
Dicke
der Rahmenlinie |
thin,
medium, thick oder num. Wert |
|
border-bottom-width: |
Dicke
der Rahmenlinie |
thin,
medium, thick oder num. Wert |
| border-left-width: |
Dicke
der Rahmenlinie |
thin,
medium, thick oder num. Wert |
|
border-right-width: |
Dicke
der Rahmenlinie |
thin,
medium, thick oder num. Wert |
| border-style |
Rahmentyp |
none,
dotted, dashed, solid, double, groove,
ridge, inset, outset |
|
border-color |
Rahmenfarbe |
Farbname
oder Hex. |
| padding-top |
Tabellenabstand
oben |
Prozent
oder num. Wert. |
|
padding-bottom |
Tabellenabstand
unten |
Prozent
oder num. Wert. |
| padding-right |
Tabellenabstand
rechts |
Prozent
oder num. Wert. |
|
padding-left |
Tabellenabstand
links |
Prozent
oder num. Wert. |
| width |
Rahmenbreite |
Auto,
Prozent, num. Wert |
|
height |
Rahmenhöhe |
Auto,
Prozent, num. Wert |
