e1:css_stylesheets [Infowiki]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== CSS - Cascading Style Sheets ======

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>
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
und damit die ganze Homepage sind viel einfacher zu warten.
Die Formatangaben werden in einer eigenen CSS-Datei gespeichert. Im <head>-Element informiert man
den Browser über das <link>-Element, dass er die Formatvorlagen aus der CSS-Datei (im Beispiel formate.
css) benutzen soll:
<code html><link rel=”stylesheet” type="text/css" href="formate.css"></code>

====== Style Sheets (engl., Formatvorlagen) ======

Eine einzelne Formatvorlage wird wie folgt definiert: <code>h1 { color: red; }</code>
Damit wird festgelegt, dass Überschriften 1. Ordnung in rot angezeigt werden. So eine Formatvorlage
besteht aus zwei Hauptteilen, dem Selektor h1 und in geschweiften Klammern der Deklaration color: red;
Der Selektor h1 ist die Verbindung zwischen HTML und der Formatvorlage her. Die Deklaration besteht
ebenfalls aus zwei Teilen, dem Attribut color und dem Attributwert red. Das Attribut color ist nur
ein Attribut von vielen, mit denen man das Aussehen von HTML-Elementen beeinflussen kann.

Innerhalb einer Formatvorlage können auch mehrere Attribute für mehrere Selektoren definiert werden,
z. B.

<code css>
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%; }
h2, h3 { font-weight: bold; font-size: 12px; line-height: 14px; font-family: helvetica; }
</code>

Die Syntax eines Style sheet wird also durch dieses Syntaxdiagramm beschrieben:

{{ :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