Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- 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.
 B. so aus:
-<code html><font face="BeachWide"><font color="#FFFF99><font size="+1">Meine Hobbies</font></font></font></code>
+<code html><font face="BeachWide"><font color="#FFFF99"><font size="+1">Meine Hobbies</font></font></font></code>
 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
@@ Zeile 33: / Zeile 33: @@
 {{ :e1:csspng.png?direct&600 |}}
+====== 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="normal">Textabsatz mit normaler Schriftgröße in Schwarz</p>
+<p class="gross">Textabsatz mit größerer Schrift in Schwarz </p>
+<p class="klein">Textabsatz mit kleinerer Schrift in Schwarz </p>
+<h1 class="rot">rote Überschrift</h1>
+Die Definition der Varianten erfolgt in der CSS-Datei.
+<code css>
+.normal { font-size:100%; color:black; }
+.gross { font-size:120%; color:black; }
+.klein { font-size:80%; color:black; }
+.rot { color:red; }
+</code>
+Die relativen Größenangaben mittels Prozentwerten sind günstiger als absolute Schriftgrößen, weil der
+Anwender dann die gewünschte Schriftgröße im Browser einstellen kann.
+====== Formatvorlagen für Verweise ======
+Verweise werden mit dem <a>-Element definiert. Browser zeigen normalerweise besuchte Verweise
+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 */ </code>
+Der HTML-Editor unterstützt das Schreiben von Formatvorlagen über die Schaltfläche Neues Style
+Element auf der Registerkarte CSS.
+Tipps: http://w3c.org/MarkUp/Guide/Style und http://www.css4you.de