Lernen Sie die Grundlagen zu CSS (Cascading Style Sheets), und erfahren Sie, welche Werkzeuge Dreamweaver zur Formatierung von Web-Seiten mit CSS bietet.
what-is-css_1408x792

Dreamweaver macht die Arbeit mit CSS leicht. Trotzdem sollten Web-Designer mit CSS grundlegend vertraut sein, damit sie die entsprechenden Funktionen in Dreamweaver effektiv einsetzen können. In diesem Tutorial lernen Sie die Grundlagen von CSS und erfahren, wie Sie mit den Formatierungsfunktionen von CSS Designer in Dreamweaver gültigen CSS-Code erstellen.

Beispielprojekt einrichten

Dieses Tutorial verwendet eine vorkonfigurierte Seite von Initializr. Initializr ist eine Website, mit der Sie eine Basisversion Ihres Webdesign-Projekts generieren können. Diese Basisversion umfasst HTML-, CSS- und JavaScript-Dateien inklusive Inhalten, Formatierung und Navigationselementen.

  1. Rufen Sie initializr.com in einem Webbrowser auf, um ein HTML5-Initializr-Projekt anzulegen.
  2. Klicken Sie auf die Schaltfläche „Responsive“, wählen Sie „Mobile-first Responsive“ und „Modernizr“, und deaktivieren Sie 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.

Abbildung 1: Optionen für die Erstellung des Initializr-Projekts
Abbildung 1: Optionen für die Erstellung des Initializr-Projekts
  1. Laden Sie die ZIP-Datei herunter, und entpacken Sie die enthaltenen Dateien in einem Ordner auf Ihrem Computer.
  2. Starten Sie Dreamweaver.
  3. Öffnen Sie die Datei „index.html“.

Hinweis: Dieses Tutorial wurde mit einer älteren Version von Dreamweaver erstellt. Öffnen Sie den Creative Cloud-Client, und prüfen Sie den Status Ihrer Dreamweaver-Installation. Wenn Sie die aktuelle Version installiert haben, steht auf der Registerkarte „Apps“ beim Produktnamen „Aktuell“ (vgl. Abbildung 2).

Abbildung 2: Indikator „Aktuell“ im Creative Cloud-Client
Abbildung 2: Indikator „Aktuell“ im Creative Cloud-Client
  1. Wählen Sie die Ansicht „Teilen“ und aktivieren Sie die Live-Ansicht, um gleichzeitig eine Vorschau Ihrer Änderungen und den Quell-Code anzeigen zu können.
  2. Hinweis: Während des gesamten Tutorials sollten Sie immer die Teilen-Ansicht mit aktivierter Live-Ansicht verwenden und in der Dokumentleiste „main.css“ ausgewählt haben (vgl. Abbildung 3). So können Sie gleich sehen, wie Einstellungen im Bedienfeld „CSS Designer“ in gültigen CSS-Code in der Code-Ansicht übersetzt werden.

Abbildung 3: Teilen-Ansicht mit aktivierter Live-Ansicht und ausgewählter Datei „main.css“ in der Dokumentleiste
Abbildung 3: Teilen-Ansicht mit aktivierter Live-Ansicht und ausgewählter Datei „main.css“ in der Dokumentleiste

CSS-Grundlagen

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-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. Designer und Entwickler 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 Sie im CSS-Code das Look-and-Feel einer Seite ändern, spielt die Reihenfolge, in der die Elemente im HTML-Code aufgeführt werden, keine Rolle. Sie können die Formatierung oder Darstellung auch nach bestimmten Faktoren wie Größe oder Ausrichtung des Bildschirms anpassen.

CSS Designer in Dreamweaver

Das Dreamweaver-Werkzeug „CSS Designer“ bietet Ihnen eine visuelle Oberfläche zum Hinzufügen, Bearbeiten und Entfernen von Formatierungen innerhalb Ihrer 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 legen Sie zum Beispiel innerhalb des Header-Bereichs einen <style>-Block an oder definieren die Formatierung innerhalb einzelner Tags. Empfohlen wird jedoch die Verwendung eines externen Stylesheets. Damit lassen sich Formatierungsanweisungen leichter wiederverwenden.

Führen Sie die folgenden Schritte durch, um Layout und Position von CSS Designer anzupassen und einige grundlegende Funktionen des Werkzeugs kennenzulernen.

  1. Um das Bedienfeld „CSS Designer“ vollständig anzuzeigen, öffnen Sie das Dropdown-Menü rechts oben, und ändern Sie die Ansicht von „Kompakt“ in „Erweitert“ (vgl. Abbildung 4).
  2. Hinweis: Minimieren oder schließen Sie das Bedienfeld „Dateien“, um mehr Platz für CSS Designer zu schaffen.

Abbildung 4: CSS Designer im erweiterten Arbeitsbereich
Abbildung 4: CSS Designer im erweiterten Arbeitsbereich
  1. Mit CSS Designer können Sie eine neue CSS-Datei erstellen oder eine vorhandene Datei verknüpfen. Klicken Sie auf das Pluszeichen im Bedienfeld „Quellen“, um die Optionen für die Zuordnung eines Stylesheets zu einer Web-Seite anzuzeigen. Drücken Sie die Esc-Taste, um die Optionen wieder auszublenden.
  2. Das Beispieldokument umfasst zwei externe CSS-Dateien: „normalize.min.css“ und „main.css“ (vgl. Abbildung 5).

Abbildung 5: Optionen für die Zuordnung einer CSS-Quelle zu einer Web-Seite
Abbildung 5: Optionen für die Zuordnung einer CSS-Quelle zu einer Web-Seite
  1. Klicken Sie auf „main.css“. Im Bereich „Selektoren“ werden die im Stylesheet definierten Selektoren angezeigt.

Bedeutung von „Cascading“

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.

Standardmerkmale für die Schrift festlegen

Um die CSS-Kaskade zu veranschaulichen, legen Sie jetzt Standardeinstellungen für Schrift, Schriftgröße und Schriftfarbe im gesamten Dokument fest. Theoretisch können Sie 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 Ihnen die Möglichkeit, Standard-Textstile für die gesamte HTML-Seite oder den Haupttext festzulegen. Alle Textelemente auf der Seite übernehmen diese Stile, sofern Sie sie nicht individuell anpassen.

  1. Klicken Sie im Bedienfeld „CSS Designer“ unter „Quellen“ auf „main.css“.

  2. Klicken Sie in der Selektorenliste auf „html, button, input, select, textarea“.

  3. Klicken Sie im Bedienfeld „Eigenschaften“ auf das Textsymbol (T). Als Textfarbe ist momentan #222 (Schwarzgrau) festgelegt.
  4. Die Property „color“ ist für ein Element höchster Ebene definiert (in diesem Fall „html“). Sie gilt („kaskadiert“) daher für die meisten Elemente, die darin verschachtelt sind.

  5. Klicken Sie auf den Farbwähler, und wählen Sie eine neue Farbe aus (vgl. Abbildung 6).
  6. Daraufhin ändert sich die Farbe der Absätze und Absatzüberschriften, denn die Eigenschaft „color“ wird vom HTML-Element kaskadierend auf alle darin enthaltenen Elemente übertragen. Die weiße Schriftarbe im Header-Bereich bleibt dagegen, weil für diese Elemente eine eigene Farbe definiert ist, die Vorrang vor der Farbe hat, die vom HTML-Tag „geerbt“ wird.

Abbildung 6: Farbänderung des HTML-Elements, die auf die darin enthaltenen Elemente übertragen wird
Abbildung 6: Farbänderung des HTML-Elements, die auf die darin enthaltenen Elemente übertragen wird
  1. Setzen Sie die Farbe zurück auf #222.

CSS-Properties in mehreren Quellen definieren

Das Kaskadenprinzip funktioniert auch, wenn innerhalb einer oder mehrerer CSS-Dateien mehrere Anweisungen für ein Element definiert sind. Legen Sie beispielsweise in der Datei „main.css“ für „paragraph“-Elemente die Farbe Blau fest:

p {color: blue;}

Setzen Sie dann in der Datei „normalize.min.css“ die Schriftgröße in Absätzen auf 10 Pixel:

p {font-size:10px;}

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 Sie über die CSS-Spezifität wissen sollten) enthält ausführlichere Informationen zu den Regeln der CSS-Kaskade, z. B. die Verarbeitung von widersprüchlichen CSS-Anweisungen.

Selektoren verwenden

Wie der Name schon andeutet, können Sie 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-Selektor (Typ)

Element- oder Typ-Selektoren suchen alle HTML-Elemente des angegebenen Typs im Dokument. Um die Funktionsweise eines Selektors nachzuvollziehen, werden Sie nun in Dreamweaver einen Element-Selektor für HR-Tags („horizontal rule“; damit wird in HTML5 ein Themenwechsel visualisiert) bearbeiten.

  1. Fügen Sie ein <hr>-Tag zur Datei „index.html“ hinzu. Wählen Sie die Teilen-Ansicht, und geben Sie unterhalb des „header“-Abschnitts in Zeile 38 <hr> ein. Das vorhandene Stylesheet enthält eine Anweisung, die HR-Elemente als 1 Pixel hohe graue Linie anzeigt.

  2. Wählen Sie im Bedienfeld „CSS Designer“ unter „Quellen“ die Datei „main.css“ aus, und suchen Sie den Selektor „hr“ (verwenden Sie das Suchfeld, um die Liste der Ergebnisse einzugrenzen).

  3. Klicken Sie 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;
  1. Scrollen Sie im Bedienfeld „Eigenschaften“ zum Abschnitt „Rahmen“, und bearbeiten Sie den oberen Rahmen. Klicken Sie dazu auf den Selektor „color“. Verwenden Sie das Pipetten-Werkzeug zur Auswahl der hellorangen Farbe im Header-Bereich (vgl. Abbildung 7).
Abbildung 7: Einrichtung der Farbe des oberen Rahmens
Abbildung 7: Einrichtung der Farbe des oberen Rahmens

Klicken Sie in der Dokumentleiste auf „main.css“, und zeigen Sie die Vorschau in der Live-Ansicht an. In der Teilen-Ansicht sehen Sie, dass die Farbe der <hr>-Elemente in orange geändert wurde (vgl. Abbildung 8).

Abbildung 8: Aktualisierte Seite mit orangen <hr>-Elementen
Abbildung 8: Aktualisierte Seite mit orangen <hr>-Elementen

Der in der Code-Ansicht angezeigte CSS-Code entspricht der Anweisung, die Sie in CSS Designer geändert haben:

hr { 	
   display: block; 	
   height: 1px; 	
   border-left: 0; 	
   border-right: 0; 	
   border-bottom: 0; 	
   border-top: 1px solid #EC6433; 	
   margin: 1em 0; 	
   padding: 0; 
}

Klassen-Selektor

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 weisen Sie die Klasse einem HTML-Element anhand des Attributs „class“ und des Namens der CSS-Klasse ohne den Punkt zu.

CSS-Klasse

.intro {
   color: #ccc;
   font-size: 10px;
}

HTML-Tag

<p class="intro">

Führen Sie folgende Schritte durch, um einen der Klassen-Selektoren im Beispielprojekt zu prüfen.

  1. Klicken Sie auf die Klasse „.header-container“ im Bereich „Selektoren“ von CSS Designer.

  2. Prüfen Sie, ob „Nur verwendete“ ausgewählt wurde, und sehen Sie sich die drei für diese Klasse definierten „border-bottom“-Eigenschaften an.
    • width: 20px
    • style: solid
    • color: #e44d26
  1. In der Live-Ansicht sehen Sie, welche Auswirkungen diese Eigenschaften auf den Balken zwischen den Navigationselementen und der Artikelüberschrift haben. Den entsprechenden CSS-Code sehen Sie in der Code-Ansicht (vgl. Abbildung 9). Diese Eigenschaften ergeben einen dunkelorangen Rahmen am unteren Rand des Header-Bereichs.
.header-container {
    border-bottom: 20px solid #e44d26;
}
Abbildung 9: Code-Ansicht mit CSS-Code für das mit CSS Designer formatierte Element „header-container“
Abbildung 9: Code-Ansicht mit CSS-Code für das mit CSS Designer formatierte Element „header-container“
  1. Das Element „header-container“ weist einen hellorangen Hintergrund auf, der in der vorher erwähnten CSS-Klasse nicht definiert war.

  2. Suchen Sie im Bereich „Selektoren“ nach „.header-container, .footer-container, .main aside“. Falls nicht alles angezeigt wird, können Sie den Cursor über die Liste bewegen, um eine QuickInfo anzuzeigen (vgl. Abbildung 10).
Abbildung 10: QuickInfo mit vollständigem Selektornamen
Abbildung 10: QuickInfo mit vollständigem Selektornamen

Der folgende CSS-Code gibt die Auswahl im CSS Designer wieder.

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

In diesem Beispiel sind mehrere Selektoren aufgelistet, die eine Eigenschaft 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 Eigenschaft in mehreren Selektoren effizienter und kann besser verwaltet werden.

ID-Selektor

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 weisen Sie den Selektor einem HTML-Element zu, indem Sie das ID-Attribut und den CSS-Namen ohne Hash-Zeichen angeben. Beispiel:

<div id="main"></div>

Um dieses Element per CSS zu formatieren, könnten Sie beispielsweise folgenden ID-Selektor definieren:

#main {
    background: #f16529;
}

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

Nachfahren- und Kind-Selektoren sind sehr ähnlich, haben jedoch einen wichtigen Unterschied. Um diesen Unterschied nachzuvollziehen, sollten Sie einen Nachfahren-Selektor in den Beispieldateien suchen.

  1. Klicken Sie unter „Selektoren“ auf „nav a“, und vergewissern Sie sich, dass „Nur verwendete“ ausgewählt ist.

  2. Vergleichen Sie die Properties in CSS Designer mit dem CSS-Code, der in der Code-Ansicht definiert ist (vgl. Abbildung 11).
Abbildung 11: CSS-Properties für Navigationselemente
Abbildung 11: CSS-Properties für Navigationselemente

In der Code-Ansicht wird der zugehörige CSS-Code angezeigt:

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

Mit dem Selektor „nav a“ suchen Sie 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. Schauen Sie sich die Zeilen 20 bis 26 im HTML-Code an:

<nav>
    <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
    </ul>
</nav>

Im obigen HTML-Abschnitt gibt es drei HTML-Elemente, die Nachfahren des <nav>-Elements sind: <ul>, <li> und <a>.

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:

nav > a {
    ...
}

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:

nav > ul {
    ...
}

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.

Sie sollten 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 Ihrer Seite im Browser verzögern. Wenn Sie mehr zu diesem Thema erfahren möchten, lesen Sie Google Best Practices.

*-Selektor

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).

Abbildung 12: Universal-Selektor im Beispielprojekt
Abbildung 12: Universal-Selektor im Beispielprojekt

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.

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
 }

Hinweis: Durch die Deklaration „!important“ erhält eine CSS-Anweisung eine höhere Priorität. Weitere Informationen zu dieser Deklaration erhalten Sie unter When Using !important is the Right Choice (Die richtige Verwendung von „!important“).

Sie können den universellen Selektor auch als Nachfahren-Selektor definieren. Beispielsweise können Sie jedes Element innerhalb aller Elemente auswählen, für die die CSS-Klasse „main“ gilt:

.main * {
    ...
}

Pseudoklassen und Pseudoelemente

Pseudoklassen sind spezielle Keywords, die Sie zu einem Selektor hinzufügen können, 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.

Abbildung 13: Properties einer Pseudoklasse in CSS Designer
Abbildung 13: Properties einer Pseudoklasse in CSS Designer

Prüfen Sie den zugehörigen CSS-Code in der Code-Ansicht.

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

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 finden Sie eine umfassende Liste. Mit einigen Pseudoklassen können Sie ein bestimmtes Element aus einer Elementgruppe auswählen. Dazu ein Beispiel aus dem CSS-Code:

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

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.

Weitere Selektoren

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 finden Sie unter The 30 CSS Selectors You Must Memorize (30 CSS-Selektoren, die Sie sich merken müssen).

Einführung in Media Queries

Mit Media Queries können Sie 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 finden Sie 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 werden Sie 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 können Sie im Bedienfeld „CSS Designer“ unter „@Medien“ hinzufügen.

Führen Sie 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 Code-Ansicht zu prüfen.

  1. Klicken Sie im Bedienfeld „CSS Designer “ unter „@Medien“ auf „print“.
  2. Klicken Sie auf den universellen Selektor (*), und sehen Sie sich die zugehörigen Properties an (vgl. Abbildung 14).
Abbildung 14: Media Query in CSS Designer
Abbildung 14: Media Query in CSS Designer
  1. Klicken Sie auf die anderen Selektoren für die Media Query „print“, um deren Eigenschaften anzuzeigen.

Im Folgenden sehen Sie ein Beispiel für eine Media Query, die in der Datei „main.css“ nur den Medientyp „print“ verwendet.

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

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 Sie in Druck-Stylesheets zur Anzeige von Informationen verwenden können, die normalerweise auf der Druckseite verborgen blieben. In der CSS-Beispieldatei trifft das auf die URLs von Hyperlinks zu:

a[href]:after {
    content: " (" attr(href) ")";
}

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 sehen Sie einen Ausdruck aus der Datei „main.css“.

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

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.

Layout und Positionierung per CSS

Dieser Abschnitt bietet eine Einführung in das Layouten und Positionieren mit CSS. Der Artikel Learn CSS Layout behandelt die Grundlagen zu Layout und Positionierung 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).

Abbildung 15: Einstellungen für Ränder und Auffüllungen in CSS Designer
Abbildung 15: Einstellungen für Ränder und Auffüllungen in CSS Designer

Weitere Informationen über Layout und Positionierung per CSS erhalten Sie im Tutorial zum Box Model.

Nächste Schritte

Nachdem Sie nun die Grundlagen von CSS gelernt haben und wissen, wie Sie CSS-Code in Dreamweaver lesen und bearbeiten, 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.

07/07/2018
Brian Rinaldi
War diese Seite hilfreich?