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

CSS 中的 at 符号 (@) 是什么意思？

  • 772

在 CSS 中，我们可以用哈希 ( #) 为 id 定义样式，用点 ( ) 为类定义样式.，但有些规则前面有 at 符号 ( @)，例如：

@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 */
}

前期是什么@意思？有多少个，它们是用来做什么的？他们有什么特别之处？

css

1 Answers

  1. Best Answer

    @的规则

    （At-Rules 或at-rules）

    它们是封装了一组规则的 CSS 声明，但与 HTML/XML 元素没有直接关系。它们通过扩展 CSS 的功能来控制样式的应用方式，并且每个样式都有自己的语法。

    通用规则

    它们适用于所有 CSS

    嵌套规则

    它们可以作为样式声明或条件。


    例子

    1.定义UTF-8字符集

    它必须是 CSS 中的第一个元素，并且前面不能有任何其他字符。

    @charset "UTF-8";

    2.根据加载它的文档定义不同的规则

    使用@document，我们可以在同一个 CSS 中为主页定义一个背景图像，并为以“论坛”开头的那些定义另一个背景图像。

    @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. 使用 Google Fonts 中的字体

    此示例引用Source Sans Pro 字体。

    @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;
}

    然后可以在 CSS 中使用，例如：

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

    4. 当设备处于横向模式时包含另一个 CSS

    在下文中，包含了外部 CSS ruta_de_otro.css。

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

    5.根据兼容性定义2个属性集

    这样，根据浏览器是否支持flex 属性定义了 2 个组。

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

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

    6. 使用@media 查询来区分设备

    • 34