In diesem Thema lernen Sie die grundlegenden Konzepte von CSS wie CSS-Regeln, Selektoren und Vererbung kennen. Außerdem erfahren Sie, wie Sie Ihren Webseiten in Dreamweaver CSS zuordnen können.

Cascading Stylesheets

Cascading Stylesheets (CSS) sind eine Sammlung von Formatierungsregeln, die das Aussehen der Inhalte einer Webseite bestimmen. Bei der Formatierung einer Seite mit CSS-Stilen werden Inhalt und Darstellung getrennt. Der Inhalt der Seite – der HTML-Code – befindet sich in der HTML-Datei. Die CSS-Regeln, die die Präsentation des Codes definieren, befinden sich dagegen in einer anderen Datei (einem externen Stylesheet) oder in einem anderen Teil des HTML-Dokuments (in der Regel im head-Bereich). Die Trennung zwischen Inhalt und Darstellung hat den Vorteil, dass bei einer Änderung nicht alle Eigenschaften auf jeder Seite einzeln aktualisiert zu werden brauchen. Dadurch ist es erheblich einfacher, das Erscheinungsbild einer Website zentral zu verwalten. Zudem ermöglicht es die Trennung zwischen Inhalt und Darstellung, den HTML-Code einfacher und sauberer zu halten. Dadurch wird die Seite im Browser schneller aufgebaut und die Navigation für Anwender, die auf Barrierefreiheit angewiesen sind (z. B. Nutzer von Bildschirmlesegeräten), wird erleichtert.

Mit CSS können Sie das Erscheinungsbild Ihrer Seite vielfältig gestalten und bis ins Detail kontrollieren. Sie können zahlreiche Textattribute festlegen, darunter Schriftart und Schriftgröße, Auszeichnungen wie fett, kursiv oder unterstrichen, Textschattierung, Text- und Hintergrundfarbe, Farbe und Unterstreichung für Hyperlinks und vieles mehr. Wenn Sie CSS zur Schriftartenverwaltung verwenden, können Sie zudem ein einheitlicheres Seitenlayout und Aussehen in den verschiedenen Browsern erzielen.

Neben der Textformatierung können Sie mit CSS auch das Format und die Position von Blockelementen auf einer Webseite bestimmen. Ein Blockelement ist ein eigenständiges Inhaltselement, das im HTML-Text in der Regel durch eine neue Zeile abgetrennt und als Block formatiert wird. Beispiele sind die Tags h1, p und div. Sie alle erzeugen Blockelemente auf der Webseite. Sie können Ränder und Rahmen für Blockelemente definieren, ihnen eine bestimmte Position zuweisen, eine Hintergrundfarbe hinzufügen, sie mit Fließtext umgeben und viele andere Gestaltungsoptionen nutzen. Das Seitenlayout mit CSS erfolgt hauptsächlich über das Bearbeiten von Blockelementen.

CSS-Regeln

Eine CSS-Formatierungsregel besteht aus zwei Teilen: dem Selektor und der Deklaration (bzw. meistens einem Block aus mehreren Deklarationen). Der Selektor ist ein Begriff (wie p, h1, ein Klassenname oder ein id-Attribut), mit dem das formatierte Element identifiziert wird. Mit dem Deklarationsblock werden dagegen die Stileigenschaften selbst definiert. Im folgenden Beispiel ist h1 der Selektor, die Elemente in der geschweiften Klammer ({}) bilden den Deklarationsblock:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

Eine einzelne Deklaration besteht ihrerseits aus zwei Teilen: der Eigenschaft (z. B. font-family) und dem Wert (z. B. Helvetica). In der obigen CSS-Regel wurde ein bestimmter Stil für h1-Tags erstellt: der Text für alle mit diesem Stil verknüpften h1-Tags hat eine Größe von 16 Pixel, die Schriftart Helvetica und den Schriftschnitt fett.

Der Stil wird über eine oder mehrere Regeln definiert und getrennt von dem eigentlichen Text gespeichert, dessen Formatierung er festlegt – entweder in einem externen Stylesheet oder im head-Bereich eines HTML-Dokuments. So lässt sich eine Regel für h1-Tags gleichzeitig auf viele Tags anwenden. Bei Nutzung externer Stylesheets kann sich die Regel auch auf Tags erstrecken, die sich auf zahlreichen verschiedenen Seiten befinden. Durch das CSS-Konzept wird die Aktualisierung von Websites so erheblich vereinfacht. Eine CSS-Regel braucht nur an einem einzigen Ort geändert zu werden, um die Formatierung aller Elemente, die den in ihr definierten Stil verwenden, automatisch zu aktualisieren.

CSS-Datei, Webseiten

In Dreamweaver können Sie die folgenden Arten von Stilen definieren:

  • Klassenstile ermöglichen die Anwendung von Formatierungseigenschaften auf beliebige Elemente auf der Seite.

  • HTML-Tag-Stile legen die Formatierung für ein bestimmtes Tag, z. B. für h1, fest. Wenn Sie einen CSS-Stil für das h1-Tag erstellen oder ändern, werden sämtliche mit dem h1-Tag formatierten Textstellen sofort aktualisiert.

  • Erweiterte Stile definieren die Formatierung einer bestimmten Kombination von Elementen oder anderer in CSS zulässiger Selektorformulare neu (der Selektor td h2 gilt z. B. für alle h2- Kopfzeilen in einer Tabellenzelle). Erweiterte Stile können ferner die Formatierung von Tags neu definieren, die ein bestimmtes id-Attribut enthalten (z. B. gelten die durch #myStyle definierten Stile für alle Tags, die das Attribut-Wert-Paar id="myStyle" enthalten).

CSS-Regeln können sich an folgenden Stellen befinden:

Externe CSS-Stylesheets

Sammlungen von CSS-Regeln, die in einer separaten, externen CSS-Datei (.css) gespeichert sind (dies ist keine HTML-Datei). Diese Datei wird über einen Hyperlink im head-Bereich eines Dokuments oder eine @import-Regel mit einer oder mehreren Seiten einer Website verknüpft.

Interne (oder eingebettete) CSS-Stylesheets

Sammlungen von CSS-Regeln, die sich in einem style-Tag im Head-Bereich eines HTML-Dokuments befinden.

Inline-Stile

Werden in bestimmten Instanzen von Tags in einem ganzen HTML-Dokument definiert. (Die Verwendung von Inline-Stilen wird nicht empfohlen.)

Dreamweaver erkennt Stile, die in vorhandenen Dokumenten definiert sind, sofern diese Stile den CSS-Richtlinien entsprechen. Dreamweaver stellt die zugewiesenen Stile zudem direkt in der Entwurfsansicht dar. (Die Dokumentvorschau in einem Browserfenster vermittelt gleichwohl den genauesten Eindruck vom „Live“-Erscheinungsbild der Seite.) Einige CSS-Stile werden in Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator, Opera, Apple Safari und anderen Browsern nicht einheitlich dargestellt; andere werden derzeit von keinem Browsertyp unterstützt.

Cascading Styles

Der Begriff cascading (kaskadierend) bezieht sich auf die Art und Weise, in der ein Browser die Stile bestimmter Elemente einer Webseite anzeigt. Die Stile, die auf einer Webseite zu sehen sind, können aus drei unterschiedlichen Quellen stammen: Dem Stylesheet, das der Autor der Seite erstellt hat, ggf. den benutzerangepassten Stilen und den Standardstilen des Browsers. In den vorherigen Abschnitten ging es um die Erstellung von Stilen für eine Webseite, die ein Autor der Webseite und der Stylesheets dieser Seite hinzugefügt hat. Aber die Browser verfügen ebenfalls über eigene Standard-Stylesheets, mit denen die Anzeige von Webseiten definiert wird. Außerdem können auch die Benutzer ihre Browser anpassen und so die Anzeige von Webseiten ändern. Letztendlich hängt die Anzeige einer Webseite von den Regeln ab, die sich aus der Überschneidung (Kaskadierung) der Stile dieser drei Quellen ergeben, um die Webseite optimal anzuzeigen.

Anhand eines allgemeinen Tags - dem Absatz-Tag <p> - wird dieses Konzept verdeutlicht. In der Standardeinstellung verfügen die Browser über Stylesheets, mit denen die Schriftart und die Schriftgröße von Fließtext definiert wird (also von Text, der im HTML-Code zwischen den <p>-Tags enthalten ist). So wird in der Standardeinstellung jeglicher Fließtext, einschließlich Absatztext, in Internet Explorer beispielsweise in Times New Roman, mittlere Größe, angezeigt.

Als Autor einer Webseite können Sie aber natürlich auch ein eigenes Stylesheet anlegen, mit dem der Standardstil des Browsers für Absatztext und die Schriftgröße überschrieben werden. So können Sie beispielsweise in einem Stylesheet die folgende Regel definieren:

p { 
font-family: Arial; 
font-size: small; 
}

Sobald ein Benutzer die Seite lädt, überschreiben die von Ihnen als dem Autor der Webseite definierten Absatzschriftart und die Größeneinstellungen die Standardeinstellungen des Browsers.

Die Benutzer können die Browseranzeige so anpassen, wie es Ihrer Nutzung am besten entspricht. In Internet Explorer können sie beispielsweise mithilfe von „Ansicht“ > „Textgröße“ > „Sehr groß“ die Schriftart der Seite vergrößern, falls ihnen die Schrift zu klein erscheint. Letztendlich überschreibt (zumindest in diesem Fall) die vom Benutzer geänderte Einstellung sowohl den Standardstil des Browsers als auch den vom Autor der Webseite definierten Absatzstil.

Aber auch die als Vererbung bezeichnete Übernahme der Eigenschaften von übergeordneten Elementen spielt bei der Kaskadierung eine Rolle. Die Eigenschaften der meisten Elemente einer Webseite werden übernommen (vererbt): Absatz-Tags erben beispielsweise bestimmte Eigenschaften von den body-Tags und span-Tags übernehmen bestimmte Eigenschaften der Absatz-Tags. Wenn Sie also in einem Stylesheet die folgende Regel definieren:

body { 
font-family: Arial; 
font-style: italic; 
}

werden alle Absatz-Tags Ihrer Webseite (sowie der Text, der Eigenschaften von diesen Absatz-Tags übernimmt) in Arial und kursiv angezeigt, da das Absatz-Tag diese Eigenschaften vom body-Tag erbt. Natürlich können Sie Ihre Regeln auch differenzierter definieren und Stile erstellen, die z. B. auch die Standardformeln für die Vererbung überschreiben. So können Sie beispielsweise in einem Stylesheet die folgende Regel definieren:

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

Der gesamte Fließtext wird in Arial angezeigt - mit Ausnahme von Text in Absatz-Tags und Text, der diese Eigenschaften übernimmt. Dieser wird in einer normalen Courier-Schrift dargestellt. Technisch gesehen erbt der Absatztext zunächst die Eigenschaften, die für das body-Tag definiert wurden. Aber diese Eigenschaften werden dann ignoriert, da für den Absatztext ja eigene Eigenschaften festgelegt wurden. Anders ausgedrückt erben die Seitenelemente zwar die Eigenschaften übergeordneter Objekte, wenden dann aber eigene Tag-Eigenschaften an und überschreiben die Standardeinstellungen der Vererbung.

Alle oben beschriebenen Faktoren sowie andere Aspekte, wie die CSS-Spezifizierung (ein System, das den einzelnen Arten von CSS-Regeln eine unterschiedliche Gewichtung zuweist) und die Reihenfolge der CSS-Regeln, ergeben eine komplexe Überschneidung von Elementen mit höheren und niedrigeren Prioritäten. Weitere Informationen zu den Regeln der Kaskadierung, Vererbung und Spezifizierung finden Sie auf der Seite www.w3.org/TR/CSS2/cascade.html.

Textformatierung und CSS

Standardmäßig verwendet Dreamweaver Cascading Stylesheets (CSS), um Texte zu formatieren. Durch die Stile, mit denen Sie Texte über den Eigenschafteninspektor oder Menübefehle formatieren, werden CSS-Regeln erstellt und im head-Bereich des aktuellen Dokuments eingebettet.

Sie können CSS-Regeln und -Eigenschaften auch im CSS Designer erstellen und bearbeiten. Der CSS Designer ist wesentlich robuster als der Eigenschafteninspektor und zeigt alle für das aktuelle Dokument definierten CSS-Regeln an, unabhängig davon, ob diese Regeln im head-Bereich des Dokuments eingebettet oder in einem externen Stylesheet enthalten sind. Adobe empfiehlt die Verwendung des CSS Designer (anstelle des Eigenschafteninspektors) als Haupttool zum Erstellen und Bearbeiten von CSS. Das Ergebnis ist Code, der optimiert und einfacher zu verwalten ist.

Weitere Informationen zum CSS Designer finden Sie unter Gestalten von Seitenlayouts mit dem CSS Designer.

Neben selbst erstellten Stilen und Stylesheets können Sie auch die vordefinierten Stylesheets von Dreamweaver auf Ihre Dokumente anwenden.

Ein Tutorial zur Textformatierung mit CSS finden Sie unter www.adobe.com/go/vid0153_de.

CSS-Kurzschrifteigenschaften

Die CSS-Eigenschaften ermöglichen die Erstellung von Stilen mithilfe einer abgekürzten Syntax, CSS-Kurzschrift genannt. Mit der CSS-Kurzschrift können Sie die Werte zahlreicher Eigenschaften mit einer einzigen Deklaration bestimmen. Die Eigenschaft font ermöglicht es Ihnen beispielsweise, mit einer einzigen Syntaxzeile die Eigenschaften zu font-style, font-variant, font-weight, font-size, line-height und font-family einzurichten.

Bei der Verwendung von CSS-Kurzschrift ist zu beachten, dass den von einer CSS-Kurzschrifteigenschaft ausgelassenen Werten der Standardwert zugeordnet wird. Dies kann dazu führen, dass Seiten nicht ordnungsgemäß angezeigt werden, wenn demselben Tag zwei oder mehr CSS-Regeln zugeordnet werden.

Die nachfolgend dargestellte Regel für h1 verwendet beispielsweise die lange CSS-Syntax. Beachten Sie, dass den Eigenschaften font-variant, font-stretch, font-size-adjust und font-style ihre Standardwerte zugeordnet wurden.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Als einzelne Kurzschrifteigenschaft würde dieselbe Regel folgendermaßen aussehen:

h1 { font: bold 16pt/18pt Arial }

Bei Verwendung der Kurzschrift werden den ausgelassenen Werten automatisch ihre Standardwerte zugewiesen. Daher werden in obigem Kurzschriftbeispiel die Tags font-variant, font-style, font-stretch und font-size-adjust ausgelassen

Wenn Sie Stile an mehreren Orten definiert haben (z. B. in eine HTML-Seite eingebettet und aus einem externen Stylesheet importiert) und sowohl die lange als auch die kurze Form der CSS-Syntax verwenden, bedenken Sie, dass Eigenschaften, die in einer Kurzschriftregel ausgelassen werden, möglicherweise Eigenschaften außer Kraft setzen (oder überlagern), die an anderer Stelle explizit eingerichtet wurden.

Daher verwendet Dreamweaver standardmäßig die lange Form der CSS-Schreibweise. Auf diese Weise werden Probleme vermieden, die auftreten können, wenn eine Kurzschriftregel eine Langschriftregel überschreibt. Wenn Sie in Dreamweaver eine mit CSS-Kurzschrift codierte Webseite öffnen, achten Sie darauf, dass Dreamweaver etwaige neue CSS-Regeln in Langschrift erstellt. Sie können bestimmen, wie Dreamweaver CSS-Regeln erstellt und bearbeitet, indem Sie im Dialogfeld „Voreinstellungen“ („Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh)) in der Kategorie „CSS-Stile“ die CSS-Bearbeitungsvoreinstellungen ändern.

Dreamweaver und CSS

In Dreamweaver gibt es verschiedene Möglichkeiten, um mit CSS zu arbeiten:

  • Mit dem CSS Designer können Sie CSS erstellen, ohne Code in nennenswertem Umfang schreiben zu müssen. Weitere Informationen finden Sie unter Gestalten von Seitenlayouts mit dem CSS Designer.
  • Sie können CSS-Code auch von Hand schreiben. Weitere Informationen zu den Programmierfunktionen von Dreamweaver finden Sie unter Programmierumgebung in Dreamweaver.
  • Wenn Sie es vorziehen, mit Sass-, Scss- oder Less-Dateien zu arbeiten, können Sie Ihren Code in der bevorzugten Syntax verfassen und in Dreamweaver verwenden. Weitere Informationen finden Sie unter CSS-Präprozessoren.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie