|
Inhaltsverzeichnis
|
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.
Sie können externe Stylesheets mit Hilfe von URL-Adressen einbinden.
@import url(../styles/css-reset.css); h1 { color: red; font-size: 28px; font-family: sans-serif; margin-top: 28px; margin-bottom: 14px; }
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; }
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.
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.
@charset UTF-8; blockquote { font-family: Sütterlin, phantasy; }
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.
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.
@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; } }
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.
Seit CSS 2.0 sind als Medienabragen folgende generische Typen von Ausgabegeräten möglich:
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.
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:
Insgesamt stellt CSS3 folgende Medieneigenschaften zum Einbauen in Medienabfragen zur Verfügung:
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.
@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; }
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.
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.
@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%; }
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.
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.