1. Verwendung von CSS:
Eigentlich ist CSS da, um HTML zu ergänzen. Mit CSS kann man viele verschiedene Formate definieren und noch viel mehr. Mit den Cascading Stylesheets ist es möglich, die Schrift zu verändern, indem man eine Schriftart zuweist und bei dieser Schriftart einzustellen wie groß sie sein soll , welche Farbe sie haben soll, oder ob sie schräg gedruckt oder unterstrichen dargestellt werden soll. Textabsätze, Tabellen Listen und Formulare kann man mit Hintergrundbildern versehen. Verschiedene Rahmen sind auch möglich. Außerdem bietet CSS die Möglichkeit um akustische Wiedergaben zu erstellen.
2. Einbindung von CSS in HTML:
Man kann CSS innerhalb einer HTML Datei durch den Tag
<style type="text/css"> einleiten. Zwischen dem einleitenden und dem
abschließenden Tag definiert man die CSS Formate.
Außerdem kann man wenn man will die CSS Formate in einer separaten CSS
Datei definieren. Damit die CSS Datei eingebunden muss man einen "link
Tag" in der HTML-Datei erstellen.
So sieht er aus: <link rel="stylesheet" type="text/css" href="style.css">
style.css ist nur ein Beispiel.
Beide Arten der Formatdefinierungen können kombiniert werden wobei wenn
es Probleme zwischen beiden Definierungen gibt hat das zwischen den
Styletags vorrang gegenüber der CSS Datei.
Eine andere Möglichkeit CSS zu verwenden besteht darin, wenn man
verschiedene Ausgabemedien verwenden will.
Dies wird dann über den Verweis: <link rel="stylesheet" media="Medium"
href="medium.css">gemacht. Dort wo Medium steht kommt das
entsprechende Medium hin.
Hier sind einige Beispiele:
Sprachausgabe: media="aural"
Alle Medien: media="all"
Für Blindenschriftausgabe: media="braille"
Für Blindenschriftdrucker: media="embossed"
Kleincomputer: media="handheld"
Drucker: media="print"
Beamer usw.: media="projection"
Bildschirm: media="screen"
Fernschreiber oder text-orientierte Browser wie Lynx: media="tty"
TV-Ausgabegeräte: media="tv"
2.1 Formatdefinierungen:
Die Definierungen kommen im Code in den Bereich zwischen <style>
und </style>. Möchte man z.B. die Überschriften 1. Ordnung verändern so schreibt
man im Code h1 { color:blue; font-size:46px; }. Bei diesem Beispiel ist h1 der
Selektor. Man schreibt zuerst welchen Elementtyp man verändern will und
dann in geschweiften Klammern was man daran verändern will. Als erstes wird
der Typ gewählt wie z.B. color für Farbe und danach hinter dem Doppelpunkt
den Wert den dieser Typ annehmen soll.
Als Universalselektor wird * verwendet. Wie der Name schon sagt steht dieser
Selektor für alle Elementtypen wobei für alle Elementtypen nur das verwendet
wird, was für diesen Typ auch zulässig ist.
Hinter der Definition muss immer ein Strichpunkt, außer bei der letzten
Definition vor der zweiten geschweiften Klammer, denn dort kann man den
Strichpunkt auch weglassen.
Wenn man mehreren Selektoren die selben Werte zuweisen will, dann macht
man dies, indem man die Selektoren durch Kommas trennt.
Hier ein Beispiel dafür:
h1 { color:blue; font-size:50px }
h2 { color:blue; font-size:50px }
Der Vorige Ausdruck verkürzt sieht dann so aus:
h1,h2 { color:blue; font-size:50px }
Des weiteren ist es möglich verschachtelte Definitionen vorzunehmen.
Solche Definitionen werden gemacht, indem man mehrere Elementtypen
hintereinander schreibt und sie mit einem Leerzeichen voneinander trennt.
Wenn man für h1 die Definitionen { color:blue; font-size:50px } vornimmt und
zusätzlich für h1 u { color:red; font-size:52px } diese macht dann werden
Überschriften der 1. Ordnung blau und mit der Schriftgröße von 50 Pixeln
dargestellt, während Überschriften 1. Ordnung die zusätzlich den Tag <u>
haben rot dargestellt und mit 52 Pixeln anstatt 50, da das h1 Element
übergeordnet und das u Element untergeordnet ist.
Bei den Verschachtelungen können auch noch die Zeichen > und + verwendet
werden. Wenn Beispielsweise ein div Element verwendet wird und danach >
Leerzeichen p dann werden Änderungen nur vorgenommen wenn der Absatz
direkt im div Element verwendet wird und keine Ebene dazwischenliegt.
Wird stattdessen ein + anstatt > verwendet so werden Änderungen
vorgenommen, wenn das p Element nach dem abgeschlossenen div Element
kommt. Hier muss man jedoch beachten, dass der Internet Explorer 6.0 die
Zeichen > und + nicht interpretieren kann.
Eine weitere Variante Formate zu definieren besteht darin dies über
Attributabhängige Definierungen zu machen. Bei diesen Formatierungen sollte
man beachten , dass die Attribute direkt hinter den Elementen in eckigen
Klammern stehen und nicht vom Element mit einem Leerzeichen getrennt
werden. Ein Beispiel hierfür wäre align.
p[align] { color:blue }
Bei p[lang|=de] werden nur p Elemente verändert, die ein lang Attribut haben,
welches bei der Wertzuweisung mit einem de beginnt. Danach kann noch ein Bindestrich stehen.
Bei der Wertzuweisung ist es egal ob ein Bindestrich drin ist oder nicht.
Neben den vorher genannten Möglichkeiten gibt es noch die Definierungen für Klassen.
Diese treffen nur dann zu, wenn der Selektor mit derjenigen Klasse oder mit
mehreren Klassen durch einen Punkt und den Klassennamen dahinter
zugewiesen wurde. In den Klassennamen sollten am Anfang kein Bindestrich
oder eine Ziffer stehen und es sollten keine deutschen Umlaute darin
vorkommen und zu lang sollten die Klassennamen außerdem auch nicht sein.
Am Besten kann man mit den Klassenabhängigen Formatierungen mit den
beiden Selektoren div und span arbeiten.
Hier sollte beachtet werden, dass div eine neue Zeile erzwingt während span
keine erzwingt. Ein Vorteil dieser beiden Selektoren ist, dass sie keine
Voreingestellten Formatdefinierungen besitzen und die von Browsern
umgehen können.
Außerdem kann man Formate durch das Universalattribut id definieren, diese
nennt man Individualformatdefinierungen.
Individualformate werden eingeleitet durch das Rautenzeichen #.
Alle Elemente die dann eine id mit dem zuvor Deklarierten Individualformat
versehen werden nehmen die Änderungen an.
Dabei sollte man zwischen den Einzelnen Definitionen immer ein Leerzeichen
machen da es Probleme bei manchen Browsern geben kann da sie es als
einen ganzen Ausdruck ansehen und somit nicht verstehen was gemeint ist.
Dies ist z.B. der Fall bei Netscape.
2.2 Spezielle CSS Befehle
Mit dem Vermerk !important hinter einer Deklaration kann man bewirken, dass
das Browser-Stylesheet durch eigene Angaben verändert wird.
Die Stylesheets von Benutzern, Autoren und Browsern sind folgend
absteigend sortiert:
Benutzer Stylesheet mit angehängtem !important
Autoren Stylesheet mit angehängtem !important
Autoren Stylesheet ohne
Benutzer Stylesheet ohne
Browser Stylesheet
Das Benutzer Stylesheet mit !important überschreibt alle Deklarationen, die
von den anderen Stylesheets schon deklariert wurden, da es das Stylesheet
ist, welches die höchste Priorität hat.
Das Browser Stylesheet dient nur als Basis falls keine anderen Stylesheets
eingefügt wurden.
Man kann mit CSS Farbzuweisungen durch eine etwas andere Variante des
rgb machen. Üblich sind die Zuweisungen durch Farbnamen die definiert
wurden oder durch zweistellige Hexadezimalzahlen.
Bei den Hexadezimalzahlen sind Groß- und Kleinbuchstaben erlaubt.
Mit der Zusätzlichen CSS rgb Variante kann man dreistellige normale Ziffern
verwenden. Das Schema sieht so aus:
rgb(rrr,ggg,bbb)
Es muss darauf geachtet werden die Werte durch Kommas zu trennen. Die Werte gehen von 0 bis 255. Man kann auch wenn man will die Farbanteile in Prozent angeben von 0 Prozent bis 100 Prozent.
2.3 Zusätzliche Features
Es gibt eine Liste an Anwender-relativen Farbwörtern. Diese sind dazu da um die Farben an die Rechnereinstellungen des Benutzers anzupassen. Hier ist die Liste der verschiedenen Farben des Benutzerrechners:
ActiveBorder: Ist um die Rahmenfarbe vom aktiven Fenster auszuwählen
ActiveCaption: Farbauswahl des aktiven Fensterzeilentitels
AppWorkspace: Hintergrundfarbe der aktiven Anwendung
Background: Desktop Hintergrundfarbe
ButtonFace: Buttonfarbe der Dialogfenster
ButtonHighlight: Farbe vom 3D Lichteffekt in Dialogfenstern
ButtonShadow: Farbe vom 3D Schatten in Dialogfenstern
ButtonText: Farbe der beschrifteten Buttons der Dialogfenster
CaptionText: Schriftfarbe der Überschrift in Dialogfenstern
GrayText: Farbe des deaktivierten Textes der Dialogfenster
Highlight: Schriftfarbe der ausgewählten von Auswahllisten
HighlightText: Schriftfarbe von ausgewählten Text
InactiveBorder: Farbe des Rahmens eines nicht aktiven Fensters
InactiveCaption: Fenstertitelzeilenfarbe eines nicht aktiven Fensters
InactiveCaptionText: Überschriftenfarbe der Titelzeile des inaktiven Fensters
InfoBackground: Farbe von Tooltipps
InfoText: Textfarbe des Tooltipps
Menu: Menüleistenfarbe
MenuText: Menüeintragsfarbe
Scrollbar: Scroll-Leistenfarbe
ThreeDDarkShadow: Bei den Schatten von 3D Elementen die dunkle Farbe
ThreeDFace: 3D Elementfarbe
ThreeDHighlight: Farbe von derzeit angeklickten 3D Elementen
ThreeDLightShadow: Bei den Schatten von 3D Elementen die helle Farbe
ThreeDShadow: Bei den Schatten von 3D Elementen die dunkle Farbe
Window: Farbe des Hintergrunds von Dokumentfenstern
WindowFrame: Fensterrahmenfarbe
WindowText: Farbe des unveränderten Textes in Dokumentfenstern
3. Vorteile von CSS
Ein Vorteil von CSS ist, dass man die HTML-Dateien klein halten kann, da man die Formate in separaten CSS-Dateien definieren kann.
Ein weiterer Vorteil ist, das man auf die Farben des Anwenderrechners zugreifen kann ohne sie zu kennen. Dies ist z.B. geeignet damit die Benutzer es in einer gewohnten Umgebung dargestellt bekommen und falls die Farben die der Ersteller verwendet hat vielleicht dem Anwender gefallen.
Mit CSS kann man auch ältere Browser von den Definitionen ausschließen, die erst bei neueren Versionen der Browser funktionieren, da die älteren Browser bei manchen Dingen Probleme haben sie darzustellen oder sie ganz einfach die ganze Seite nicht darstellen. Durch die separaten CSS-Dateien wird nämlich für die Browser nur das angewendet, was sie auch interpretieren können. Dies ist somit gut geeignet um auf die verschiedenen Benutzerbedürfnisse einzugehen.
Die beiden Element div und span bieten auch einen großen Vorteil, da diese
beiden Elemente eigenschaftslos sind.Das div Element macht eine Ausnahme, da es eine neue Zeile erzwingt.