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 Style Sheets (CSS) ist eine Sammlung von Formatierungsregeln, die das Erscheinungsbild von Inhalten auf einer Web-Seite steuern.Die Verwendung von CSS-Stilen zur Formatierung einer Seite trennt Inhalte von der Darstellung. Der Inhalt deiner Seite – der HTML-Code – befindet sich in der HTML-Datei, und die CSS-Regeln, die die Darstellung des Codes definieren, befinden sich in einer anderen Datei (einem externen Stylesheet) oder in einem anderen Teil des HTML-dokuments (normalerweise im Head-Bereich). Die Trennung von Inhalt und Darstellung macht es viel einfacher, das Erscheinungsbild deiner Website von einem zentralen Ort aus zu verwalten, da du nicht jede Eigenschaft auf jeder Seite aktualisieren musst, wenn du eine Änderung vornehmen möchtest.Die Trennung von Inhalt und Darstellung führt auch zu einfacherem und saubererem HTML-Code, was kürzere Browser-Ladezeiten ermöglicht und die Navigation für Menschen mit Barrierefreiheitsproblemen vereinfacht (zum Beispiel für diejenigen, die Bildschirmlesegeräte verwenden).
CSS gibt dir große Flexibilität und Kontrolle über das genaue Erscheinungsbild deiner Seite. Mit CSS kannst du viele Texteigenschaften steuern, einschließlich spezifischer Schriftarten und Schriftgrade; Fett, Kursiv, Unterstreichen und Text-Schatten; Textfarbe und Hintergrundfarbe; Verknüpfungsfarbe und Verknüpfungsunterstreichung; und vieles mehr. Durch die Verwendung von CSS zur Steuerung deiner Schriftarten kannst du auch eine konsistentere Behandlung deines Seitenlayouts und Erscheinungsbilds in mehreren Browsern sicherstellen.
Zusätzlich zur Textformatierung kannst du CSS verwenden, um das Format und die Positionierung von Block-Ebene-Elementen auf einer Web-Seite zu steuern. Ein Block-Ebene-Element ist ein eigenständiger Inhalt, der normalerweise durch eine neue Zeile im HTML getrennt und visuell als Block formatiert wird. Zum Beispiel erzeugen h1-Tags, p-Tags und div-Tags alle Block-Ebene-Elemente auf einer Web-Seite. Du kannst Ränder und Rahmen für Elemente auf Blockebene festlegen, sie an einem bestimmten Ort positionieren, Hintergrundfarbe hinzufügen, Text um sie fließen lassen und so weiter.Die Manipulation von Blockelementen ist im Wesentlichen die Art, wie du Seiten mit CSS gestaltest.
CSS-Regeln
Eine CSS-Formatierungsregel besteht aus zwei Teilen – dem Selektor und der Deklaration (oder in den meisten Fällen einem Block von Deklarationen). Der Selektor ist ein Begriff (wie p, h1,ein Klassenname oder eine ID), der das formatierte Element identifiziert, und der Deklarationsblock definiert, welche Stileigenschaften vorliegen. Im folgenden Beispiel ist h1 der Selektor, und alles, was zwischen den geschweiften Klammern ({}) steht, ist der Deklarationsblock:
h1 {
Schriftgrad: 16 Pixel;
Schrift: Helvetica;
Schrift-Stärke: Fett;
}
Eine einzelne Deklaration besteht aus zwei Teilen, der Eigenschaft (wie font-family) und dem Wert (wie Helvetica). In der vorherigen CSS-Regel wurde ein bestimmter Stil für h1-Tags erstellt: der Text für alle h1-Tags, die mit diesem Stil verknüpft sind, wird 16 Pixel groß, Helvetica-Schrift und fett sein.
Der Stil (der von einer Regel oder einer Sammlung von Regeln stammt) befindet sich an einem Ort getrennt vom eigentlichen Text, den er formatiert – normalerweise in einem externen Stylesheet oder im Head-Bereich eines HTML-Dokuments.Somit kann eine Regel für h1-Tags auf viele Tags gleichzeitig angewendet werden (und im Fall von externen Stylesheets kann die Regel auf viele Tags gleichzeitig auf vielen verschiedenen Seiten angewendet werden). Auf diese Weise bietet CSS extrem einfache Aktualisierungsmöglichkeiten. Wenn du eine CSS-Regel an einem Ort aktualisierst, wird die Formatierung aller Elemente, die den definierten Stil verwenden, automatisch auf den neuen Stil aktualisiert.
In Dreamweaver können Sie die folgenden Arten von Stilen definieren:
Klassenstile ermöglichen es, Stileigenschaften auf beliebige Elemente auf der Seite anzuwenden.
HTML-Tag-Styles definieren die Formatierung für einen bestimmten Tag neu, wie zum Beispiel h1.Wenn du einen CSS-Stil für den h1-Tag anlegst oder änderst, wird aller Text, der mit dem h1-Tag formatiert ist, sofort aktualisiert.
Erweiterte Stile definieren die Formatierung für eine bestimmte Kombination von Elementen neu oder für andere Selektorformen, wie sie von CSS unterstützt werden (zum Beispiel gilt der Selektor td h2, wann immer ein h2-Header in einer Tabellenzelle erscheint.)Erweiterte Stile können auch die Formatierung für Tags neu definieren, die ein bestimmtes id-Attribut enthalten (zum Beispiel gelten die Stile, die durch #myStyle definiert werden, 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 (nicht in einer HTML-Datei). Diese Datei ist mit einer oder mehreren Seiten einer Website über einen Link oder eine @import-Regel im Head-Bereich eines Dokuments verknüpft.
Interne (oder eingebettete) CSS-Stylesheets
Sammlungen von CSS-Regeln, die in einem style-Tag im Head-Bereich eines HTML-Dokuments enthalten sind.
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, solange sie den CSS-Stilrichtlinien entsprechen. Dreamweaver rendert die meisten angewendeten Stile auch direkt in der Entwurfsansicht.(Die Vorschau des Dokuments in einem Browser-Fenster gibt dir jedoch das präziseste „Live"-Rendern der Seite.)Manche CSS-Stile werden in Microsoft Internet Explorer, Netscape, Opera, Apple Safari oder anderen Browsern unterschiedlich gerendert, und einige werden derzeit von keinem Browser unterstützt.
Cascading Styles
Der Begriff kaskadierend bezieht sich auf die Art, wie ein Browser letztendlich Stilvorlagen für bestimmte Elemente auf einer Web-Seite anzeigt. Drei verschiedene Quellen sind für die Stilvorlagen verantwortlich, die du auf einer Web-Seite siehst: die Stilvorlage, die vom Autor der Seite erstellt wurde, die angepassten Stilauswahlen des Benutzers (falls vorhanden) und die Standard-Stilvorlagen des Browsers selbst. Die vorherigen Themen beschreiben das Erstellen von Stilvorlagen für eine Web-Seite als Autor sowohl der Web-Seite als auch der Stilvorlage, die mit dieser Seite verknüpft ist. Browser haben jedoch auch ihre eigenen Standard-Stylesheets, die das Rendern von Webseiten bestimmen. Zusätzlich können Benutzer ihre Browser anpassen, indem sie Einstellungen vornehmen, die die Anzeige von Webseiten ändern.Das endgültige Erscheinungsbild einer Web-Seite ist das Ergebnis der Regeln all dieser drei Quellen, die zusammenkommen (oder „kaskadieren"), um die Web-Seite optimal zu rendern.
Ein häufiger Tag – der Absatz-Tag oder <p>-Tag – veranschaulicht das Konzept.Standardmäßig verfügen Browser über Stylesheets, die die Schrift und den Schriftgrad für Absatztext definieren (das heißt Text, der zwischen <p>-Tags im HTML-Code steht).Im Internet Explorer wird beispielsweise der gesamte Textkörper, einschließlich Absatztext, standardmäßig in Times New Roman, Medium Font angezeigt.
Als Autor einer Web-Seite kannst du jedoch ein Stylesheet anlegen, das die Standard-Formatierung des Browsers für Absatz-Schrift und Schriftgrad überschreibt.Du kannst beispielsweise die folgende Regel in deinem Stylesheet anlegen:
p {
font-family: Arial;
font-size: small;
}
Wenn ein Anwender die Seite lädt, überschreiben die von dir als Autor festgelegten Einstellungen für Schrift und Schriftgrad die standardmäßigen Absatztexteinstellungen des Browsers.
Benutzer können Einstellungen vornehmen, um die Browser-Anzeige optimal an ihre eigene Nutzung anzupassen.Im Internet Explorer kann der Anwender beispielsweise Ansicht > Textgröße > Sehr groß auswählen, um die Seitenschrift auf eine besser lesbare Größe zu erweitern, wenn er die Schrift für zu klein hält.Letztendlich (zumindest in diesem Fall) überschreibt die Auswahl des Anwenders sowohl die standardmäßigen Browser-Stile für den Absatzschriftgrad als auch die Absatzformate, die vom Autor der Web-Seite erstellt wurden.
Aber auch die als Vererbung bezeichnete Übernahme der Eigenschaften von übergeordneten Elementen spielt bei der Kaskadierung eine Rolle. Eigenschaften für die meisten Elemente auf einer Web-Seite werden vererbt – beispielsweise erben Absatz-Tags bestimmte Eigenschaften von Body-Tags, Span-Tags erben bestimmte Eigenschaften von Absatz-Tags und so weiter.Wenn du also die folgende Regel in deinem Stylesheet anlegst:
body {
font-family: Arial;
font-style: italic;
}
In diesem Fall 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 Textkörper wird Arial und kursiv sein außer Absatz- (und dessen vererbter) Text, der als Courier normal (nicht kursiv) angezeigt wird.Technisch gesehen erbt das Absatz-Tag zunächst die Eigenschaften, die für das Body-Tag festgelegt sind, ignoriert diese Eigenschaften dann aber, da es eigene definierte Eigenschaften besitzt.Mit anderen Worten: Während Seitenelemente generell Eigenschaften von oben erben, führt die direkte Anwendung einer Eigenschaft auf ein Tag immer zu einem Überschreiben der standardmäßigen Formel für Vererbung.
Die Kombination all der oben diskutierten Faktoren plus andere Faktoren wie CSS-Spezifität (ein System, das verschiedenen Arten von CSS-Regeln unterschiedliche Gewichtung gibt) und die Reihenfolge von CSS-Regeln führen letztendlich zu einer komplexen Kaskade, bei der Elemente mit höheren Prioritäten Eigenschaften überschreiben, die niedrigere Prioritäten haben.Für weitere Informationen über die Regeln für die Kaskade, Vererbung und Spezifität besuche 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.
Für weitere Informationen zu CSS Designer siehe Seitenlayout mit CSS Designer.
Neben selbst erstellten Stilen und Stylesheets können Sie auch die vordefinierten Stylesheets von Dreamweaver auf Ihre Dokumente anwenden.
Für ein Tutorial zur Textformatierung mit CSS siehe www.adobe.com/go/vid0153.
CSS-Kurzschrifteigenschaften
Die CSS-Spezifikation ermöglicht die Erstellung von Stilen mit einer abgekürzten Syntax, die als Shorthand CSS bekannt ist.Shorthand CSS lässt dich die Werte mehrerer Eigenschaften mit einer einzigen Deklaration festlegen.Beispielsweise ermöglicht es die font-Eigenschaft, font-style-, font-variant-, font-weight-, font-size-, line-height- und font-family-Eigenschaften in einer einzigen Zeile festzulegen.
Ein wichtiger Punkt bei der Verwendung von CSS-Kurzschreibweise ist, dass Werte, die in einer CSS-Kurzeigenschaft weggelassen werden, ihren Standardwert erhalten.Dies kann dazu führen, dass Seiten falsch angezeigt werden, wenn zwei oder mehr CSS-Regeln demselben Tag zugewiesen werden.
Zum Beispiel verwendet die h1-Regel unten die CSS-Langform-Syntax.Beachte, dass den font-variant-, font-stretch-, font-size-adjust- und font-style-Eigenschaften ihre Standardwerte zugewiesen 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 Kurzeigenschaft umgeschrieben, könnte dieselbe Regel folgendermaßen aussehen:
h1 { font: bold 16pt/18pt Arial }
Bei der Kurzschreibweise werden weggelassene Werte automatisch ihren Standardwerten zugewiesen.Das vorherige Kurzschreibweise-Beispiel lässt also die Tags font-variant, font-style, font-stretch und font-size-adjust weg.
Wenn du Stile an mehr als einer Stelle definiert hast (zum Beispiel sowohl in eine HTML-Seite eingebettet als auch aus einem externen Stylesheet importiert) und sowohl die kurze als auch die lange Form der CSS-Syntax verwendest, beachte, dass weggelassene Eigenschaften in einer Kurzregel Eigenschaften überschreiben (oder cascade) können, die in einer anderen Regel explizit festgelegt sind.
Aus diesem Grund verwendet Dreamweaver standardmäßig die Langform der CSS-Notation.Dies verhindert mögliche Probleme, die durch eine Kurzregel verursacht werden, die eine Langregel überschreibt.Wenn du eine Web-Seite öffnest, die mit CSS-Kurzschreibweise in Dreamweaver codiert wurde, beachte, dass Dreamweaver alle neuen CSS-Regeln in der Langform erstellt.Du kannst festlegen, wie Dreamweaver CSS-Regeln erstellt und bearbeitet, indem du die CSS-Bearbeitungseinstellungen in der Kategorie CSS-Stile des Dialogfelds Einstellungen änderst (Bearbeiten > Einstellungen unter Windows; Dreamweaver > Einstellungen auf dem Macintosh).
Dreamweaver und CSS
In Dreamweaver kannst du auf verschiedene Weise mit CSS arbeiten:
- Mit dem CSS Designer können Sie CSS erstellen, ohne Code in nennenswertem Umfang schreiben zu müssen. Weitere Informationen finden Sie unter Seitenlayouts mit CSS Designer gestalten.
- Sie können CSS-Code auch von Hand schreiben. Weitere Informationen zu den von Dreamweaver angebotenen Coding-Funktionen findest du unter Coding-Umgebung 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 findest du unter CSS-Präprozessoren.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
