Учебники

CSS — @ Правила

Сентябрь 21, 2018

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

  • Правило @import: импортирует другую таблицу стилей в текущую таблицу стилей.

  • Правило @charset указывает набор символов, который использует таблица стилей.

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

  • Правило ! Important указывает, что пользовательское правило должно иметь приоритет над таблицами стилей автора.

Правило @import: импортирует другую таблицу стилей в текущую таблицу стилей.

Правило @charset указывает набор символов, который использует таблица стилей.

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

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

ПРИМЕЧАНИЕ. — Есть и другие @ правила, которые мы рассмотрим в следующих главах.

Правило @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 используется для исчерпывающего описания шрифта 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 обеспечивает способ создания каскада CSS. Он также включает в себя правила, которые должны применяться всегда. Правило, имеющее свойство! Important, будет всегда применяться независимо от того, где это правило появляется в документе CSS.

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

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

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

Live Demo 

<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! Важным; } обязательно, теперь это правило будет применяться всегда, даже если вы определили другое правило p {color: # 000000; }

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

41
Share: