“@Symbol wird verwendet, um Regeln in CSS hinzuzufügen. Die Regeln durch die “hinzugefügt“@”Symbol werden als" das "genannt"bei Regeln”. Diese Regeln minimieren den Aufwand des Entwicklers auf unterschiedliche Weise. Die Operationen, die “bei RegelnImportieren Sie CSS-Eigenschaften direkt, ohne alle CSS-Eigenschaften in jeder Datei zu schreiben oder zu kopieren, die Eigenschaften auf bestimmte Medien anzuwenden und direkt das Herunterladen und Anwenden von Schriftarten auf den Webseite Inhalt anzuwenden.

Das Folgende ist der Hauptfach “bei Regeln”In CSS:

• Die @import -Regel
• Die @media -Regel
• Die @font-face-Regel

Lassen Sie uns kurz über jeden der drei diskutieren “bei RegelnUm zu verstehen, wie sie funktionieren.

Was ist die @import -Regel in CSS?

Der "@importieren„Regel in CSS wird verwendet, um ein CSS -Stilblatt aus einem anderen Stilblatt zu importieren. Wenn es ein CSS -Stilblatt gibt, das Eigenschaften oder Styling -Anweisungen für verschiedene Elemente einer Webseite enthält und das gleiche Styling in eine andere Web -Datei hinzufügt und nur schreibt ““@importieren”Mit dem Namen dieses Stylesblatts (das CSS -Eigenschaften enthält) auf der rechten Seite in beiden runden Klammern mit"URLOder in umgekehrten Kommas kann alle Eigenschaften aus diesem Stilblatt importieren und sie direkt auf das Stylesheet anwenden, in dem das „“@importierenRegel wurde hinzugefügt.

Syntax

Es sollte den Namen der CSS -Formatblattdatei für CSS -Formatierstile geben, die danach geschrieben wurde “@importieren”. Also die Syntax hinzuzufügen “@importieren”Regel in einem Stilblatt lautet wie folgt:

@Import "StylesheetName.CSS ";

Die Einfuhrregel kann auch als Folgendes für denselben Zweck geschrieben werden, wie sie auch dasselbe Ergebnis generiert:

@import URL (StylesheetName.CSS);

Was ist die @media -Regel in CSS?

Der "@MedienDie Regel wird verwendet, um der Webseite Medienanweisungen hinzuzufügen. Diese Regel funktioniert nach der Bedingung, die beim Hinzufügen dieser Regel angewendet wird. Die Bedingung wird direkt nach dem Hinzufügen hinzugefügt “@MedienAuf der rechten Seite und dann in der Regel in den Curly -Klammern befinden sich die Eigenschaften oder die Anweisungen, die implementiert werden müssen, wenn die Bedingung wahr ist.

Beispiel: Anwenden @Media -Regel anwenden

Um durch ein Beispiel zu verstehen, können wir der Webseite einige Inhalte hinzufügen:

Willkommen bei LinuxHint Tutorial!

Im obigen Code -Snippet wird eine Überschrift erstellt, um dies als Webseiteninhalt anzuzeigen.

Nehmen wir ein Beispiel für das Hinzufügen von Medienanweisungen, wenn die Dimensionen oder die Seitenbreite zunehmen oder abnehmen. Erstens schreiben “@Medien”Und dann den Zustand und dann in den lockigen Klammern die CSS -Eigenschaften definieren, die implementiert werden sollten, wenn die Bedingung mit"@Medien”Wird wahr:

@media (max-Width: 700px)
.meine Klasse
Farbe: Schwarz;
Hintergrund: grün;


@media (Min-Width: 700px) und (max-Width: 900px)
.meine Klasse
Farbe: Schwarz;
Hintergrund: Gelb;


@media (min-Width: 900px)
.meine Klasse
Farbe: Schwarz;
Hintergrund: Cyan;

Im obigen Code wurden verschiedene Größen der Breite als Bedingung für drei verschiedene Medienregeln zur entsprechenden Ausführung erwähnt. Zum Beispiel ändert sich die Hintergrundfarbe des Text.

Das Folgende ist das Ergebnis, das über den obigen Code generiert wird. Durch Ändern der Größe des Bildschirms wird die Hintergrundfarben des Textes geändert:

Was ist die @font-face-Regel in CSS?

Die Schriftregel ist eine einfache Methode, um die Webseite direkt Schriftstile hinzuzufügen. Die Schriftarten werden direkt heruntergeladen und über diese Regel auf den Text angewendet.

Beispiel: Anwenden @font-face-Regel anwenden

Verstehen wir die Methode, um die "hinzuzufügen"@Schriftart”Regeln Sie durch ein einfaches Beispiel:

Willkommen bei LinuxHint Tutorial!

Das obige Code -Snippet hat die gleiche Textüberschrift wie im vorherigen Abschnitt dieses Beitrags.

Lassen Sie uns das implementieren "@Schriftart"Regel für die"

Auf dem Weg, seine Schriftart zu ändern:

@Schriftart
Schriftfamilie: "Dejavu Sans";
SRC: URL ("./Schriftarten/Dejavusans.TTF ") Format (" TTF ");
Schriftgewicht: 500;

H1
Schriftfamilie: 'Dejavu Sans';
Schriftgewicht: 500;

Im obigen Code -Snippet gibt es den Namen der Schriftfamilie, die erforderlich ist und dann die “URLLink aus der Schriftart soll heruntergeladen werden und dann das Schriftgewicht. Wenn die Schriftart durch die angegeben wird “@Schriftart"Regel, der Name der Schriftart kann mit jedem Element verwendet werden, wie in diesem Code, das für die" verwendet wurde "H1" Überschrift.

Das Ausführen dieses Codes ändert die Schriftart gemäß den in der erwähnten Anweisungen “@Schriftart" Regel. Das Folgende ist die Ausgabe des obigen Codesnippets:

Dies fasst den Zweck des “zusammen“@Symbol in CSS.

Abschluss

Der "@"Symbol in CSS wird verwendet, um hinzuzufügen"bei Regeln”In CSS. Diese Regeln erledigen sehr nützliche Aufgaben, während sie CSS verwenden, um die Dokumente zu stylen. I.e. Sie importieren ganze Stilblätter aus einer anderen CSS -Datei über die “@importieren"Regel, wenden Sie CSS -Eigenschaften auf definierte Medien gemäß den Bedingungen an."@MedienRegel und laden Sie direkt Schriftarten herunter, um sie auf der Webseite über die zu verwenden@Schriftart" Regel.