Die folgenden sind die wichtigsten „ bei Regeln “ im CSS:
Lassen Sie uns kurz auf jeden der drei „ bei Regeln “, um zu verstehen, wie sie funktionieren.
Was ist die @import-Regel in CSS?
Der ' @importieren ”-Regel in CSS wird verwendet, um ein CSS-Stylesheet aus einem anderen Stylesheet zu importieren. Wenn es ein CSS-Stylesheet gibt, das Eigenschaften oder Gestaltungsanweisungen für verschiedene Elemente einer Webseite enthält, und es erforderlich ist, dieselbe Gestaltung in eine andere Webseitendatei einzufügen, schreiben Sie nur „ @importieren “ mit dem Namen dieses Stylesheets (das CSS-Eigenschaften enthält) auf der rechten Seite in runden Klammern mit „ URL “ oder in Anführungszeichen können alle Eigenschaften aus diesem Stylesheet importieren und direkt auf das Stylesheet anwenden, in dem „ @importieren “ Regel wurde hinzugefügt.
Syntax
Der Name der CSS-formatierten Stylesheet-Datei sollte nach „ @importieren “. Die Syntax zum Hinzufügen von „ @importieren ” Die Regel in einem Stylesheet lautet wie folgt:
@importieren 'stylesheetname.css' ;
Die Importregel kann für den gleichen Zweck auch wie folgt geschrieben werden, da sie auch das gleiche Ergebnis erzeugt:
@importieren URL ( stylesheetname.css ) ;Was ist die @media-Regel in CSS?
Der ' @Medien ” Die Regel wird verwendet, um der Webseite Medienanweisungen hinzuzufügen. Diese Regel funktioniert gemäß der beim Hinzufügen dieser Regel angewendeten Bedingung. Die Bedingung wird direkt nach dem Hinzufügen von „ @Medien “ auf der rechten Seite und dann innerhalb der Regel in den geschweiften Klammern sind die Eigenschaften oder die Anweisungen, die implementiert werden müssen, wenn die Bedingung wahr ist.
Beispiel: Anwenden der @media-Regel
Um es anhand eines Beispiels zu verstehen, können wir der Webseite einige Inhalte hinzufügen:
< div Klasse = 'meine Klasse' >< h1 > Willkommen beim LinuxHint-Tutorial! < / h1 >
< / div >
Im obigen Code-Snippet wurde eine Überschrift erstellt, um dies als Inhalt der Webseite anzuzeigen.
Nehmen wir ein Beispiel für das Hinzufügen von Medienanweisungen, wenn die Abmessungen oder die Seitenbreite größer oder kleiner werden. Schreiben Sie zuerst „ @Medien “ und fügen Sie dann die Bedingung hinzu und definieren Sie dann in den geschweiften Klammern die CSS-Eigenschaften, die implementiert werden sollen, wenn die Bedingung mit „ @Medien “ wird wahr:
@Medien ( maximale Breite : 700px ) {.meine Klasse {
Farbe : Schwarz ;
Hintergrund : Grün ;
}
}
@Medien ( Mindestbreite : 700px ) Und ( maximale Breite : 900px ) {
.meine Klasse {
Farbe : Schwarz ;
Hintergrund : Gelb ;
}
}
@Medien ( Mindestbreite : 900px ) {
.meine Klasse {
Farbe : Schwarz ;
Hintergrund : cyan ;
}
}
Im obigen Code wurden unterschiedliche Breitengrößen als Bedingung für die entsprechende Ausführung von drei unterschiedlichen Medienregeln erwähnt. Wenn beispielsweise gemäß dem obigen Code die Mindestbreite 700 Pixel beträgt, ändert sich die Hintergrundfarbe des Textes in Gelb.
Das Folgende ist das Ergebnis, das durch den obigen Code generiert wird. Wenn Sie die Größe des Bildschirms ändern, ändern sich die Hintergrundfarben des Textes:
Was ist die @font-face-Regel in CSS?
Die Fontface-Regel ist eine einfache Methode, um Schriftstile direkt zur Webseite hinzuzufügen. Die Schriftarten werden direkt heruntergeladen und durch diese Regel auf den Text angewendet.
Beispiel: Anwenden der @font-face-Regel
Lassen Sie uns die Methode zum Hinzufügen des „ @Schriftart ” Regel durch ein einfaches Beispiel:
< div Klasse = 'meine Klasse' >< h1 > Willkommen beim LinuxHint-Tutorial! < / h1 >
< / div >
Das obige Code-Snippet hat dieselbe Textüberschrift wie im vorherigen Abschnitt dieses Beitrags beschrieben.
Lassen Sie uns das „ @Schriftart „Regel für die“ ” Überschrift, um die Schriftart zu ändern:
@Schriftart {Schriftfamilie : 'DejaVu Sans' ;
Quelle : URL ( './fonts/DejaVuSans.ttf' ) Format ( 'ttf' ) ;
Schriftstärke : 500 ;
}
h1 {
Schriftfamilie : 'DejaVu Sans' ;
Schriftstärke : 500 ;
}
Im obigen Code-Snippet gibt es den Namen der erforderlichen Schriftfamilie und dann das „ URL ” Link, von dem die Schriftart heruntergeladen werden soll, und dann das Schriftgewicht. Wenn die Schriftart durch das „ @Schriftart ”-Regel kann der Name der Schriftart mit jedem Element verwendet werden, wie in diesem Code wurde er für die “ h1 ' Überschrift.
Wenn Sie diesen Code ausführen, wird die Schriftart gemäß den Anweisungen im Abschnitt „ @Schriftart ' Regel. Das Folgende ist die Ausgabe des obigen Code-Snippets:
Dies fasst den Zweck des „ @ ” Symbol in CSS.
Abschluss
Der ' @ „Symbol in CSS wird verwendet, um „ bei Regeln “ im CSS. Diese Regeln führen sehr nützliche Aufgaben aus, wenn CSS zum Gestalten der Dokumente verwendet wird, d. h. sie importieren ganze Stylesheets aus einer anderen CSS-Datei über die „ @importieren ” Regel CSS-Eigenschaften auf definierte Medien gemäß den Bedingungen anwenden durch “ @Medien “-Regel und laden Sie Schriftarten direkt herunter, um sie auf der Webseite über die „ @Schriftart ' Regel.