CSS - @ Правила

В этой главе будут рассмотрены следующие важные правила @ -

В @import: правило импортирует другую таблицу стилей в текущую таблицу стилей.
В @charset rule указывает набор символов, который использует таблица стилей.
В @font-face Правило используется для исчерпывающего описания начертания шрифта для использования в документе.
В !important rule указывает, что определяемое пользователем правило должно иметь приоритет перед таблицами стилей автора.

NOTE - Существуют и другие правила @, которые мы рассмотрим в следующих главах.

Правило @import

Правило @import позволяет импортировать стили из другой таблицы стилей. Он должен располагаться в самом начале таблицы стилей перед любым правилом, а его значением является URL-адрес.

Это можно записать одним из двух следующих способов -

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

Значение правила @import состоит в том, что оно позволяет разрабатывать таблицы стилей с использованием модульного подхода. Вы можете создавать различные таблицы стилей, а затем включать их везде, где они вам нужны.

Правило @charset

Если вы пишете свой документ с использованием набора символов, отличного от ASCII или ISO-8859-1, вы можете установить правило @charset в верхней части таблицы стилей, чтобы указать, в каком наборе символов написана таблица стилей.

Правило @charset должно быть написано в самом начале таблицы стилей, даже без пробела перед ним. Значение заключено в кавычки и должно быть одним из стандартных наборов символов. Например -

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

Правило @ font-face

Правило @ font-face используется для исчерпывающего описания шрифта для использования в документе. @ font-face также может использоваться для определения местоположения шрифта для загрузки, хотя это может иметь ограничения, зависящие от реализации.

В общем, @ font-face чрезвычайно сложен, и его использование не рекомендуется никому, кроме тех, кто разбирается в метриках шрифтов.

Вот пример -

<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>

Правило! Important

Каскадные таблицы стилей каскад. Это означает, что стили применяются в том же порядке, в котором они читаются браузером. Применяется первый стиль, затем второй и так далее.

Правило! Important предоставляет способ сделать ваш CSS каскадным. Он также включает правила, которые должны применяться всегда. Правило, имеющее свойство! Important, будет применяться всегда, независимо от того, где это правило появляется в документе CSS.

Например, в следующей таблице стилей текст абзаца будет черным, хотя первое примененное свойство стиля - красный:

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

Итак, если вы хотите, чтобы свойство всегда применялось, вы должны добавить к тегу свойство! Important. Итак, чтобы текст абзаца всегда был красным, вы должны написать его следующим образом:

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

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

Здесь вы сделали p {color: # ff0000! Important; } обязательно, теперь это правило будет применяться всегда, даже если вы определили другое правило p {color: # 000000; }

Это даст следующий результат -