CSS - @ Regeln
In diesem Kapitel werden die folgenden wichtigen @ -Regeln behandelt:
Das @import: Regel importiert ein anderes Stylesheet in das aktuelle Stylesheet.
Das @charset Regel gibt den Zeichensatz an, den das Stylesheet verwendet.
Das @font-face Regel wird verwendet, um eine Schriftart zur Verwendung in einem Dokument ausführlich zu beschreiben.
Das !important Regel gibt an, dass eine benutzerdefinierte Regel Vorrang vor den Stylesheets des Autors haben sollte.
NOTE - Es gibt andere @ -Regeln, die wir in den folgenden Kapiteln behandeln werden.
Die @ import-Regel
Mit der @ import-Regel können Sie Stile aus einem anderen Stylesheet importieren. Es sollte direkt am Anfang des Stylesheets vor einer der Regeln angezeigt werden und sein Wert ist eine URL.
Es kann auf eine der beiden folgenden Arten geschrieben werden:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>Die Bedeutung der @ import-Regel besteht darin, dass Sie Ihre Stylesheets mit einem modularen Ansatz entwickeln können. Sie können verschiedene Stylesheets erstellen und diese dann überall dort einfügen, wo Sie sie benötigen.
Die @ charset-Regel
Wenn Sie Ihr Dokument mit einem anderen Zeichensatz als ASCII oder ISO-8859-1 schreiben, möchten Sie möglicherweise die @ charset-Regel oben in Ihrem Stylesheet festlegen, um anzugeben, in welchen Zeichensatz das Stylesheet geschrieben ist.
Die @ charset-Regel muss direkt am Anfang des Stylesheets ohne Leerzeichen geschrieben werden. Der Wert wird in Anführungszeichen gesetzt und sollte einer der Standardzeichensätze sein. Zum Beispiel -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>Die @ font-face-Regel
Die @ font-face-Regel wird verwendet, um eine Schriftart zur Verwendung in einem Dokument ausführlich zu beschreiben. @ font-face kann auch verwendet werden, um den Speicherort einer Schriftart zum Herunterladen zu definieren, obwohl dies möglicherweise auf implementierungsspezifische Grenzen stößt.
Im Allgemeinen ist @ font-face äußerst kompliziert und seine Verwendung wird nur für diejenigen empfohlen, die sich mit Schriftmetriken auskennen.
Hier ist ein Beispiel -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>Die! Wichtige Regel
Cascading Style Sheets Kaskade. Dies bedeutet, dass die Stile in derselben Reihenfolge angewendet werden, in der sie vom Browser gelesen werden. Der erste Stil wird angewendet und dann der zweite und so weiter.
Die! Wichtige Regel bietet eine Möglichkeit, Ihre CSS-Kaskade zu erstellen. Es enthält auch die Regeln, die immer anzuwenden sind. Eine Regel mit einer! Wichtigen Eigenschaft wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.
Im folgenden Stylesheet ist der Absatztext beispielsweise schwarz, obwohl die erste angewendete Stileigenschaft rot ist:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Wenn Sie also sicherstellen möchten, dass eine Eigenschaft immer angewendet wird, fügen Sie dem Tag die Eigenschaft! Important hinzu. Um den Absatztext immer rot zu machen, sollten Sie ihn wie folgt schreiben:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Hier haben Sie p {color: # ff0000! Wichtig gemacht; } obligatorisch, jetzt gilt diese Regel immer, auch wenn Sie eine andere Regel definiert haben. p {color: # 000000; }}
Es wird das folgende Ergebnis erzeugt -