Formate

Aus Textverarbeitungsprogrammen wie MS Word oder Open Office kennen Sie vermutlich Formatvorlagen. Das sind benannte Absatz- oder Zeichenformate mit einer Reihe von gespeicherten Style-Eigenschaften. Wenn Sie ein Absatz- oder Zeichenformat anwenden, bekommt der aktuell markierte oder den Cursor umgebende Inhalt alle Style-Eigenschaften der entsprechenden Formatvorlage.

In HTML/CSS finden an dieser Stelle zwei Vorgänge statt. Zunächst weisen Sie Inhalten mit Hilfe von HTML logische Container zu, nämlich geeignete HTML-Elemente. In einem davon getrennten Vorgang können Sie mittels CSS Style-Eigenschaften auf die vorhandene Markupstruktur anwenden. Das, wofür Sie jeweils ein Set von Style-Eigenschaften definieren möchten, kann ein bestimmtes HTML-Element sein. Es kann sich aber auch um komplexere Bedingungen handeln. Zu diesem Zweck gibt es die zuvor beschriebenen Selektoren. Formate sind dagegen das jeweilige Set von CSS-Eigenschaften und ihren Wertzuweisungen.

Beispiel

h1 { 
  color: maroon; 
  background-color: #FDE8D2; 
  font-size: 3em; 
  border: 3px solid maroon;
  border-radius: 9px; 
}

Erläuterung

Als „Format“ wird hier der Block bezeichnet, der von einem Selektor abhängig ist und durch die geschweiften Klammern { und } markiert wird. Das Original-Vokabular des W3-Konsortiums spricht von einem Deklarationsblock. Es handelt sich um eine oder mehrere, beliebig viele Deklarationen (einzelne Formateigenschaftsdefinitionen). Jede Deklaration hat wiederum einen bestimmten Aufbau. Zunächst wird der Name einer CSS-Eigenschaft notiert. Dahinter folgt ein Doppelpunkt, und dahinter der Wert, den Sie der CSS-Eigenschaft zuweisen. Abgeschlossen wird eine Deklaration üblicherweise durch ein Semikolon (;). Nur bei der letzten Deklaration vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen. Um Fehler zu vermeiden, ist es jedoch besser, das Abschluss-Semikolon grundsätzlich zu notieren.

Im obigen Beispiel betrifft der Selektor alle h1-Überschriften. Der zugehörige Deklarationsblock besteht im Beispiel aus fünf Deklarationen: mit color: maroon; erhalten die Überschriften 1. Ordnung eine dunkelrote Textfarbe, mit background-color: #FDE8D2; einen hellgelben Hintergrund, mit font-size: 3em; eine Schritgröße 3 mal größer als normal, mit border: 3px solid maroon; einen 3 Pixel dicken, dunkelroten Rahmen, und mit border-radius: 9px; werden die Ecken dieses Rahmen sanft abgerundet.

Weitere Hinweise

Die eigentlichen Style-Eigenschaften werden im Buchkapitel CSS-Eigenschaften behandelt.

Im vorliegenden Buch werden die Begriffe „Deklaration“ und „Deklarationsblock“ ansonsten nicht verwendet. Stattdessen ist von „Formaten“ und „Formatdefinitionen“ die Rede.

Referenzinformationen

  • Deklarationsblöcke und Deklarationen
CSS1.0 MSIE FFOX CHROME SAF OP

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License