CSS - @ Rules

W tym rozdziale omówiono następujące ważne @ zasady -

Plik @import: reguła importuje inny arkusz stylów do bieżącego arkusza stylów.
Plik @charset reguła wskazuje zestaw znaków używany w arkuszu stylów.
Plik @font-face reguła służy do wyczerpującego opisu kroju czcionki używanego w dokumencie.
Plik !important reguła wskazuje, że reguła zdefiniowana przez użytkownika powinna mieć pierwszeństwo przed arkuszami stylów autora.

NOTE - Istnieją inne @ zasady, które omówimy w kolejnych rozdziałach.

Reguła @import

Reguła @import umożliwia importowanie stylów z innego arkusza stylów. Powinien pojawić się na początku arkusza stylów przed którąkolwiek z reguł, a jego wartością jest adres URL.

Można go zapisać na jeden z dwóch następujących sposobów -

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

Znaczenie reguły @import polega na tym, że pozwala ona tworzyć arkusze stylów w sposób modułowy. Możesz tworzyć różne arkusze stylów, a następnie dołączać je tam, gdzie ich potrzebujesz.

Reguła @charset

Jeśli piszesz dokument przy użyciu zestawu znaków innego niż ASCII lub ISO-8859-1, możesz chcieć ustawić regułę @charset u góry arkusza stylów, aby wskazać, w jakim zestawie znaków jest zapisywany arkusz stylów.

Reguła @charset musi być zapisana bezpośrednio na początku arkusza stylów, bez spacji przed nią. Wartość jest podawana w cudzysłów i powinna być jednym ze standardowych zestawów znaków. Na przykład -

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

Reguła @ font-face

Reguła @ font-face służy do wyczerpującego opisu kroju czcionki używanego w dokumencie. @ font-face można również użyć do określenia lokalizacji czcionki do pobrania, chociaż może to skutkować ograniczeniami specyficznymi dla implementacji.

Ogólnie @ font-face jest niezwykle skomplikowany i nie zaleca się jego używania nikomu poza tymi, którzy są ekspertami w metrykach czcionek.

Oto przykład -

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

Ważna reguła

Kaskadowe arkusze stylów kaskadowo. Oznacza to, że style są stosowane w tej samej kolejności, w jakiej są odczytywane przez przeglądarkę. Stosowany jest pierwszy styl, a następnie drugi i tak dalej.

Zasada! Important zapewnia sposób na stworzenie kaskady CSS. Zawiera również zasady, które mają być zawsze stosowane. Reguła mająca właściwość! Important będzie zawsze stosowana, bez względu na to, gdzie ta reguła pojawi się w dokumencie CSS.

Na przykład w poniższym arkuszu stylów tekst akapitu będzie czarny, mimo że pierwsza zastosowana właściwość stylu jest czerwona:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

Tak więc, jeśli chcesz mieć pewność, że właściwość jest zawsze stosowana, dodaj właściwość! Important do tagu. Aby więc tekst akapitu był zawsze czerwony, należy zapisać go w następujący sposób:

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Tutaj zrobiłeś p {kolor: # ff0000! Ważne; } obowiązkowe, teraz ta reguła będzie zawsze obowiązywała, nawet jeśli zdefiniowałeś inną regułę p {color: # 000000; }

To da następujący wynik -