HTML5-Handbuch - die neuen Features von HTML5

Abschnitt lernen Sie die Grammatik und Syntax von CSS näher kennen und auch anwenden.
13.2.1    CSS-Regeln (Rules)
    Regeln in CSS sind erkennbar an dem führenden
@
-Zeichen. Sie haben die Aufgabe, Rahmenbedingungen für die eigentlichen Formatdefinitionen zu schaffen. Eine Regel ist entweder eine einzelne Verarbeitungsanweisung, die mit einem Semikolon beendet wird – beispielsweise die
@import
-Regel zum Einbinden externer CSS-Dateien. Oder es handelt sich um einen Block, der eine Reihe von Formatdefinitionen einschließt – wie etwa die
@page
-Regel.
    @-Regeln sind in CSS nicht zwingend erforderlich. Viele Stylesheets kommen ganz ohne sie aus. Einige Regeln gewinnen jedoch zunehmend an Bedeutung. Besonders die
@media
-Regel eröffnet weitreichende Möglichkeiten für gezieltes Gestalten für unterschiedliche Ausgabemedien.
13.2.2    @import: CSS-Dateien einbinden
    Sie können externe Stylesheets mit Hilfe von URL-Adressen einbinden.
Beispiel, Teil 1: Inhalt eines style-Bereichs im HTML-Dokument
    @import url(../styles/css-reset.css);
    h1 {color: red;
    font-size: 28px;
    font-family: sans-serif;
    margin-top: 28px;
    margin-bottom: 14px;}
Beispiel, Teil 2: Inhalt der externen CSS-Datei css-reset.css
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
    blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins,
    kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
    ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
    tfoot, thead, tr, th, td, article, aside, figure, footer, header,
    hgroup, menu, nav, section, menu, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
Erläuterung
    Mit
@import url(url-der-datei.css)
oder
@import "url-der-datei.css"
binden Sie ein externes Stylesheet ein. Bei der Angabe der URL-Adresse gelten die gleichen Regeln und Möglichkeiten wie bei der Referenzierung von externen Ressourcen in HTML, wie sie in 2.1.5 Referenzierungbeschrieben sind.
    In einem
style
-Bereich können Sie problemlos
@import
-Regeln mit weiteren Formatdefinitionen mischen, so wie im ersten Teil des obigen Beispiels zu sehen. Wichtig zu wissen ist, dass Formatdefinitionen, die Sie im
style
-Bereich notieren, im Konfliktfall Vorrang vor den importierten Formatdefinitionen haben.
13.2.3    @charset: Zeichenkodierung für externe Stylesheets
    Diese Regel erzwingt eine bestimmte Zeichenkodierung für eine CSS-Datei. Wenn, dann sollte sie als erste Zeile einer separaten CSS-Datei notiert werden. Denn sie gilt für alle nachfolgenden Inhalte der Datei. Das Notieren einer
@charset
-Regel ist jedoch nur erforderlich, wenn in Wertzuweisungen an Formateigenschaften Zeichen vorkommen, die nicht im ASCII-Zeichensatz enthalten sind. Das Vokabular von CSS selbst und ebenso alle festen möglichen Eigenschaftswerte kommen nämlich mit dem ASCII-Zeichensatz aus und benötigen deshalb keine explizite Angabe zur Zeichenkodierung.
Beispiel
    @charset UTF-8;
    blockquote {
    font-family: Sütterlin, phantasy;
    }
Erläuterung
    Im Beispiel wird zunächst UTF-8 als Zeichenkodierung festgelegt. Eine solche Angabe ist in diesem Fall wichtig, da die font-family-Definition für das
blockquote
-Element im nachfolgenden Stylesheet-Inhalt ein »ü« in der Wertzuweisung enthält.
Wichtig:
    Die CSS-Datei muss auch tatsächlich mit der Zeichenkodierung abgespeichert werden, die bei
@charset
angegeben ist.
13.2.4    @media: Formate für bestimmte Ausgabegeräte (Media Queries)
    Die
@media
-Regel brauchen Sie dann, wenn Sie innerhalb eines Stylesheets Formate für unterschiedliche Ausgabemedien definieren. Eine
@media
-Regel ist dabei ein Block, der eine beliebige Menge an Formaten umschließt.
Beispiel
    @media screen {
    h1 {font-family: Arial, sans-serif;
      
font-size: 28px; }
     a {text-decoration: underline;}
    }
    @media screen and (max-width: 300px) {
    h1 {font-family: Arial, sans-serif;
      
 font-size: 14px;}
     a {text-decoration: none;
      
 font-style: italic;}
    }
Erläuterung
    Eine
@media
-Regel beginnt mit
@media
. Dahinter folgt eine Medienabfrage ( media query ). Im einfachsten Fall ist das wie im ersten der beiden
@media
-Blöcke im Beispiel einer der verfügbaren Medienausgabetypen wie
screen
,
print
,
speech
usw. Im Anschluss daran folgt ein Block, der durch die geschweiften Klammern
{
und
}
gestartet bzw. beendet wird. Innerhalb eines solchen Blocks können Sie beliebig viele