Lerne die Grundlagen zu CSS (Cascading Style Sheets). Erfahre, welche Werkzeuge Dreamweaver zur Formatierung von Web-Seiten mit CSS bietet.
Dreamweaver macht die Arbeit mit CSS leicht. Trotzdem sollten Web-Designerinnen und -Designer mit CSS grundlegend vertraut sein, damit sie die entsprechenden Funktionen in Dreamweaver effektiv einsetzen können. In diesem Tutorial lernst du die Grundlagen von CSS und erfährst, wie du mit den Formatierungsfunktionen von CSS Designer in Dreamweaver gültigen CSS-Code erstellst.
Dieses Tutorial verwendet eine vorkonfigurierte Seite von Initializr . Initializr ist eine Website, mit der du eine Basisversion deines Webdesign-Projekts generieren kannst. Diese Basisversion umfasst HTML-, CSS- und JavaScript-Dateien inklusive Inhalten, Formatierung und Navigationselementen.
Rufe initializr.com in einem Webbrowser auf, um ein HTML5-Initializr-Projekt anzulegen.
Klicke auf „Responsive“. Wähle „Mobile-first Responsive“ und „Modernizr“. Deaktiviere alle anderen Optionen (vgl. Abbildung 1).
Hinweis: Das responsive Projekt enthält ein Standard-Layout, CSS-Dateien und weitere Dateien, die das Konzept der Formatierung mit CSS veranschaulichen.
Lade die ZIP-Datei herunter. Extrahiere die enthaltenen Dateien in einem Ordner auf deinem Computer.
Starte Dreamweaver.
Öffne die Datei „index.html“.
Hinweis: Dieses Tutorial wurde mit einer älteren Version von Dreamweaver erstellt. Öffne den Creative Cloud-Client, und prüfe den Status deiner Dreamweaver-Installation. Wenn du die aktuelle Version installiert hast, steht auf der Registerkarte „Apps“ beim Produktnamen „Aktuell“ (vgl. Abbildung 2).
Wähle die Ansicht „Teilen“. Aktiviere die Ansicht „Live“, um gleichzeitig eine Vorschau deiner Änderungen und den Quell-Code anzeigen zu können.
In der Anfangszeit des Web wurde die Struktur einer Seite mit HTML definiert, und die Formatierung wurde anhand von Attributen für die HTML-Tags festgelegt. Web-Designerinnen und Web-Designer mussten Formatierungsanweisungen innerhalb einzelner Seiten und seitenübergreifend wiederholen. Das machte die Aktualisierung und Verwaltung von Websites extrem aufwendig.
Um diese Aufgaben leichter zu gestalten, wurde CSS (Cascading Style Sheets) eingeführt. Mit CSS werden Formatierungsanweisungen getrennt vom HTML-Code definiert. Design- und Entwicklungs-Teams können damit Formatierungen und Stile an zentraler Stelle organisieren und aktualisieren und leichter wiederverwenden. Layouts wurden immer noch größtenteils in HTML festgelegt; im CSS-Code wurden Größe, Farbe und andere grundlegende visuelle Attribute definiert.
Heutzutage steuert der CSS-Code alles von der Darstellung der Elemente bis zu ihrer Platzierung auf der Seite und sogar einfache 2D- und 3D-Animationen. In der HTML-Datei wird im Grunde nur die Art eines Elements festgelegt (z. B. Absatz, Überschrift oder Container (DIV-Element)). Wenn du im CSS-Code das Look-and-Feel einer Seite änderst, spielt die Reihenfolge, in der die Elemente im HTML-Code aufgeführt werden, keine Rolle. Du kannst die Formatierung oder Darstellung auch nach bestimmten Faktoren wie Größe oder Ausrichtung des Bildschirms anpassen.
Das Dreamweaver-Werkzeug „CSS Designer“ bietet dir eine visuelle Oberfläche zum Hinzufügen, Bearbeiten und Entfernen von Formatierungen innerhalb deiner Web-Seite oder in verknüpften externen CSS-Dateien. Das Video Mit CSS formatieren gibt eine praktische Einführung in CSS Designer.
Hinweis: Formatierungen lassen sich direkt in einer Seite definieren – in Form von sogenannten „internen Stylesheets“. Dazu legst du zum Beispiel innerhalb des Header-Bereichs einen -Block an oder definierst die Formatierung innerhalb einzelner Tags. Empfohlen wird jedoch die Verwendung eines externen Stylesheets. Damit lassen sich Formatierungsanweisungen leichter wiederverwenden.
Führe die folgenden Schritte durch, um Layout und Position von CSS Designer anzupassen und einige grundlegende Funktionen des Werkzeugs kennenzulernen.
Um das Bedienfeld „CSS Designer“ vollständig anzuzeigen, öffne das Dropdown-Menü rechts oben. Ändere die Ansicht von „Kompakt“ in „Erweitert“ (vgl. Abbildung 4).
Mit CSS Designer kannst du eine neue CSS-Datei erstellen oder eine vorhandene Datei verknüpfen. Klicke auf das Pluszeichen im Bedienfeld „Quellen“, um die Optionen für die Zuordnung eines Stylesheets zu einer Web-Seite anzuzeigen. Drücke die Esc-Taste, um die Optionen wieder auszublenden.
Klicke auf „main.css“. Im Bereich „Selektoren“ werden die im Stylesheet definierten Selektoren angezeigt.
Der Begriff „Cascading“ (kaskadierend) in „Cascading Style Sheet“ beschreibt, wie Webbrowser die Formatierungsanweisung für ein Element auswählen, wenn im CSS-Code mehrere Properties für dieses Element definiert sind oder wenn für das Element Anweisungen aus verschiedenen Quellen herangezogen werden. Im Artikel Cascading – What Does It Mean? (Was bedeutet „Cascading“?) wird das Prinzip gut erklärt.
Um die CSS-Kaskade zu veranschaulichen, legst du jetzt Standardeinstellungen für Schrift, Schriftgröße und Schriftfarbe im gesamten Dokument fest. Theoretisch kannst du für jedes einzelne HTML-Element, das Text enthält, Anweisungen festlegen. Diese Vorgehensweise wäre jedoch umständlich und fehleranfällig. Das Kaskadenprinzip von CSS bietet dir die Möglichkeit, Standard-Textstile für die gesamte HTML-Seite oder den Haupttext festzulegen. Alle Textelemente auf der Seite übernehmen diese Stile, sofern du sie nicht individuell anpasst.
Klicke im Bedienfeld „CSS Designer“ unter „Quellen“ auf „main.css“.
Klicke in der Selektorenliste auf „html, button, input, select, textarea“.
Klicke im Bedienfeld „Eigenschaften“ auf das Text-Symbol (T). Als Textfarbe ist momentan #222 (Schwarzgrau) festgelegt.
Klicke auf den Farbwähler. Wähle eine neue Farbe aus (vgl. Abbildung 6).
Setze die Farbe zurück auf #222.
Das Kaskadenprinzip funktioniert auch, wenn innerhalb einer oder mehrerer CSS-Dateien mehrere Anweisungen für ein Element definiert sind. Lege beispielsweise in der Datei „main.css“ für PARAGRAPH-Elemente die Farbe Blau fest:
Setze dann in der Datei „normalize.min.css“ die Schriftgröße in Absätzen auf 10 Pixel:
Obwohl zwei Anweisungen in separaten CSS-Dateien definiert wurden, werden beide angewendet: Absatztext wird nun in blauer Farbe mit einer Schriftgröße von 10 Pixel angezeigt.
Der Artikel CSS Specificity: Things You Should Know (Was du über die CSS-Spezifität wissen solltest) enthält ausführlichere Informationen zu den Regeln der CSS-Kaskade, z. B. die Verarbeitung von widersprüchlichen CSS-Anweisungen.
Wie der Name schon andeutet, kannst du mit CSS-Selektoren die HTML-Elemente auswählen (oder suchen), auf die eine CSS-Anweisung angewendet werden soll. Häufig verwendete Selektorarten sind z. B. Element (oder Typ), Klasse und ID.
Element- oder Typ-Selektoren suchen alle HTML-Elemente des angegebenen Typs im Dokument. Um die Funktionsweise eines Selektors nachzuvollziehen, wirst du nun in Dreamweaver einen Element-Selektor für HR-Tags („horizontal rule“; damit wird in HTML5 ein Themenwechsel visualisiert) bearbeiten.
Füge ein HR -Tag zur Datei „index.html“ hinzu. Wähle die Ansicht „Teilen“. Gib unterhalb des Header-Abschnitts in Zeile 38 „
“ ein. Das vorhandene Stylesheet enthält eine Anweisung, die HR -Elemente als 1 Pixel hohe graue Linie anzeigt.
Wähle im Bedienfeld „CSS Designer“ unter „Quellen“ die Datei „main.css“ aus. Suche den Selektor „hr“ (verwende das Suchfeld, um die Liste der Ergebnisse einzugrenzen).
Klicke auf „hr“ und das Kontrollkästchen „Nur verwendete“, um nur die angewendeten CSS-Properties anzuzeigen:
height: 1px
display: block
margin: 1 em (oben und unten)
border-top: #ccc;
Scrolle im Bedienfeld „Eigenschaften“ zum Abschnitt „Rahmen“. Bearbeite den oberen Rahmen. Klicke dazu auf den Selektor „color“. Verwende das Pipette-Werkzeug zur Auswahl der hellorangen Farbe im Header-Bereich (vgl. Abbildung 7).
Klicke auf der Dokumentleiste auf „main.css“. Zeige die Vorschau in der Ansicht „Live“ an. In der Ansicht „Teilen“ siehst du, dass die Farbe der HR -Elemente in orange geändert wurde (vgl. Abbildung 8).
Der in der Ansicht „Code“ angezeigte CSS-Code entspricht der Anweisung, die du in CSS Designer geändert hast:
Klassen-Selektoren können auf jedes HTML-Element angewendet werden. Im CSS-Code werden Klassen-Selektoren mit einem Punkt vor dem Klassennamen definiert. Anschließend weist du die Klasse einem HTML-Element anhand des Attributs „class“ und des Namens der CSS-Klasse ohne den Punkt zu.
Führe folgende Schritte durch, um einen der Klassen-Selektoren im Beispielprojekt zu prüfen.
Klicke auf die Klasse „.header-container“ im Bereich „Selektoren“ von CSS Designer.
Prüfe, ob „Nur verwendete“ ausgewählt wurde. Schaue dir die drei für diese Klasse definierten „border-bottom“ -Properties an.
width: 20px
style: solid
color: #e44d26
In der Ansicht „Live“ siehst du, welche Auswirkungen diese Properties auf den Balken zwischen den Navigationselementen und der Artikelüberschrift haben. Den entsprechenden CSS-Code siehst du in der Ansicht „Code“ (vgl. Abbildung 9). Diese Properties ergeben einen dunkelorangen Rahmen am unteren Rand des Header-Bereichs.
Das Element „header-container“ weist einen hellorangen Hintergrund auf, der in der vorher erwähnten CSS-Klasse nicht definiert war.
Suche im Bereich „Selektoren“ nach „.header-container, .footer-container, .main aside“. Falls nicht alles angezeigt wird, kannst du den Cursor über die Liste bewegen, um eine QuickInfo anzuzeigen (vgl. Abbildung 10).
Der folgende CSS-Code gibt die Auswahl im CSS Designer wieder.
In diesem Beispiel sind mehrere Selektoren aufgelistet, die eine Property teilen. Die Selektoren „header-container“, „footer-container“ und „aside“ (ein sogenannter „Nachfahren-Selektor“; später mehr dazu) weisen alle den hellorangen Hintergrund auf. In der Regel wird CSS-Code durch die Kombination von Elementen mit einer gemeinsamen Property in mehreren Selektoren effizienter und kann besser verwaltet werden.
ID-Selektoren suchen ein einzelnes HTML-Element auf der Seite und müssen eindeutig sein. Im CSS-Code werden ID-Selektoren mit einem Hash-Zeichen vor dem Selektornamen definiert. Anschließend weist du den Selektor einem HTML-Element zu, indem du das ID-Attribut und den CSS-Namen ohne Hash-Zeichen angibst. Beispiel:
Um dieses Element per CSS zu formatieren, kannst du beispielsweise folgenden ID-Selektor definieren:
Hinweis: Das Beispielprojekt enthält keine ID-Selektoren.
In der Regel verwendet man einen ID-Selektor zur Formatierung eines einzelnen Elements und einen Klassen-Selektor zur Anwendung derselben Formatierung auf mehrere Elemente. Der Artikel The Difference Between ID and Class erklärt den Unterschied zwischen ID- und Klassen-Selektoren ausführlicher.
Nachfahren- und Kind-Selektoren sind sehr ähnlich, haben jedoch einen wichtigen Unterschied. Um diesen Unterschied nachzuvollziehen, solltest du einen Nachfahren-Selektor in den Beispieldateien suchen.
Klicke unter „Selektoren“ auf „nav a“. Vergewissere dich, dass „Nur verwendete“ ausgewählt ist.
Vergleiche die Properties in CSS Designer mit dem CSS-Code, der in der Ansicht „Code“ definiert ist (vgl. Abbildung 11).
In der Ansicht „Code“ wird der zugehörige CSS-Code angezeigt:
Mit dem Selektor „nav a“ suchst du alle A -Elemente, die Nachfahren des NAV -Elements sind. Das DOM (Document Object Model) definiert die Struktur einer HTML-Seite als Baum aus Elementen. Innerhalb dieser Baumstruktur ist jedes HTML-Element, das in einem anderen HTML-Element enthalten ist, ein Nachfahre. Schaue dir die Zeilen 20 bis 26 im HTML-Code an:
Im obigen HTML-Abschnitt gibt es drei HTML-Elemente, die Nachfahren des NAV -Elements sind: „
Der Nachfahren-Selektor oben formatiert alle A -Elemente unterhalb des NAV -Elements, ungeachtet der Verschachtelungstiefe.
Im Gegensatz dazu wählt ein Kind-Selektor nur untergeordnete Elemente aus, also diejenigen auf der direkt darunterliegenden Ebene. Wenn im vorherigen Beispiel ein Kind-Selektor anstelle eines Nachfahren-Selektors verwendet wird, lautet der Code folgendermaßen:
Im obigen HTML-Code würde dieser Kind-Selektor auf kein Element angewendet, da sich keine A -Elemente auf der Ebene unter dem NAV -Element befinden. Das folgende Beispiel funktioniert jedoch:
Da sich das UL -Element direkt unterhalb des NAV -Elements und nicht innerhalb eines anderen Tags befindet, würde dieser Kind-Selektor auf dieses Element angewendet.
Du solltest die Verwendung von Nachfahren- und Kind-Selektoren möglichst vermeiden, da sie erwiesenermaßen die am wenigsten effizienten bzw. langsamsten Selektoren sind. Die übermäßige Verwendung von ineffizient definiertem CSS-Code kann die Darstellung deiner Seite im Browser verzögern. Wenn du mehr zu diesem Thema erfahren möchtest, lies Google Best Practices .
Das Sternchen ist ein universeller Selektor. Wenn er alleine verwendet wird, gibt er alle Elemente auf der Seite zurück. In der Beispielseite kommt der universelle Selektor nur einmal vor. Er betrifft das Druck-Stylesheet (print), das eine Media Query verwendet (vgl. Abbildung 12).
In diesem CSS-Beispiel werden die Hintergrundfarben entfernt und Schlagschatten zu jedem Element hinzugefügt. Außerdem wird die Schriftfarbe der betreffenden Elemente in Schwarz geändert, um ein besseres Druckergebnis zu erhalten.
Hinweis: Durch die Deklaration „!important“ erhält eine CSS-Anweisung eine höhere Priorität. Weitere Informationen zu dieser Deklaration erhältst du unter When Using !important is the Right Choice (Die richtige Verwendung von „!important“).
Du kannst den universellen Selektor auch als Nachfahren-Selektor definieren. Beispielsweise kannst du jedes Element innerhalb aller Elemente auswählen, für die die CSS-Klasse „main“ gilt:
Pseudoklassen sind spezielle Keywords, die du zu einem Selektor hinzufügen kannst, um den Status eines Elements anzugeben. Beispiel: Die Properties für den Selektor „a:hover“ werden in einem Element-Selektor (für das A -Tag) definiert, jedoch nur angewendet, wenn der Cursor über das Element bewegt wird (in diesem Fall einen Link).
Hier folgt das Beispiel aus dem Beispielprojekt zur Formatierung von Links (A -Tags) auf der Seite (vgl. Abbildung 13). Pseudoklassen werden meist zu diesem Zweck verwendet.
Prüfe den zugehörigen CSS-Code in der Ansicht „Code“.
Der erste Selektor sucht nach A -Tags in NAV -Elementen mit den Zuständen „hover“ und „visited“ („visited“ bedeutet, dass der Link bereits angeklickt wurde). Die Schriftfarbe wird in Weiß geändert und überschreibt damit alle vorhandenen Standardformatierungen für Links. Der zweite Selektor sucht A -Tags in NAV -Elementen mit dem Zustand „hover“ und formatiert sie mit einer Unterstreichung. Somit sind Links standardmäßig nicht unterstrichen, weisen das Merkmal aber auf, sobald der Cursor darüber bewegt wird.
Es gibt zahlreiche weitere Pseudoklassen außer „:hover“ und „:visited“. Auf der MDN-Website findest du eine umfassende Liste. Mit einigen Pseudoklassen kannst du ein bestimmtes Element aus einer Elementgruppe auswählen. Dazu ein Beispiel aus dem CSS-Code:
In diesem Fall geben Pseudoklassen ein bestimmtes Element in einer Elementliste an. Der erste Selektor sucht das erste LI -Element, das ein Kind des NAV -Elements ist, und wendet darauf einen linken Rand an. Der zweite Selektor wendet einen rechten Rand auf das letzte LI -Element an, das ein Kind von NAV ist.
Dieser Artikel behandelt viele häufig verwendete Selektoren – aber nicht alle. Nicht erläutert werden beispielsweise Geschwister-Selektoren, komplexe Selektoren mit regulären Ausdrücken oder die Verwendung von „not()“. Eine ausführliche Liste der Selektoren findest du unter The 30 CSS Selectors You Must Memorize (30 CSS-Selektoren, die du dir merken musst).
Mit Media Queries kannst du Layout-Merkmale für verschiedene Ausgabe- und Gerätetypen definieren, z. B. Smartphones, Tablets und Desktop-Computer. Dieser Abschnitt enthält eine kurze Einführung in Media Queries. Ausführlichere Erläuterungen findest du im Artikel Introduction to Media Queries .
Media Queries beginnen immer mit „@media“. Anschließend folgen Angaben zum Medientyp und zu den Medieneigenschaften. In der Praxis wirst du jedoch meistens nur eine dieser Angaben sehen.
Der erste Teil der Query besteht aus dem Medientyp . Es gibt viele verschiedene Medientypen. „Screen“ und „print“ werden aber am häufigsten verwendet. „Screen“ gilt für Computer-Bildschirme und „print“ für die Druckversion einer Web-Seite (damit wird die Ausgabe optimiert).
Hinweis: Media Queries kannst du im Bedienfeld „CSS Designer“ unter „@Medien“ hinzufügen.
Führe die folgenden Schritte durch, um die Media Query „print“ in diesem Projekt auszuwählen und die zugehörigen Properties in CSS Designer und in der Ansicht „Code“ zu prüfen.
Klicke im Bedienfeld „CSS Designer “ unter „@Medien“ auf „print“.
Klicke auf den universellen Selektor (*). Schaue dir die zugehörigen Properties an (vgl. Abbildung 14).
Klicke auf die anderen Selektoren für die Media Query „print“, um deren Properties anzuzeigen.
Im Folgenden siehst du ein Beispiel für eine Media Query, die in der Datei „main.css“ nur den Medientyp „print“ verwendet.
In der Media Query sind weitere CSS-Anweisungen definiert. In diesem Fall enthält die Anweisung einen universellen Selektor, der die Hintergrundfarben und Schatten der Elemente entfernt, um die Qualität der Druckausgabe zu verbessern. Es gibt zahlreiche Tricks, die du in Druck-Stylesheets zur Anzeige von Informationen verwenden kannst, die normalerweise auf der Druckseite verborgen blieben. In der CSS-Beispieldatei trifft das auf die URLs von Hyperlinks zu:
Der zweite Teil einer Media Query enthält Ausdrücke, die mindestens eine Medieneigenschaft definieren. Wenn ein Ausdruck mit „true“ ausgewertet wird, werden die Media Query und die darin enthaltenen CSS-Anweisungen angewendet. Medieneigenschaften können zahlreiche Properties umfassen, doch in der Praxis werden meistens Ausdrücke verwendet, die sich auf die Bildschirmgröße beziehen. Solche Media Queries bilden die Basis für Responsive Webdesign . Dabei wird per CSS das Seiten-Layout an verschiedene Bildschirmgrößen von Desktop-Computern, Tablets und Smartphones und anderen Geräten angepasst.
Im Folgenden siehst du einen Ausdruck aus der Datei „main.css“.
Diese Media Query besteht aus zwei Teilen: Medientyp und Medieneigenschaften. In normale Sprache übersetzt, würde diese Media Query lauten: „Nur Bildschirme, die breiter als 1140 Pixel sind.“ Das heißt, die Anweisung, die in der Media Query verschachtelt ist, greift weder beim Drucken noch bei kleineren Bildschirmen (z. B. Smartphones oder Tablets). Das Schlüsselwort „only“ verhindert, dass ältere Browser, die keine Media Queries mit Medieneigenschaften unterstützen (also nur die Medientypen „screen“ und „print“), die in der Media Query verschachtelten Formatierungen anwenden.
Dieser Abschnitt bietet eine Einführung in das Layouten und Positionieren mit CSS.
CSS Designer bietet eine visuelle Oberfläche zur Definition von Layout- und Positionsmerkmalen mit CSS. Die Anweisung für „nav a“ in der Datei „main.css“ veranschaulicht zum Beispiel das Ergebnis der Einstellungen für „margin“ (Rand) und „padding“ (Auffüllung) (vgl. Abbildung 15).
Weitere Informationen über Layout und Positionierung per CSS findest du im Tutorial zum Box Model .
Nachdem du nun die Grundlagen von CSS gelernt hast und weißt, wie du CSS-Code in Dreamweaver liest und bearbeitest, empfehlen wir weitere Ressourcen im Web, um dieses Wissen zu vertiefen.
Das Mozilla Developer Network (MDN) ist eine sehr gute allgemeine Ressource zum Thema Web-Entwicklung. Hier gibt es einen umfangreichen Bereich zu CSS . Im Beitrag CSS selectors von QuirksMode wird aufgeführt, wie Selektoren von verschiedenen Browsern unterstützt werden. How to Use CSS Pseudo-Classes (Verwendung von CSS-Pseudoklassen) und Learning to Use the :before and :after Pseudo-Elements in CSS (Verwendung der Pseudoelemente „:before“ und „:after“) enthalten weitere Details über die Verwendung von Pseudoklassen.
Beitrag von:
Brian Rinaldi