Home / Questions / 17860
Accepted
Alvaro Montoro
Asked: 2020-07-27 20:42:50 +0800 CST 2020-07-27 20:42:50 +0800 CST

What does the at sign (@) mean in CSS?

  • 772

In CSS we can define styles for id's with the hash ( #) and for classes with the dot ( .), but there are some rules that are preceded by the at sign ( @) such as:

@font-face {
    /* definición de fuente propia */
}

@media print {
    /* estilos a la hora de imprimir */
}

@keyframes miAnimacion {
    /* definición de pasos para una animación */
}

What does the @before period mean? How many are there and what are they used for? What's so special about them?

css

1 Answers

  1. Best Answer

    Rules of @

    (At-Rules or at-rules )

    They are CSS declarations that encapsulate a set of rules, but are not directly related to HTML/XML elements. They control how styles are applied by extending the power of CSS and each have their own syntax.

    General rules

    They apply to all CSS

    • @charsetDefines the character set used in the CSS.
    • @importAllows you to include other CSS.
    • @namespaceSets the XML to be used.

    nested rules

    They can be as a style statement or as conditionals.


    examples

    1. Define the UTF-8 character set

    It must be the first element in the CSS, and cannot be preceded by any other character.

    @charset "UTF-8";

    2. Define different rules depending on the document that loads it

    With @document we can define, within the same CSS, a background image for the main page and another one for those that start with "forum".

    @document url(http://dominio.com/index.html) {
    body {
        background-image: url("ppal.jpeg");
    }
}

@document url-prefix(http://dominio.com/foro) {
    body {
        background-image: url("msj.jpeg");
    }
}

    3. Use a font from Google Fonts

    This example references the Source Sans Pro font .

    @font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNV_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

    and then can be used in the CSS like:

    div, p {
  font-family: 'Source Sans Pro', 'Otra Fuente', 'etc';
}

    4. Include another CSS when the device is in landscape mode

    In the following, the external CSS is included ruta_de_otro.css.

    @import url('ruta_de_otro.css') screen and (orientation:landscape);

    5. Define 2 property sets based on compatibility

    In this way 2 groups are defined, according to whether the browser supports flex properties or not.

    @supports (display: flex) {
    div { display: flex; }
}

@supports not (display: flex) {
    div { display: none; }
}

    6. Use a @media query to differentiate between devices

    • 34