De volgende zijn de belangrijkste “ bij regels ” in CSS:
Laten we elk van de drie kort bespreken ' bij regels ” om te begrijpen hoe ze werken.
Wat is de @import-regel in CSS?
De ' @importeren ”-regel in CSS wordt gebruikt om een CSS-stylesheet uit een andere stylesheet te importeren. Als er een CSS-stijlblad is dat eigenschappen of stijlinstructies bevat voor verschillende elementen van een webpagina en het is vereist om dezelfde stijl toe te voegen aan een ander webpaginabestand, schrijf dan alleen ' @importeren ” met de naam van dat stijlblad (dat CSS-eigenschappen bevat) aan de rechterkant tussen ronde haakjes met “ url ” of tussen aanhalingstekens kan alle eigenschappen van dat stijlblad importeren en ze rechtstreeks toepassen op het stijlblad waar de “ @importeren ” regel is toegevoegd.
Syntaxis
De naam van het CSS-geformatteerde stijlbladbestand moet worden geschreven na ' @importeren ”. Dus de syntaxis om toe te voegen ' @importeren Regel in een stylesheet is als volgt:
@importeren 'stylesheetnaam.css' ;
De importregel kan ook als volgt worden geschreven voor hetzelfde doel, aangezien het ook hetzelfde resultaat zal genereren:
@importeren url ( stylesheetnaam.css ) ;Wat is de @media-regel in CSS?
De ' @media ” Regel wordt gebruikt om media-instructies aan de webpagina toe te voegen. Deze regel werkt volgens de voorwaarde die is toegepast bij het toevoegen van deze regel. De voorwaarde wordt toegevoegd direct na het toevoegen van ' @media ” aan de rechterkant en dan binnen de regel tussen de accolades zijn de eigenschappen of de instructies die moeten worden geïmplementeerd wanneer de voorwaarde waar is.
Voorbeeld: @media-regel toepassen
Om aan de hand van een voorbeeld te begrijpen, kunnen we wat inhoud aan de webpagina toevoegen:
< div klas = 'mijn klas' >< h1 > Welkom bij de LinuxHint-zelfstudie! < / h1 >
< / div >
In het bovenstaande codefragment is een kop gemaakt om dit weer te geven als de inhoud van de webpagina.
Laten we een voorbeeld nemen van het toevoegen van media-instructies wanneer de afmetingen of de paginabreedte toenemen of afnemen. Schrijf eerst ' @media ” en voeg vervolgens de voorwaarde toe en definieer vervolgens tussen de accolades de CSS-eigenschappen die moeten worden geïmplementeerd als de voorwaarde met “ @media ” wordt waar:
@media ( Maximale wijdte : 700px ) {.mijn klas {
kleur : zwart ;
achtergrond : groente ;
}
}
@media ( min-breedte : 700px ) En ( Maximale wijdte : 900px ) {
.mijn klas {
kleur : zwart ;
achtergrond : geel ;
}
}
@media ( min-breedte : 900px ) {
.mijn klas {
kleur : zwart ;
achtergrond : cyaan ;
}
}
In de bovenstaande code zijn verschillende breedtematen genoemd als voorwaarde voor drie verschillende mediaregels om dienovereenkomstig uit te voeren. Bijvoorbeeld, volgens de bovenstaande code, wanneer de minimale breedte 700 px is, verandert de achtergrondkleur van de tekst in geel.
Het volgende is het resultaat dat wordt gegenereerd door de bovenstaande code. Door de grootte van het scherm te wijzigen, veranderen de achtergrondkleuren van de tekst:
Wat is de @font-face-regel in CSS?
Fontface-regel is een eenvoudige methode om lettertypestijlen rechtstreeks aan de webpagina toe te voegen. Via deze regel worden de lettertypen rechtstreeks gedownload en op de tekst toegepast.
Voorbeeld: @font-face-regel toepassen
Laten we de methode begrijpen om de ' @lettertype ” regel door een eenvoudig voorbeeld:
< div klas = 'mijn klas' >< h1 > Welkom bij de LinuxHint-zelfstudie! < / h1 >
< / div >
Het bovenstaande codefragment heeft dezelfde tekstkop als beschreven in het vorige gedeelte van dit bericht.
Laten we de ' @lettertype ” regel voor de “ ” rubriek om het lettertype te wijzigen:
@lettertype {font-familie : 'DejaVu zonder' ;
src : url ( './fonts/DejaVuSans.ttf' ) formaat ( 'ttf' ) ;
lettertype dikte : 500 ;
}
h1 {
font-familie : 'DejaVu zonder' ;
lettertype dikte : 500 ;
}
In het bovenstaande codefragment staat de naam van de lettertypefamilie die vereist is en vervolgens de ' url ” link van waar het lettertype moet worden gedownload en vervolgens het lettertypegewicht. Wanneer het lettertype wordt opgegeven via de ' @lettertype ”-regel kan de naam van het lettertype bij elk element worden gebruikt, zoals in deze code is gebruikt voor de “ h1 ” rubriek.
Als u deze code uitvoert, wordt het lettertype gewijzigd volgens de instructies die worden vermeld in de ' @lettertype ' regel. Het volgende is de uitvoer van het bovenstaande codefragment:
Dit vat het doel van de “ @ ”Symbool in CSS.
Conclusie
De ' @ 'Symbool in CSS wordt gebruikt om toe te voegen' bij regels ” in css. Deze regels voeren zeer nuttige taken uit bij het gebruik van CSS voor het stylen van de documenten, d.w.z. ze importeren hele style sheets uit een ander css-bestand via de ' @importeren ” regel, pas CSS-eigenschappen toe op gedefinieerde media volgens de voorwaarden via “ @media ”-regel en download lettertypen rechtstreeks voor gebruik op de webpagina via de “ @lettertype ' regel.