Oto główne „ na zasadach ” w CSS:
Omówmy pokrótce każdą z trzech „ na zasadach ”, aby zrozumieć, jak działają.
Czym jest reguła @import w CSS?
„ @import ” w CSS służy do importowania arkusza stylów CSS z innego arkusza stylów. Jeśli istnieje arkusz stylów CSS, który zawiera właściwości lub instrukcje dotyczące stylów dla różnych elementów strony internetowej i wymagane jest dodanie tego samego stylu do innego pliku strony internetowej, wystarczy napisać „ @import ” z nazwą tego arkusza stylów (zawierającego właściwości CSS) po prawej stronie w nawiasach okrągłych z „ adres URL ” lub w cudzysłowie można zaimportować wszystkie właściwości z tego arkusza stylów i zastosować je bezpośrednio do arkusza stylów, w którym „ @import Dodano regułę ”.
Składnia
Powinna być nazwa pliku arkusza stylów w formacie CSS zapisana po „ @import ”. Tak więc składnia do dodania „ @import Reguła w arkuszu stylów jest następująca:
@import „nazwa arkusza stylów.css” ;
Regułę importu można również zapisać w następujący sposób w tym samym celu, ponieważ również wygeneruje ten sam wynik:
@import adres URL ( nazwa_arkusza stylów.css ) ;Czym jest reguła @media w CSS?
„ @głoska bezdźwięczna ” Reguła służy do dodawania instrukcji multimedialnych do strony internetowej. Ta reguła działa zgodnie z warunkiem zastosowanym podczas dodawania tej reguły. Warunek jest dodawany zaraz po dodaniu „ @głoska bezdźwięczna ” po prawej stronie, a następnie wewnątrz reguły w nawiasach klamrowych znajdują się właściwości lub instrukcje, które należy zaimplementować, gdy warunek jest spełniony.
Przykład: zastosowanie reguły @media
Aby zrozumieć na przykładzie, możemy dodać trochę treści do strony internetowej:
< dz klasa = 'moja klasa' >< h1 > Witamy w samouczku LinuxHint! < / h1 >
< / dz >
W powyższym fragmencie kodu utworzono nagłówek, aby wyświetlić to jako zawartość strony internetowej.
Weźmy przykład dodawania instrukcji multimedialnych, gdy wymiary lub szerokość strony zwiększają się lub zmniejszają. Najpierw napisz „ @głoska bezdźwięczna ”, a następnie dodaj warunek, a następnie w nawiasach klamrowych zdefiniuj właściwości CSS, które powinny zostać zaimplementowane, jeśli warunek z „ @głoska bezdźwięczna staje się prawdą:
@głoska bezdźwięczna ( maksymalna szerokość : 700 pikseli ) {.moja klasa {
kolor : czarny ;
tło : zielony ;
}
}
@głoska bezdźwięczna ( minimalna szerokość : 700 pikseli ) I ( maksymalna szerokość : 900 pikseli ) {
.moja klasa {
kolor : czarny ;
tło : żółty ;
}
}
@głoska bezdźwięczna ( minimalna szerokość : 900 pikseli ) {
.moja klasa {
kolor : czarny ;
tło : cyjan ;
}
}
W powyższym kodzie wymieniono różne rozmiary szerokości jako warunek odpowiedniego wykonania trzech różnych reguł medialnych. Na przykład, zgodnie z powyższym kodem, gdy minimalna szerokość wyniesie 700 pikseli, kolor tła tekstu zmieni się na żółty.
Poniżej będzie wynik wygenerowany przez powyższy kod. Zmiana rozmiaru ekranu spowoduje zmianę kolorów tła tekstu:
Czym jest reguła @font-face w CSS?
Reguła Fontface to łatwa metoda dodawania stylów czcionek bezpośrednio do strony internetowej. Czcionki są bezpośrednio pobierane i stosowane do tekstu za pomocą tej reguły.
Przykład: zastosowanie reguły @font-face
Przyjrzyjmy się metodzie dodawania „ @czcionka-twarz rządzić na prostym przykładzie:
< dz klasa = 'moja klasa' >< h1 > Witamy w samouczku LinuxHint! < / h1 >
< / dz >
Powyższy fragment kodu ma taki sam nagłówek tekstowy, jak opisano w poprzedniej sekcji tego wpisu.
Wprowadźmy w życie „ @czcionka-twarz ”reguła dla” ”, aby zmienić czcionkę:
@czcionka-twarz {rodzina czcionek : „Deja Vu Sans” ;
źródło : adres URL ( './fonts/DejaVuSans.ttf' ) format ( 'ttf' ) ;
grubość czcionki : 500 ;
}
h1 {
rodzina czcionek : „Deja Vu Sans” ;
grubość czcionki : 500 ;
}
W powyższym fragmencie kodu znajduje się nazwa wymaganej rodziny czcionek, a następnie „ adres URL ” link skąd czcionka ma zostać pobrana, a następnie font-weight. Kiedy krój czcionki jest określony przez „ @czcionka-twarz ”, nazwa kroju czcionki może być używana z dowolnym elementem, tak jak w tym kodzie została użyta dla „ h1 ” nagłówek.
Uruchomienie tego kodu zmieni czcionkę zgodnie z instrukcjami wymienionymi w „ @czcionka-twarz reguła. Poniżej zostaną wyświetlone dane wyjściowe powyższego fragmentu kodu:
To podsumowuje cel „ @ „Symbol w CSS.
Wniosek
„ @ „Symbol w CSS służy do dodawania” na zasadach ” w CSSie. Reguły te wykonują bardzo przydatne zadania podczas używania CSS do stylizowania dokumentów, tj. importują całe arkusze stylów z innego pliku css poprzez „ @import ”, zastosuj właściwości CSS na zdefiniowanym nośniku zgodnie z warunkami przez „ @głoska bezdźwięczna ” i bezpośrednio pobieraj czcionki do użycia na stronie za pomocą opcji „ @czcionka-twarz reguła.