Правила в CSS

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

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

Правило @import

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

Он может быть написан одним из двух способов:

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

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

Правило @charset

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

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

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

Правило @font-face

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

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

Вот пример -

< style tyle="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 tyle="text/css">
   < !--
   p { color: #ff0000; }
   p { color: #000000; }
   -->
< /style>

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

< html>
   < head>
  
      < style tyle="text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      < /style>
     
   < /head>
   < body>
      < p>example.com< /p>
   < /body>
< /html>

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

Это приведет к следующему результату -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!