В этой главе будут рассмотрены следующие важные @ правила —
Правило @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; }