CSS: Aufrufe in CSS

In CSS gibt es verschiedene Aufrufe. Diese dienen meist dazu, Dinge ein zu gliedern oder besser zu bestimmen. In CSS Level 1 und Level 2 sind die folgenden Aufrufe beschrieben:

@import-Aufruf (CSS 1)

In CSS können mit Hilfe des @import-Aufrufes andere CSS-Definitionen (Module) in das aktuelle Dokument eingegliedert werden. Diese eingegliederten Definitionen können dann im aktuellen Dokument verwendet werden. Man notiert dazu @import mit der anschließenden Angabe einerURLunter der (weitere) CSS-Definitionen zu finden sind. Abschließend sollte ein Semikolon folgen. Beispiel:

@import url(http://www.name.de/name.css);
@import url(name.css);

Bitte beachten Sie, dass die @import-Aufrufe möglichst nur am Anfang des StyleSheets stehen und danach erst die weiteren Angaben folgen.

@import-Aufruf (CSS 2)

Mit CSS 2 wurde die Definition des @import-Aufrufes geringfügig verändert bzw. erweitert. Es ist nun möglich auch Dateien zu importieren, ohne die Schreibweise url(). Des Weiteren ist dazu gekommen, dass die URLs jetzt in Anführungszeichen stehen sollten. Beispiel:

@import "http://www.name.de/name.css"
/* ... ist gleichwertig zu ...*/
@import url("http://www.name.de/name.css")

Des Weiteren ist dazu gekommen, dass nun auch das Format des importierten StyleSheets notiert werden kann. Mit Format ist die Art des Ausgabemediums gemeint. So ist es z.B. möglich zu definieren, dass das eine importierte StyleSheet nur für den Ausdruck der Seite mit einem Drucker gedacht ist und dass wiederum ein anderes importiertes StyleSheet nur für die Ausgabe des Dokumentes auf einem Handheld-Computer verwendet wird.
Dazu können alle Angaben des Medientypes notiert werden (siehe @Media-Aufruf).

Beispiel:

@import url("pda.css") handheld;
@import "speak.css" aural;
@import "print.css" print;

Anmerkung: Wird diese Angabe des Medien-Types nicht notiert, so gilt automatisch all.

@charset-Aufruf

Mit dem @charset-Aufruf kann der verwendete/zu verwendende Zeichensatz des Dokumentes definiert werden. Hierbei wird einfach nach dem @charset-Aufruf der Zeichensatz als String/Text angegeben. Beispiel:

@charset "ISO-8859-1";

@font-face-Aufruf

Mit dem @font-face-Aufruf ist es möglich eigene Schriftarten zu definieren und zu importieren. Dazu werden nach dem @font-face-Aufruf geschweifte Klammern notiert. In diese Klamern fügt man dann die Angaben zur Schriftdefinition ein. Möglich sind dabei alle Angaben, die auch für die Schriftarten gemacht werden können. Näheres zu den Eigenschaften des @font-face-Aufrufes erfahren Sie im Kaptiel CSS - Schriftauswahl. Beispiel:

@font-face
{
src: url("http://www.name.de/name.eot");
font-family: 'Meine Schriftart';
}

/* ... diese kann dann wiederum verwendet werden ... */
P {font-family: 'Meine Schriftart';}

@media-Aufruf

Mit dem @media-Aufruf können bestimmte Style-Angaben nur für bestimmte Ausgabegeräte definiert werden. Dies ermöglicht, z.B. für den Ausdruck eines Dokuments, andere Formatierungen vorzunehmen als z.B. für die Bildschirm-Version. Dem Aufruf muss dabei der Medientype sowie geschweifte Klammern folgen. Die folgenden Mediatypen existieren:

all - Gilt für alle Ausgabegeräte.
aural - Gilt für aurale Ausgabegeräte (z.B. Sprach-Browser).
braille - Gilt für Blindenschrit-fähige Ausgabegeräte.
embossed - Gilt für Drucker, die Blindenschrift ausgeben können.
handheld - Gilt für Handheld-PC's (Palmtops, PDA's, etc. - allgemein Ausgabegeräte mit kleinem Display).
print - Gilt für Drucker.
projection - Gilt für projezierte Präsentationen (z.B. Projektoren, Polylux, etc.).
screen - Gilt allgemein für alle (Computer-)Bildschirme.
tty - Gilt für Ausgabegeräte mit feststehendem Symbolgitter/Schriftart ("fixed-pitch character grid") (z.B. Fernschreiber, terminals, Handys, etc.)
tv - Gilt für Fernseh-Bildschirme.

Beispiel:

@media print
{
BODY {color: white; background-color: black;}
/* ... */
}

@media screen
{
BODY {color: black; background-color: white;}
/* ... */
}

@page-Aufruf

Der @page-Aufruf beschreibt das Aussehen des Dokumentes wenn es mit Seitenumbrüchen dargestellt wird/werden muss. Mit ihm ist es möglich, den Anzeigebereich genau zu definieren. Dazu können hinter dem Aufruf, in geschweiften Klammern, die Angaben zu Höhe, Breite und Abstände (etc.) notiert werden. Näheres zum @page-Aufruf erfahren Sie im Kapitel CSS - Seitendefinition. Beispiel:

@page { size: 5in 6in; margin-left: 3cm; margin-top: 3cm; }

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Schriftdefinition

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project