Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
e1:css_stylesheets [2017/07/03 10:54] – angelegt admin03 | e1:css_stylesheets [2017/09/20 16:08] (aktuell) – admin03 | ||
---|---|---|---|
Zeile 3: | Zeile 3: | ||
In älteren HTML-Dateien findet oft eine Mischung von Formatierung und Inhalt statt. Das sieht dann z. | In älteren HTML-Dateien findet oft eine Mischung von Formatierung und Inhalt statt. Das sieht dann z. | ||
B. so aus: | B. so aus: | ||
- | < | + | < |
Durch die Trennung von Formatierung und Inhalt ergeben sich viele Vorteile: Die HTML-Dateien werden | Durch die Trennung von Formatierung und Inhalt ergeben sich viele Vorteile: Die HTML-Dateien werden | ||
insgesamt kleiner, globale Formatänderungen sind mit minimalem Aufwand möglich, die Inhaltsseiten | insgesamt kleiner, globale Formatänderungen sind mit minimalem Aufwand möglich, die Inhaltsseiten | ||
Zeile 10: | Zeile 10: | ||
den Browser über das < | den Browser über das < | ||
css) benutzen soll: | css) benutzen soll: | ||
- | < | + | < |
====== Style Sheets (engl., Formatvorlagen) ====== | ====== Style Sheets (engl., Formatvorlagen) ====== | ||
Zeile 33: | Zeile 33: | ||
{{ : | {{ : | ||
+ | |||
+ | ====== Das class-Attribut als Selektor für Formatvorlagen ====== | ||
+ | |||
+ | Manchmal ist es wünschenswert verschiedene Varianten von Formatvorlagen zu benutzen. Die Auswahl | ||
+ | der gewünschten Variante erfolgt über das class-Attribut im HTML-Element: | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | <h1 class=" | ||
+ | Die Definition der Varianten erfolgt in der CSS-Datei. | ||
+ | <code css> | ||
+ | .normal { font-size: | ||
+ | .gross { font-size: | ||
+ | .klein { font-size: | ||
+ | .rot { color:red; } | ||
+ | </ | ||
+ | Die relativen Größenangaben mittels Prozentwerten sind günstiger als absolute Schriftgrößen, | ||
+ | Anwender dann die gewünschte Schriftgröße im Browser einstellen kann. | ||
+ | |||
+ | |||
+ | ====== Formatvorlagen für Verweise ====== | ||
+ | Verweise werden mit dem < | ||
+ | anders als noch nicht besuchte Verweise an. Hierfür gibt es spezielle Selektoren: | ||
+ | <code css> | ||
+ | a:link { color: red } /* noch nicht besuchte Verweise */ | ||
+ | a:visited { color: blue } /* besuchte Verweise */ | ||
+ | a:hover { color: yellow } /* Maus auf dem Verweis */ </ | ||
+ | Der HTML-Editor unterstützt das Schreiben von Formatvorlagen über die Schaltfläche Neues Style | ||
+ | Element auf der Registerkarte CSS. | ||
+ | Tipps: http:// | ||