Ниже приведены основные « по правилам 'в CSS:
Давайте кратко обсудим каждый из трех « по правилам », чтобы понять, как они работают.
Что такое правило @import в CSS?
“ @Импортировать ” в CSS используется для импорта таблицы стилей CSS из другой таблицы стилей. Если есть таблица стилей CSS, которая содержит свойства или инструкции по стилю для различных элементов веб-страницы, и требуется добавить тот же стиль в другой файл веб-страницы, напишите только « @Импортировать ' с именем этой таблицы стилей (которая содержит свойства CSS) справа в круглых скобках с ' URL ' или в кавычках можно импортировать все свойства из этой таблицы стилей и применить их непосредственно к таблице стилей, где ' @Импортировать добавлено правило.
Синтаксис
Имя файла таблицы стилей в формате CSS должно быть написано после « @Импортировать ». Итак, синтаксис для добавления « @Импортировать Правило в таблице стилей следующее:
@Импортировать 'имя таблицы стилей.css' ;
Правило импорта также может быть записано следующим образом для той же цели, так как оно также будет генерировать тот же результат:
@Импортировать URL ( имя таблицы стилей.css ) ;Что такое правило @media в CSS?
“ @СМИ ” Правило используется для добавления медиа-инструкций на веб-страницу. Это правило работает в соответствии с условием, примененным при добавлении этого правила. Условие добавляется сразу после добавления « @СМИ ” справа, а затем внутри правила в фигурных скобках указаны свойства или инструкции, которые необходимо реализовать, когда условие истинно.
Пример: применение правила @media
Чтобы понять пример, мы можем добавить некоторый контент на веб-страницу:
< див сорт '=' 'мои занятия' >< h1 > Добро пожаловать в учебник по LinuxHint! < / h1 >
< / див >
В приведенном выше фрагменте кода есть заголовок, созданный для отображения этого в качестве содержимого веб-страницы.
Давайте возьмем пример добавления медиа-инструкций, когда размеры или ширина страницы увеличиваются или уменьшаются. Во-первых, напишите « @СМИ », а затем добавьте условие, а затем в фигурных скобках укажите свойства CSS, которые должны быть реализованы, если условие с « @СМИ » становится правдой:
@СМИ ( Максимальная ширина : 700 пикселей ) {.мои занятия {
цвет : черный ;
фон : зеленый ;
}
}
@СМИ ( минимальная ширина : 700 пикселей ) и ( Максимальная ширина : 900 пикселей ) {
.мои занятия {
цвет : черный ;
фон : желтый ;
}
}
@СМИ ( минимальная ширина : 900 пикселей ) {
.мои занятия {
цвет : черный ;
фон : голубой ;
}
}
В приведенном выше коде были упомянуты разные размеры ширины в качестве условия для соответствующего выполнения трех разных медиа-правил. Например, согласно приведенному выше коду, когда минимальная ширина будет 700 пикселей, цвет фона текста изменится на желтый.
Ниже будет результат, сгенерированный с помощью приведенного выше кода. Изменение размера экрана изменит цвет фона текста:
Что такое правило @font-face в CSS?
Правило Fontface — это простой способ добавить стили шрифтов непосредственно на веб-страницу. С помощью этого правила шрифты напрямую загружаются и применяются к тексту.
Пример: применение правила @font-face
Давайте разберемся, как добавить « @шрифт-лицо правило на простом примере:
< див сорт '=' 'мои занятия' >< h1 > Добро пожаловать в учебник по LinuxHint! < / h1 >
< / див >
Приведенный выше фрагмент кода имеет тот же текстовый заголовок, что и описанный в предыдущем разделе этого поста.
Давайте реализуем « @шрифт-лицо правило для « », чтобы изменить его шрифт:
@шрифт-лицо {семейство шрифтов : 'ДежаВю Санс' ;
источник : URL ( './шрифты/DejaVuSans.ttf' ) формат ( 'ттф' ) ;
вес шрифта : 500 ;
}
h1 {
семейство шрифтов : 'ДежаВю Санс' ;
вес шрифта : 500 ;
}
В приведенном выше фрагменте кода есть имя требуемого семейства шрифтов, а затем « URL », откуда должен быть загружен шрифт, а затем вес шрифта. Когда начертание шрифта указано через « @шрифт-лицо », имя начертания шрифта можно использовать с любым элементом, как в этом коде оно использовалось для « h1 ' заголовок.
Запуск этого кода изменит шрифт в соответствии с инструкциями, указанными в « @шрифт-лицо правило. Ниже будет вывод приведенного выше фрагмента кода:
Это подытоживает цель « @ Символ в CSS.
Заключение
“ @ Символ в CSS используется для добавления « по правилам 'в CSS. Эти правила выполняют очень полезные задачи при использовании CSS для оформления документов, т. е. они импортируют целые таблицы стилей из другого файла css через « @Импортировать », примените свойства CSS к определенным носителям в соответствии с условиями через « @СМИ » и напрямую загружать шрифты для использования на веб-странице через « @шрифт-лицо правило.