Какова цель символа '@' в CSS ?

Question

Какова цель символа '@' в CSS ?

Я только что наткнулся на этот вопрос и заметил, что пользователь использует некоторую нотацию, которую я никогда раньше не видел:

@font-face {
   /* CSS HERE */
}

Так этот символ @ является чем-то новым в CSS3 или чем-то старым, что я почему-то упустил? Это что-то вроде того, где с идентификатором вы используете # , а с классом вы используете . ? Google не дал мне хороших статей по этому поводу. Какова цель символа @ в CSS?

136

css css3 syntax symbols

задан Community 23 May 2017 в 12:26

3 ответа

@ используется как спецификация правила. Нравится @ font-face

1

ответ дан 23 November 2019 в 23:40

@ используется для определения правила.

@import
@page
@media
@ font-face
@charset
@namespace

Вышеуказанное называется at-rule s.

24

ответ дан 23 November 2019 в 23:40

Другие вопросы по тегам:

css css3 syntax symbols

Похожие вопросы:

score 166 · Accepted Answer

@ существует со времен @import в CSS1, хотя, возможно, становится все чаще встречается в конструкциях @media (CSS2, CSS3) и @ font-face (CSS3). Однако сам синтаксис @ , как я уже упоминал, не нов.

Все они известны в CSS как at-rules . Это специальные инструкции для браузера, не связанные напрямую со стилем (X) HTML / XML-элементов в веб-документах с использованием правил и свойств, хотя они играют важную роль в управлении применением стилей.

Некоторые примеры кода:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

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

Ат-правила не имеют никакого отношения к селекторам . Из-за своей разной природы разные at-правила определяются по-разному в различных модулях. К другим примерам относятся:

(этот список далеко не исчерпывающий)

Вы можете найти другой неполный список на MDN .