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

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

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

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

4b9b3361

@ существует со времен @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-rules не имеют никакого отношения к selectors. Из-за их различной природы различные правила at определяются по-разному различными многочисленными модулями. Дополнительные примеры:

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

Вы можете найти еще один неисчерпывающий список в MDN.

144
ответ дан 10 авг. '10 в 23:44
источник

Пример @media, который может быть полезен для его иллюстрации далее:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

Это будет зависеть от размера изображения условно от размера экрана, используя меньшее изображение на меньшем экране. Первый блок будет обращаться к экранам шириной до 1440 пикселей; второй - для экранов размером более 1440 пикселей.

Это очень удобно с такими вещами, как вкладки, которые плавают или бросаются на меньшие экраны; вы можете часто отбрасывать размер шрифта ярлыков вкладки на размер точки на меньших экранах и все они подходят.

7
ответ дан 17 мая '13 в 21:22
источник

В CSS-стиле ProBoards также используются эти переменные.

Здесь маленький сниппт из одной из страниц CSS:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

ПРИМЕЧАНИЕ: не является родным, см. первый комментарий.

0
ответ дан 04 окт. '13 в 22:14
источник