ein einziges Element wird direkt formatiert
Universalattribut-> darf an fast allen XHTML -Elementen notiert werden
Benutzt wenn Angaben nur ein einziges Mal für ein bestimmtes Element vorgenommen werden
Mit hilfe style-tags direkt im Quellcode angegeben
Gewünschten Eigenschaften sind nur einem Element zugewiesen
Vorteile gehen verloren: übergreifenden Befehl festzulegen, der dann alle h1 Elemente im HTML-Dokument gilt, größere Wartungs-/Erstellungsaufwand
Beispiel: h1 in rot und schriftgröße 12
<h1 style=”color:red;font-size:12px;”>Dies ist eine rote Überschrift</h1>
Die beste Methode, CSS in ein XHTML-Dokument zu integrieren
Die externe Einbindung des Cascading Style Sheets
im Dokumentenkopf notiert und verweist auf ein externes Stylesheet. So können mehrere (viele!) Web-Seiten das gleiche Stylesheet verwenden, woraus sich ein Teil der Vorteile von CSS ergeben.
die Attribute rel, media, href und title mit angegeben, wobei media und title optional sind:
< link rel="stylesheet" href="stylesheet.css">
Quelle: Einbindung von CSS in XHTML --> über das <link> -Element
style-Elemente werden dazu verwendet, CSS-Regeln zu notieren, die im gesamten XHTML-Dokument gelten sollen. Es kann ein vollständiges Stylesheet enthalten, wo Regeln festgehalten werden, die dann alle Elemente dieses Typs formatieren.
Quelle: Einbindung von CSS in XHTML --> Über das style-Element
Das Attribut href teilt dem Browser eine URL mit, unter der das Stylesheet gespeichert ist.
Quelle: Einbindung von CSS in XHTML --> über das link-Element
Das Attribut title gibt dem Stylesheet einen Namen, so dass ein Anwender zwischen verschiedenen Darstellungen wählen kann, bspw. eine normale Darstellung und eine Darstellung mit hohem Kontrast:
< link rel="stylesheet" type="text/css" href="http:style-regular.css" title="normaler Kontrast"> < link rel="stylesheet alternate" type="text/css" href="style-highcontrast.css" title="hoher Kontrast">
Mit allen anderen Verwendungen von title (z.B. bei href) wird nur ein Element benannt und ist keine Interaktion verbunden.
Das Attribut media gibt an, für welche Ausgabemedien das referenzierte Stylesheet bestimmt ist. Es kann eine einzelne Medienbeschreibung sein oder eine durch Kommata getrennte Liste.
Mögliche Werte des Attributs media:
screen (Bildschirm)
print (Drucker)
tv (Fernseher)
tty (Fernschreiber)
aural (Sprachausgabe)
braille (Blindenschrift)
...
Quelle: Einbindung von CSS in XHTML --> über das <link>-Element
Das Attribut rel im link-Element gibt die Beziehung des Elementes an. So erkennen alle Browser, dass es ein Stylesheet gibt, das sie auf das Dokument anzuwenden haben.
Ein Deklarationsblock beginnt mit einer offenen geschweiften Klammer "{" und endet mit der dazugehörenden schließenden geschweiften Klammer. Üblicherweise enthält ein Deklarationsblock eine oder mehrere Deklarationen, die durch ein Semikolon getrennt sind.
Quelle: CSS Regeln --> Regeln zu CSS
Beispiel: {font-family;Arial, font-size 12 pt;color:red}
Der Selektor ist Bestandteil einer CSS-Regel und gibt an, welches XHTML-Element beschrieben werden soll.
Beispiel: body
Deklarationen bestehen aus einer Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert, bspw. color:red;
Beispiel: font-family: Arial
Vererbung bezeichnet den Prozess, mit dem die Werte von CSS-Eigenschaften an verschiedene verschachtelte Tags weitergegeben werden. So ist beispielsweise das <p>-Tag immer mit einem <body>-Tag umgeben, so dass dem <body>-Tag zugewiesene Eigenschaften automatisch dem <p>-Tag vererbt werden.
Quelle: Vererbung --> Vererbung
Die Eigenschaft background-color bestimmt die Hintergrundfarbe des Elements.
Quelle: Eigenschaften und Werte von CSS --> color
Mit border-color kann man für ein Element die Rahmenfarbe bestimmen, hier können auch wieder die Untereigenschaften angegeben werden.
Quelle: Eigenschaften und Werte --> Weitere
Mit der Eigenschaft border-style kann man verschiedene Schmuckrahmen verwenden.
None/hidden (kein bzw. unsichtbarer Rahmen )
vdotted (gepunktet),
dashed (gestrichelt),
solid (durchgezogen),
double (doppelt durchgezogen),
groove/ridge/inset/outset(3D-Effekt)
Mit border-width kann man die Dicke des Rahmens um ein Element bestimmen (thin, medium, thick). Man kann die Untereigenschaften von border-width (border-top/right/bottom/left/-width) für verschiedene Rahmenbreiten oben, rechts, unten und links verwenden.
Die Eigenschaft color bestimmt die Vordergrundfarbe/Schriftfarbe eines Elements.
Die Eigenschaft font-family bestimmt die Schriftart eines Textelements (z.B. Arial, Verdana...)
Quelle: Eigenschaften und Werte --> font
Die Eigenschaft font-size bestimmt die Schriftgröße eines Textelements, diese kann in Punkten, in Prozent oder in Pixeln angegeben werden
Die Eigenschaft font-style gibt an, ob eine normale oder schräg laufende Schriftauszeichnung eines Textelements gewählt wird. Hier werden die Werte normal, italic und oblique angegeben.
Die Eigenschaft font-weight bestimmt die Schriftdicke eines Textelements. Als Werte werden hier normal, für eine normal dicke Schrift, und bold, für eine Fettgedruckte Schrift angegeben.
Die Eigenschaft letter-spacing gibt das Abstandsverhalten zwischen Zeichen an.
Quelle: Eigenschaften und Werte --> Abstände
Die Eigenschaft list-style-type gibt das Erscheinungsbild der Listenelementmarkierung geordneter und ungeordneter Listen an, beziehungsweise die Art der Nummerierung geordneter Listen
none (es werden keine Listenelementmarkierung verwendet)
disc (gefüllter Kreis)
circle (leerer Kreis)
Man kann mit margin-bottom bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat.
Die Eigenschaft margin-left gibt den linken Rand eines Elements an oder den Abstand zum links davon liegenden Element.
Die Eigenschaft margin-right gibt den rechten Absatz/Rand eines Elements an oder den Abstand zum rechts davon liegenden Element.
Mit der Eigenschaft margin-top kann man bestimmen wie viel Abstand ein Element zu seinem Vorgängerelement oder zu seinem Elternelement hat.
Die Eigenschaft text-align ermöglicht eine Textausrichtung, die Inhalte können linksbündig (left), rechtsbündig (right) oder zentriert (center) ausgerichtet werden. Bei justify werden die Inhalte beidseitig, im sogenannten Blockabsatz ausgerichtet.
Die Eigenschaft text-decoration ermöglicht Ausschmückungen, die dem Text eines Elements hinzugefügt werden können.
Beispiele:
None= wird der Text nicht ausgeschmückt
Underline= wird der Inhalt des Elements unterstrichen
Overline= wird der Inhalt des Elements überstrichen
Line-through= wird der Inhalt des Elements durchgestrichen
Mit der Eigenschaft text-indent erreicht man einen Texteinzug
Die Eigenschaft word-spacing gibt das Abstandsverhalten zwischen Wörtern an.
mangelnde Struktur und Auszeichnung der Inhalte
keine Skalierbarkeit der Schriftgröße
blinkende oder animierte Texte
zu kleine oder schwer erkennbare aktive Elemente
fehlende Kontrolle über Text- und Hintergrundfarbe
zu kleine klick-/touchbare Bedienelemente
Quelle: Barrierefreiheit --> Barrierefreiheit
Ein Stylesheet besteht im Wesentlichen aus einer Menge von Regeln. Regeln bestehen aus mindestens einem Selektor und einem Paar geschweifter Klammern, Deklarationsblock genannt, der eine Liste mit null oder mehr durch Semikola voneinander abgetrennten Deklarationen enthält
Beispiel für eine Regel:
h1 {font-family:Verdana; font-size:26pt; color:red}
vereinfachen das Schreiben von Webseiten
trennen Layout/Darstellung vom Inhalt
gleiche Elemente werden einheitlich formatiert
flexibel
erhöhen die Wartbarkeit der Webseiten
Reduzieren die Kosten der Erstellung und Pflege von Webseiten, vor allem bei umfangreichen Web-Sites
Quelle: Einführung --> Das Cascading Style Sheet
Um den Text in einem XHTML-Dokument mit CSS formatieren zu können, dienen u.a. die Eigenschaften color, font-family, font-style, font-weight und font-size.
Siehe auch "text-decoration".
Selektor: gibt an welches Element beschrieben werden soll
Eigenschaft. gibt an welche Eigenschaft des Elements formatiert werden soll
Wert: gibt den Wert der Eigenschaft an und gibt so mit an wie das Element formatiert werden soll
Beispiel: h1 { color: red; }
h1 ist der Selektor color ist die Eigenschaft red ist der Wert
Die CSS-Regel bewirkt, dass alle Überschriften h1 im Browser mit roten Buchstaben dargestellt werden.
keine Trennung von Struktur und Präsentation - was ja eigentlich Ziel der Verwendung von CSS ost
nur ein einziges Element wird formatiert
Die Eigenschaft list-style-type definiert, wie die Aufzählungszeichen einer geordneten Liste (ol, ordered list) gebildet werden.
Im folgenden eine Auswahl der möglichen Werte:
decimal (Dezimale Nummerierung)
decimal-leading-zero (Dezimale Nummerierung mit führender Null)
lower-roman (Nummerierung in römischen Kleinbuchstaben)
upper-roman (Nummerierung in römischen Großbuchstaben)
lower-alpha (Nummerierung mit Kleinbuchstaben)
upper-alpha (Nummerierung mit Großbuchstaben)
Quelle: Eigenschaften und Werte --> Weitere, siehe ggf. auch W3C schools
Um Pseudoelemente oder Pseudoklassen zu definieren gibt es eine spezielle Syntax. Sie werden zentral in einem style-Bereich notiert. Bei diesen Elementen notiert man zuerst das betroffene XHTML-Elemente, z.B. a-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, z.B.:
link (für noch nicht besuchte Verweisziele)
visited (für bereits besuchte Verweisziele)
focus (für mit der Tastatur ausgewählte Verweise)
hover (für Verweise während der Anwender mit der Maus drüber fährt)
active (für angeklickte Verweise)
Der Farbwert kann entweder als RGB-Farbwert oder als Schlüsselwort angegeben werden. Diese Werte können in einer Farbtabelle nachgelesen werden. Meist entsprechen die Namen der englischen Bezeichnung wie bspw. red, blue, white usw.
Eine Übersicht über die Farbnamen und die damit verbundenen RGB-Werte findet sich wiederum bei W3Schools.
CSS kann auf drei Arten in ein XHTML-Dokument eingebunden werden
Einbindung per style-Attribut
Einbindung per style-Element
Einbindung per link-Element
Quelle: Einbindung von CSS in XHTML --> Einbindung von CSS in XHTML
Hier werden die Attribute direkt ins Element eines XHTML-Dokuments eingebunden. D. h. innerhalb des einleitenden HTML-Tags erfolgt die Einbindung über das Attribut style, hinter dem die jeweils gewünschten Formatdefinitionen notiert werden.
Quelle: Einbindung von CSS in XHTML --> Über das style-Attribut
Das style-Element wird innerhalb des Dokumentenkopfs head notiert. Bei der Einbindung mit dem style-Element muss das type Attribut immer angegeben werden. Das type Attribut ist der Hinweis für den Browser, um welche Art Stylesheet es sich handelt.
CSS dient der Trennung von Layout und Inhalt. Dieses Prinzip findet sich bspw. auch in Form der Formatvorlagen(kataloge) bei Word oder der Funktion "Zellen formatieren" bei Excel.
Bei HTML bzw. XHTML handelt es sich um eine sog. Auszeichnungszeichnungssprache, also eine Sprache zur Strukturierung und Beschreibung von Inhalten. CSS ergänzt HTML/XHTML um die Möglichkeit, zu beschreiben, wie Inhalte ausgegeben oder angezeigt werden können. CSS (Cascading Style Sheets) sind der offizielle Standardmechanismus zum Definieren von Text- und Seitenlayouts für die Anzeige im Webbrowser (oder in anderen Medien).
Quelle --> Einführung --> Das Cascading Style Sheet
Cascading deutet auf die Vererbung der Eigenschaften hin. So werden bspw. für den body definierte Eigenschaften auch an die im body der XHTML-Seite enthaltenen p-Elemente vererbt, können aber durch spezifische Regeln für das p-Element überschrieben oder ergänzt werden.
RGB steht für Rot-Grün-Blau
beschreibt den Sachverhalt, dass in der additiven Farbmischung jede (!) Farbe durch diese drei Grundfarben gemischt werden können, wobei die Grundfarben in unterschiedlichen Intensitäten eingehen.
In der Computertechnik stellt das Byte als Folge von 8 Bits einen elementaren Wertebereich dar.
Es können 256 Werte ausgdrückt werden, da jedes der 8 Bits einen von zwei Zuständen (0 oder 1) annehmen kann.
Aus der Kombinatorik der Mathematik wissen wir, dass 28 eben 258 ergibt. Wenn man 256 Intensitäten für rot mit 256 Intensitäten für Grün und die wiederum mit 256 Intensitäten von Blau kombiniert, können 256 x 256 x 256 (16.777.216) verschiedene Mischfarben bzw. Farbtöne erzeugt werden.
In XHTML (und vielen anderen Anwendungen) werden die Werte nicht als Dezimalzahl (Werte zur Basis 10) sondern als Hexadezimalwerte (Werte zur Basis 16) angegeben. Dabei repräsentieren die Buchstaben A, B, C, D, E und F die dezimalen Zahlenwerte 10, 11, usw. bis 15.
Ein RGB-Farbwert von #FF0000 ist somit das kräftigste Rot, #FFFEFE das blasseste Rot. #FF00FF ist Violett, #FFFF00 Gelb, #FFFFFF Weiß und #000000 Sxhwarz. Das Zeichen "#" gibt an, dass es sich bei den folgenden Werten um Hexadezimalzahlen haben.
Die Arbeitsweise kann hier praktisch nachvollzogen werden.
Mittels Pseudoklassen und Pseudoelementen kann man Deklarationen für XHTML-Bestandteile definieren, die sich nicht durch ein eindeutiges XHTML-Elemente ausdrücken lassen, z.B. ein ‘‘noch nicht besuchter Verweis‘‘. Die Pseudoelemente und Pseudoklassen sind ein häufig genutzte Features des a-Elements.
Quelle: Pseudoelemente und Pseudoklassen --> Pseudoelemente und Pseudoklassen
Welcher Vererbungsbaum gibt die korrekte Vererbung der Eigenschaften eines Eltern-Elements an ein Kind-Element wieder?
1
Erstelle den CSS Abschnitt für die oben aufgeführte Webseite
Zuletzt geändertvor einem Jahr
