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

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

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

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

5 125
syntax css css3 debug-symbols

5 ответов:

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

они все известны в CSS как правил. Это специальные инструкции для браузера, не связанные напрямую со стилизацией (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-правила не имеют никакого отношения к селекторы Любой. Из-за их различной природы различные at-правила определяются по-разному в различных модулях. Другие примеры включают в себя:

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

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

154

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

@import
@страница
@media
@font-face
@charset
@ namespace

выше, называются at-rule s.

21

пример @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;
    }
}

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

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

7

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

1

стиль 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