"@„Symbol służy do dodawania reguł w CSS. Reguły dodane przez „@”Symbol nazywany jest„Zgodnie z zasadami". Reguły te minimalizują wysiłek programisty na różne sposoby. Operacje, które „Zgodnie z zasadami”Wydajność importuje właściwości CSS bezpośrednio bez konieczności pisania lub kopiowania wszystkich właściwości CSS w każdym pliku, stosując właściwości w niektórych mediach, a także bezpośrednio pobieranie i stosowanie czcionek do treści strony internetowej.

Następujące są główne „Zgodnie z zasadami„W CSS:

• Reguła @Import
• Zasada @Media
• Reguła @font-face

Omówmy krótko każdy z trzech „Zgodnie z zasadami„Aby zrozumieć, jak działają.

Jaka jest reguła @import w CSS?

„„@import„Zasada 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 stylistyczne dla różnych elementów strony internetowej i musi dodać tę samą styl do innego pliku strony internetowej, pisząc tylko „tylko”@import”Z nazwą tego arkusza stylów (zawierającego właściwości CSS) po prawej stronie w obu okrągłych nawiasach z„URL”Lub w odwróconych przecinkach może importować wszystkie właściwości z tego arkusza stylu i zastosować je bezpośrednio do arkusza stylów, w którym„@import„Zasada została dodana.

Składnia

Powinna istnieć nazwa pliku arkusza stylów CSS, napisany po „@import". Zatem składnia do dodania „@import„Zasada w arkuszu stylów jest następująca:

@Import "StylesheetName.CSS ”;

Regułę importu można również zapisać jako następujące w tym samym celu, ponieważ wygeneruje również ten sam wynik:

@Import URL (StylesheetName.CSS);

Jaka jest zasada @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 zastosowanym warunkiem podczas dodawania tej reguły. Warunek jest dodawany zaraz po dodaniu „@głoska bezdźwięczna”Po prawej stronie, a następnie w zasadzie w nawiasach kręconych są właściwości lub instrukcje, które należy zaimplementować, gdy warunek jest prawdziwy.

Przykład: Stosowanie reguły @Media

Aby zrozumieć za pomocą przykładu, możemy dodać trochę treści do strony internetowej:

Witamy w samouczku Linuxhint!

W powyższym fragmencie kodu jest nagłówek, aby wyświetlić to jako treść strony internetowej.

Weźmy przykład dodawania instrukcji multimediów, gdy wymiary lub szerokość strony wzrasta lub zmniejsza. Najpierw napisz „@głoska bezdźwięczna”, A następnie dodaj warunek, a następnie w nawiasach kręconych zdefiniuj właściwości CSS, które należy zaimplementować, jeśli warunek za pomocą„@głoska bezdźwięczna„Staje się prawdą:

@Media (maksymalny szerokość: 700px)
.moja klasa
czarny kolor;
Tło: zielony;


@media (min-szerokość: 700px) i (maksymalna szerokość: 900px)
.moja klasa
czarny kolor;
Tło: żółty;


@media (min-szerokość: 900px)
.moja klasa
czarny kolor;
Tło: cyjan;

W powyższym kodzie wspomniano o różnych rozmiarach szerokości jako warunku dla trzech różnych reguł mediów, które należy odpowiednio wykonać. Na przykład, zgodnie z powyższym kodem, gdy minimalna szerokość wyniesie 700px, kolor tła tekstu zmieni się na żółty.

Poniższe wyniki będą wygenerowane przez powyższy kod. Zmiana rozmiaru ekranu zmieni kolory tła tekstu:

Jaka jest reguła @font-face w CSS?

Reguła Fontface to łatwa metoda dodawania stylów czcionek bezpośrednio na stronę internetową. Czcionki są pobierane bezpośrednio i zastosowane do tekstu za pomocą tej reguły.

Przykład: Stosowanie reguły @font-face

Zrozumiemy metodę dodania „@font-face”Reguła poprzez prosty przykład:

Witamy w samouczku Linuxhint!

Powyższy fragment kodu ma ten sam nagłówek tekstowy, jak opisano w poprzedniej sekcji tego postu.

Wdrożyćmy „@font-face”Reguła„

„Kierując się, aby zmienić czcionkę:

@font-face
Font-Family: „Dejavu sans”;
SRC: URL (”./czcionki/dejavusans.ttf ") format („ ttf ”);
Waseight czcionki: 500;

H1
Font-Family: „Dejavu sans”;
Waseight czcionki: 500;

W powyższym fragmencie kodu jest nazwa rodziny czcionek, która jest wymagana, a następnie „URL”Link z miejsca, w którym ma zostać pobrana czcionka, a następnie Washt Font. Gdy twarz czcionki jest określona przez „@font-face„Zasada, nazwa twarzy czcionki może być używana z dowolnym elementem, jak w tym kodzie, że był używany dla„H1„Kieruje się.

Uruchomienie tego kodu zmieni czcionkę zgodnie z instrukcjami wymienionymi w „@font-face”Reguła. Poniżej pojawią się wyjście powyższego fragmentu kodu:

To podsumowuje cel „@„Symbol w CSS.

Wniosek

„„@„Symbol w CSS służy do dodania„Zgodnie z zasadami„W CSS. Reguły te wykonują bardzo przydatne zadania podczas korzystania z CSS do stylizacji dokumentów I.mi. Importują arkusze całego stylu z innego pliku CSS za pośrednictwem „@import„Zasada, zastosuj właściwości CSS na zdefiniowanych mediach zgodnie z warunkami„ przez ”@głoska bezdźwięczna”Reguła i bezpośrednio pobieraj czcionki do użycia na stronie internetowej za pośrednictwem„@font-face”Reguła.