В CSS включены два синтаксических правила:
Обычные правила: состоящие из селекторов, атрибутов и значений, мы в основном использовали правила такого типа в предыдущих исследованиях;
@Правило: оно начинается с символа @, за которым следует ключевое слово. Его также называют «правилом AT». Его можно разделить на « обычное правило » и « вложенное правило » в зависимости от различных методов использования.
Давайте главным образом представим правило @ в CSS.
1. Общие правила
Так называемые «обычные правила» относятся к правилам, синтаксис которых аналогичен следующему:
@[КЛЮЧЕВОЕ СЛОВО](ПРАВИЛО);
(1)@charset
@charset используется для установки кодировки символов, используемой в файлах CSS. Формат синтаксиса следующий:
@charset<кодировка>;
Среди них <charset> — это конкретная кодировка символов, а значение по умолчанию — «utf-8».
При использовании необходимо обратить внимание на следующие моменты:
① Если установлен @charset, он должен располагаться в начале файла CSS, и перед @charset не должно быть никаких символов;
②Кодировку символов необходимо заключать в двойные кавычки;
③ Необходимо использовать пробел для разделения имени @rule (@charset) и конкретной кодировки символов;
④Точку с запятой после правила нельзя опускать;
⑤Если установлено несколько @charsets, действителен только первый оператор;
⑥@charset нельзя использовать в элементах HTML или тегах <style>;
⑦Если несколько правил кодирования символов определены разными способами, их приоритетный порядок следующий:
● Объявление кодировки символов в начале файла HTML;
●Объявление кодировки символов в заголовке HTTP-запроса;
●Объявление кодировки символов, определенное @charset, используется в файле CSS;
●Объявление кодировки символов, заданное атрибутом charset в теге <link> (не рекомендуется в HTML5).
Следующий пример демонстрирует использование @charset, а также несколько примеров ошибок:
/*Установите формат кодировки CSS UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Нечувствителен к регистру*//*Демонстрация ошибок*/@charset'iso-8859-15';/*Неверно Да, используются неправильные кавычки */@charset'UTF-8';/*Недопустимо, используются неправильные кавычки*/@charsetUTF-8;/*Недопустимо, между @charset и кодировкой символов имеется дополнительный пробел * /@charsetUTF-8;/*Недопустимо, перед правилом @ есть дополнительный пробел*/@charsetUTF-8;/*Недопустимо, кодировку символов необходимо заключить в двойные кавычки*/
(2) @импорт
@import используется для импорта других файлов стилей в текущий файл стилей CSS. Все содержимое, кроме @charset, в других файлах таблиц стилей можно ввести через @import. Кроме того, @import также необходимо разместить в начале файла стиля. Синтаксический формат @import следующий:
@import<url><media_query_list>
Среди них <url> — это путь к файлу внешней таблицы стилей, который нужно импортировать с использованием абсолютного или относительного пути. Вы также можете использовать функцию url() для указания пути к файлу; <media_query_list> — необязательный параметр, используемый для указания пути. условия медиа-запроса. Используйте запятые для разделения нескольких условий.
В реальных проектах не рекомендуется слишком часто использовать @import, поскольку это вызовет множество дополнительных запросов и заблокирует загрузку других файлов.
При использовании @import также необходимо обратить внимание на следующие моменты:
●@import должен быть объявлен первым в начале файла таблицы стилей, а объявление должно заканчиваться точкой с запятой. Если завершающая точка с запятой опущена, внешняя таблица стилей может быть импортирована неправильно;
●Использование @import в браузере IE позволяет использовать не более 35 таблиц стилей.
Следующий пример демонстрирует использование @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Все приведенные выше методы определения допустимы. При использовании url() для установки пути к файлу таблицы стилей кавычки пути переноса не являются обязательными, если используется конкретный путь для прямой установки пути к файлу таблицы стилей; Путь переноса кавычек должен быть сохранен.
(3)@пространство имен
@namespace используется для определения правила @ пространства имен XML в таблице стилей CSS. Он может установить указанное пространство имен для всех селекторов в текущем файле стиля. @namespace обычно используется для обработки документов, содержащих несколько пространств имен, таких как встроенный SVG в HTML5, MathML или XML, смешанный с несколькими словарями.
@namespace должен быть определен после всех @charset и @import и перед любыми другими объявлениями стилей в таблице стилей. @namespace можно использовать для определения пространства имен по умолчанию. Если указано пространство имен по умолчанию, все универсальные селекторы и селекторы классов (но не селекторы атрибутов) будут применяться только к элементам в этом пространстве имен. @namespace также можно использовать для определения префикса пространства имен. Если перед общим селектором, классом или атрибутом стоит префикс пространства имен, этот селектор будет соответствовать только тем элементам, пространство имен которых соответствует имени или атрибуту элемента.
Следующий пример демонстрирует использование @namespace:
/*Пространство имен по умолчанию*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Префикс пространства имен*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Вложенные правила
Так называемые «вложенные правила» означают, что за правилом @ должна следовать фигурная скобка { }, которая содержит некоторые другие объявления правил, подобные следующему:
@[KEYWORD]{/*Вложенные операторы*/}(1)@медиа
@media используется для применения определенной части таблицы стилей (информация о стиле в фигурных скобках) на основе результатов одного или нескольких медиа-запросов. Используя @media, вы можете указать набор медиа-запросов и блок стилей CSS тогда и только тогда. если носитель Указанные стили CSS применяются к документу только в том случае, если запрос соответствует используемому устройству.
Медиа-запрос — это набор условий, используемых для определения информации об устройстве, такой как значение ширины и высоты устройства, соотношение сторон, цвет, разрешение и т. д. Когда условия совпадают, будет выполнена информация о вложенном стиле.
@media можно разместить в любом месте таблицы стилей или других правил @. Пример кода выглядит следующим образом:
@mediaalland(min-width:1280px){/*ширина больше 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-solve:2dppx){/*Экран Retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@страница
@page используется для изменения определенных свойств CSS при печати документа. Следует отметить, что с помощью @page вы можете изменить только некоторые свойства CSS, такие как поле свойства внешнего интервала, сиротские элементы, связанные с печатью, свойства Windows и разрыв страницы. -* свойства, другие свойства CSS будут игнорироваться.
/*Указывает, что верхнее и левое поля первой страницы при печати составляют 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@поддерживает
@supports используется для проверки того, поддерживает ли браузер определенную функцию CSS, также известную как «запрос функции». Синтаксическая структура этого правила следующая:
@supports(правило)[оператор(правило)]*{sRules};Среди них правило представляет собой определенный стиль CSS и должно быть заключено в круглые скобки; необязательные значения оператора — или, и, и нет. С помощью параметра оператора можно указать несколько стилей CSS.
@supports можно определить в верхней части файла стиля или внутри других вложенных правил. Однако @supports все еще находится на экспериментальной стадии. Прежде чем использовать его, необходимо сначала убедиться, поддерживает ли его браузер.
Следующий пример демонстрирует использование @supports:
/*Стиль CSS, который будет использоваться, когда браузер поддерживает атрибут display:grid*/@supports(display:grid){div{display:grid;}}/*CSS, который будет использоваться, когда браузер не поддерживает display:grid атрибут Style*/@supportsnot(display:grid){div{float:right;}}/*Проверка нескольких условий одновременно*/@supports(display:flex)and(-webkit-appearance:checkbox){.module {дисплей: гибкий;}}(4) @font-face
@font-face используется для загрузки указанного шрифта с удаленного сервера или локально пользователя. Формат синтаксиса следующий:
@font-face{font-family:<идентификатор>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}Описание параметра следующее:
●<идентификатор>: имя шрифта;
●<url>: используйте url() (удаленный шрифт) или local() (локальный шрифт), чтобы указать путь хранения шрифтов, который может быть относительным или абсолютным путем;
●<строка>: используется для указания формата пользовательских шрифтов, например следующих типов: truetype, opentype, Embedded-opentype, svg и т. д.;
●<font>: определение стилей, связанных со шрифтом.
Совет: @font-face можно разместить в верхней части таблицы стилей CSS или внутри других вложенных правил. Если вы используете как функцию local(), так и функцию url() для загрузки шрифтов, сначала будет загружен локальный шрифт, определенный в функции local(). Если он не найден, будет загружен удаленный шрифт, определенный в функции url(). загружен.
Следующий пример демонстрирует использование @font-face:
/*Определить правила @font-face*/@font-face{/*Указать имя шрифта*/font-family:OpenSans;/*Указать путь к файлу шрифта*/src:url(/fonts/OpenSans-Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*Приложение шрифта*/p{font-family:OpenSans;}(5)@ключевые кадры
@keyframes используется для определения стиля ключевых кадров (или путевых точек) анимации в CSS3 для управления промежуточными шагами в последовательности анимации. После определения этого правила вам необходимо использовать его через атрибут анимации-name. Последовательности ключевых кадров именуются в процентах, при этом начальное и конечное состояния составляют от и до 0% и 100% соответственно.
Синтаксический формат @keyframes следующий:
@keyframes<идентификатор>{<блоки ключевых кадров>}Среди них < идентификатор> используется для определения имени анимации; <keyframes-blocks> используется для определения стиля анимации на каждом этапе, то есть покадровой анимации.
Использование @keyframes демонстрируется в следующем примере:
/*Statement*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top:30px;}100%{top:60px;}}/*Apply*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s ;}(6)@документ
@document используется для ограничения объема стилей в документе на основе URL-адреса документа. Этот атрибут можно использовать для определения эксклюзивных стилей для определенных пользователей. В настоящее время @document все еще находится на экспериментальной стадии, и конкретные стандарты будут определены в CSS4.
В @document доступны следующие функции:
●url(): соответствует всему URL-адресу;
●url-prefix(): начинается ли URL-адрес соответствующего документа со значения, указанного в параметре;
●domain(): является ли доменное имя соответствующего документа именем домена, указанным в параметре, или именем его субдомена;
●regexp(): соответствует ли URL-адрес соответствующего документа регулярному выражению, указанному в параметре. Выражение должно соответствовать всему URL-адресу.
Совет: Параметры, передаваемые функциям url(), url-prefix() и domain(), можно заключать в кавычки, но параметры, передаваемые в функцию regexp(), должны быть заключены в кавычки.
Следующий пример демонстрирует использование @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* Это правило CSS будет применяться к следующим веб-страницам: + Страница с URL-адресом http://www.weixueyuan.net/ + Любая веб-страница, URL-адрес которой начинается с http://www.weixueyuan.net/Style/ + Доменное имя weixueyuan. Все веб-страницы в сети + любые веб-страницы, URL-адрес которых начинается с https:*//*define style*/body{color:purple;background:yellow;}.