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.

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

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.

Referenzinformationen

• @import-Regel

@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 vorkommen. 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.

@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 geschweifte Klammern { und } gestartet bzw. beendet wird. Innerhalb eines solchen Blocks können Sie beliebig viele CSS-Formate definieren. Alle Formate innerhalb des Blocks werden jedoch nur angewendet, wenn die HTML-Inhalte auf einem Ausgabegerät angezeigt werden, das der Medienabfrage entspricht. Das zweite obige @media-Beispiel zeigt eine gezieltere Medienabfrage. Der Block enthält nur Formate für Ausgabegeräte, deren Maximalbreite kleiner als 300 Pixel ist.

Medienabfragen seit CSS 2.0

Seit CSS 2.0 sind als Medienabragen folgende generische Typen von Ausgabegeräten möglich:

• all für alle Gerätetypen
• braille für Braille-Zeilen-basierte Ausgabegeräte für blinde Benutzer
• embossed für Braille-basierte Drucker
• handheld für Mobilfunkgeräte bzw. Smartphones mit kleinen Displays und limitierter Bandbreite
• print für Drucker
• projection für Overhead-Projektoren bzw. Leinwandpräsentation
• screen für alle bildschirmorientierten Ausgabegeräte
• speech für Sprachsynthesizer
• tty für ältere nicht-grafische Computerterminals ohne Möglichkeiten der Schriftformatierung
• tv für Fernsehgeräte und andere, bildschirmorientierte Wiedergabegeräte mit begrenzten Software-Ressourcen.

Mit @media projection können Sie also beispielsweise einen Stylesheet-Abschnitt schreiben, dessen Formatdefinitionen speziell für die öffentliche Präsentation auf einer Leinwand optimiert sind, und mit @media handheld können Sie Ihr Webseitenlayout für Mobiltelefone fit machen. Auch Stylesheet-Abschnitte mit @media print sind in der Praxis bereits bewährt, da die meisten Browser die so definierten Formate berücksichtigen, wenn Anwender Webseiten ausdrucken.
Kombinationen wie @media handheld, tv sind ebenfalls möglich.

Erweiterte Medienabfragen seit CSS 3.0

Mit CSS3 wird die Abfragelogik so stark erweitert, dass media queries der künftige Schlüssel für geräte-übergreifendes Webdesign werden. Das liegt an der Einführung von logischen Verknüpfern wie AND und an der Einführung von Medieneigenschaften wie device-max-width oder orientation. Hier noch einige Beispiele für die Möglichkeiten:

• @media screen and (min-width: 1000px) enthält Stylesheet-Angaben für bildschirmorientierte Ausgabegeräte, bei denen mindestens 1000 Pixel Breite im Anzeigefenster zur Verfügung stehen.
• @media (orientation: portrait) enthält Stylesheet-Angaben für Hochkant-Ausgabe (egal ob es sich um die Papierausrichtung beim Drucker handelt oder darum, wie herum ein Anwender ein modernes, die Orientierung anpassendes Smartphone in der Hand hält) — @media (orientation: landscape) ist das Gegenteil und bezieht sich auf Querkant-Ausgabe.
• @media not screen and (color) enthält Stylesheet-Angaben für Ausgabegeräte, die nicht bildschirmbasiert sind, aber Farbe darstellen können (z.B. Farbdrucker).
• @media screen (device-aspect-ratio: 16/9) enthält Stylesheet-Angaben für Bildschirme mit dem HD/Full-HD-Seitenformat 16:9.
• @media not handheld and screen and (max-weight: 3kg) enthält Stylesheet-Angaben für Notebooks und Netbooks.

Insgesamt stellt CSS3 folgende Medieneigenschaften zum Einbauen in Medienabfragen zur Verfügung:

• min-width bzw. max-width zur Abfrage der tatsächlich verfügbaren Darstellungsbreite (z.B. Browserfenstergröße),
• min-height bzw. max-height für das Gleiche in Bezug auf die Darstellungshöhe,
• device-min-width bzw. device-max-width zur Abfrage der physisch möglichen Darstellungsbreite (z.B. die Breite eines Displays),
• device-min-height bzw. device-max-height für das Gleiche in Bezug auf die Darstellungshöhe,
• orientation für die Abfrage, ob hochkant oder querkant,
• aspect-ratio für die Abfrage des tatsächlichen Seitenverhältnisses (z.B. des aktuellen Browserfensters),
• device-aspect-ratio für die Abfrage des physisch möglichen Seitenverhältnisses (z.B. des Bildschirms)
• color zur Abfrage, ob das Gerät farbige Ausgaben erlaubt,
• color-index zur Abfrage, ob das Gerät eine Tabelle mit indizierten Farben verwendet, wobei mit einer Abfrage wie (min-color-index: 256) auch die Mindestanzahl der Farben der Farbtabelle abgefragt werden kann,
• monochrome zur Abfrage, ob das Gerät nur einfarbige Ausgaben erlaubt,
• resolution zur Abfrage von dpi-Werten des Ausgabegeräts, in einer Form wie (min-resolution: 300dpi),
• scan zur Abfrage, ob TV-orientierte Geräte progressive oder interlaced arbeiten,
• grid zur Abfrage, ob ein Ausgabegerät nicht-grafisch ist, also etwa ältere Computerterminals oder Mobiltelefone mit textbasiertem Display.

Referenzinformationen

• @media-Regel

@page: Formate für Print-Layouts

Die @page-Regel erlaubt das Definieren von Seitenformaten für Ausdrucke auf Papier. Verwendet werden dabei gewöhnliche CSS-Eigenschaften. Die Besonderheit besteht darin, dass die Formatdefinitionen sich nicht auf HTML-Elemente beziehen, sondern auf ein Blatt Papier.

Beispiel

@page {
   size: 21cm 29.7cm;
   margin-top: 2cm;
   margin-bottom: 3cm;
}
@page :left {
   margin-left: 2cm;
   margin-right: 3cm;
}
@page :right {
   margin-left: 3cm;
   margin-right: 2cm;
}

Erläuterung

Die @page-Regel bildet ähnlich wie die @media-Regel einen Block, der durch geschweifte Klammern { und } markiert wird. Innerhalb davon können Sie Formate für die Seite definieren. Eine spezifische CSS-Eigenschaft dafür ist size (size = Größe). Entweder weisen Sie dieser Eigenschaft als Wert wie im Beispiel oben zwei Angaben zu, wobei die erste als Breite und die zweite als Höhe interpretiert wird. Oder Sie notieren eines der beiden Schlüsselwörter portrait (für Hochformat) oder landscape (für Querformat).

Eine weitere Besonderheit ist die Möglichkeit, mittels @page: left und @page: right unterschiedliche Formate für linke und rechte Seiten zu definieren. Das ist dann von Bedeutung, wenn die Druckseiten zu einem Heft gebunden werden sollen. Im obigen Beispiel werden unterschiedliche Werte für margin-left (Rand links) und margin-right (Rand rechts) notiert, um so einen Heftrand für linke und rechte Seiten zu lassen.

Referenzinformationen

• @page-Regel

@font-face: Formatbereich für Web-Schriftarten

Die @font-face-Regel dient zum Definieren von Schriftarten, deren Ressourcen auf dem Webserver hinterlegt werden. Diese sogenannten Web-Schritfarten werden bei Bedarf zusammen mit dem HTML-Code einer Webseite, Grafiken, CSS- und JavaScript-Dateien und anderen Ressourcen beim Aufruf der Webseite zum Browser übertragen. Schriftarten, die mit der @font-face-Regel definiert wurden, können Sie im weiteren Verlauf des Stylesheets genauso wie andere Schriftarten angeben.

Beispiel

@font-face {
  font-family: Mido;
  src: url('/sources/fonts/Mido.otf');
}
h1 {
   font-family: Mido;
   font-size: 180%;
}
p {
   font-family: Liberation Sans, Arial, Helvetica, sans-serif;
   font-size: 90%;
}

Erläuterung

Die @font-face-Regel bildet einen Block, innerhalb dessen Sie eine server-seitige Schriftart definieren können. Die Definition selbst besteht aus zwei Teilen.

Mit font-family: Schriftartenname; wird der Name definiert, unter dem die Schriftart im weiteren Stylesheet-Verlauf verwendet werden kann, etwa in der Eigenschaft font-family.

Mit src: url(URL-Adresse-der-Schriftartendatei); referenzieren Sie die zugehörige, auf dem Server-Rechner abgelegte Schriftartendatei. Bei der URL-Adresse gelten ebenso wie bei der @import-Regel alle Aussagen der Referenzierung in HTML.

Das obige Beispiel zeigt, wie die mit @font-face definierte Server-Schriftart im weiteren Verlauf des Stylesheets ganz normal verwendet wird. Während für das h1-Element im Beispiel die server-seitige Schriftart bereit steht, wird bei der Schriftartenangabe zum p-Element darauf vertraut, dass eine der aufgezählten Schriftarten beim Anwender verfügbar ist.

• @font-face-Regel

Grundsätzliche Grammatik von CSS < | > Selektoren

 

---

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.