CSS-Formatvorlagen (Cascading Style Sheets) – Übersicht

Wenn Sie CSS zur Festlegung Ihrer Schriftarten verwenden, können Sie eine größere browserübergreifende Konsistenz bei Erscheinungsbild und Layout Ihrer Seiten erreichen. Zu den zahlreichen Texteigenschaften, die Sie über CSS steuern können, gehören die Schriftartfamilie und Schriftgröße, Text- und Hintergrundfarbe, Textformatierung sowie Linkfarbe.

Mithilfe von CSS können Sie außerdem für Elemente auf Blockebene folgende Aktionen durchführen: Positionierung, Hinzufügen von Farbe, Schwebenlassen von unverankertem Text, Festlegung von Außenabständen und Rahmen. Ein Element auf Blockebene ist ein eigenständiger Inhalt, der optisch als Block formatiert ist. Beispiele für Elemente auf Blockebene sind Inhaltsblöcke (die p-Tags entsprechen) und Bereiche (die div-Tags entsprechen).

Site.com unterstützt CSS3, die neueste WC3-Spezifikation für CSS.

Inline-Stile und Formatvorlagen im Vergleich

In Site.com Studio haben Sie folgende Möglichkeiten:

• Sie können Stile mithilfe der Option Inline im Fenster "Stil" () direkt auf eine ausgewählte Seite oder ein Seitenelement anwenden. Inline-Stile gelten nur für das ausgewählte Element.
• Sie können Stilelemente, wie beispielsweise CSS-Klassen oder IDs, zu einer Formatvorlage hinzufügen und die Stilelemente auf die ausgewählte Seite bzw. das ausgewählte Seitenelement anwenden. Durch diese Vorgehensweise wird der Inhalt (Ihre Webseiten) von der Darstellung (Formatvorlage) getrennt.

Wenn Sie nicht mit CSS vertraut sind, ist die Inline-Option vermutlich am benutzerfreundlichsten und am leichtesten verständlich. Mit Inline-Stilen gehen jedoch zahlreiche Vorteile von Formatvorlagen verloren, da Inline-Stile Inhalt und Darstellung vermischen – der Inline-Stil wird nur auf das jeweilige Einzelelement angewendet. Um den Stil Ihrer Site zu aktualisieren, müssen Sie die Stileigenschaften aller betroffenen Seiten und Seitenelemente aktualisieren.

Im Gegensatz dazu sind Formatvorlagen zwar zunächst schwerer zu verstehen, sie ermöglichen es Ihnen jedoch, Site-weite Änderungen von einem zentralen Ort aus vorzunehmen. Wenn Sie ein Stilelement in Ihrer Formatvorlage aktualisieren, wird sofort der Stil aller Seiten und Seitenelemente aktualisiert, die dieses Stilelement verwenden.

Es lohnt den Zeitaufwand, sich mit CSS vertraut zu machen, da CSS folgende Vorteile bietet:

• Spart Zeit und Aufwand beim Erstellen und Entwerfen der Site.
• Führt zu saubereren, konsistenteren Site-Designs.
• Vereinfacht die Navigation für Personen mit Problemen im Zusammenhang mit der Barrierefreiheit (beispielsweise Site-Besucher, die Bildschirmleseprogramme verwenden).

Weitere Informationen zur Verwendung von CSS und zum Erstellen von Formatvorlagen finden Sie im World Wide Web Consortium (W3C) unter www.w3.org/Style/CSS. Es stehen auch zahlreiche Tutorials im Internet zur Verfügung, die eine eingehende Schulung zu CSS bieten.

Informationen zu CSS-Klassen und -IDs

Wenn Sie Formatvorlagen zur Gestaltung Ihrer Site verwenden, können Sie die Formatierung von HTML-Tags wie body oder h1 neu definieren. Sie können auch CSS-Klassen und -IDs erstellen, um das Format bestimmter Elemente zu definieren, beispielsweise für Kopfzeilen oder wiederholte Inhalte. Mit einer CSS-Klasse können Sie Stileigenschaften definieren und auf mehrere Elemente auf einer Seite anwenden, wohingegen eine CSS-ID ideal für die gezielte Definition eines einzelnen Elements auf einer Seite ist. Beispielsweise werden auf Seitenstrukturen IDs häufig zur Definition der Kopf- und Fußzeilenbereiche verwendet, da jede Seite nur jeweils eine einzige Kopf- und Fußzeile besitzt, während Klassen zur Definition von wiederkehrenden Seitenelementen, beispielsweise von Blogposts, verwendet werden.

Bewährte Methoden

• Nehmen Sie ein CSS Reset in Ihre Formatvorlage auf, um alle Stilelemente auf einen Basiswert zurückzusetzen. Mit einem CSS Reset können Unterschiede zwischen verschiedenen Browsern vermieden werden, die auf deren integrierten Standardstileinstellungen beruhen.
• Verwenden Sie wann immer möglich CSS-Klassen und IDs anstelle von Inline-Stilen. Durch CSS-Klassen und -IDs wird die Trennung von Darstellung und Inhalt gefördert und die Aktualisierung der Stile auf der Site erleichtert.
• Verwenden Sie IDs bei nur einem einzigen Vorkommen pro Seite. Wenn Sie die ID verwendet haben, können Sie sie auf der betreffenden Seite nicht noch einmal verwenden. Verwenden Sie Klassen bei einem oder mehreren Vorkommen pro Seite.
• Verwenden Sie Gruppen zur logischen Organisation von CSS und zur leichteren Pflege Ihrer Formatvorlage.
• Wenn Sie CSS3 verwenden, sollten Sie unbedingt in jedem Browser, von dem Ihre Website unterstützt werden soll, eine Vorschau der Site anzeigen und die Site testen, da bei einigen Browsern die CSS3-Funktionen noch nicht vollständig implementiert sind.