Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
e1:css_stylesheets [2017/07/03 10:54] – [CSS - Cascading Style Sheets] 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: | ||
- | <code html>< | + | <code html>< |
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 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:// | ||