什么是 at-rules 以及为什么在 CSS 中使用“at”？

在本教程中，我们将了解 At-rules 及其在 CSS 中的用法。 At-rules 只是一些 CSS 语句，它们指示 CSS 如何在特定条件下运行。即，At-rules 允许开发人员根据某些条件更改网站的设计或布局。每个 At-rule 命令都以“@”开头，后跟标识符，并以分号“;”结尾或下一个 CSS 块。

句法：

• 常规规则：

@identifier (condition);

• 嵌套规则：

@identifier (condition) {}

我们将通过示例理解这两种语法。让我们首先讨论@charset。

• @charset：它定义了网站要使用的字符集。如果 CSS 文件包含非 ASCII字符，我们可以轻松使用它。可以使用的字符集列表是 UTF-8、iso-8859-15、iso-8859-1 等。您可以查看任何特定的字符集，但最常见和流行的字符集是网站上的 UTF-8。

例子：

@charset "UTF-8";

• @import：用于从位于本地系统或互联网的其他 CSS 文件中导入 CSS 样式或规则。它通常在样式表的顶部提到，指示包含外部样式表。下面的示例说明了我们通常使用的各种 @import。

示例：在此示例中，我们将创建 index.html 文件以及创建所需的样式表。

索引.html

HTML

  

    
    
  
    
      
    

  

    
GeeksforGeeks

  

在index.html 中，我们导入了 style.css，它只会改变标题“GeeksforGeeks”的颜色。

样式.css：

@import 'mobile.css' screen and (max-width: 300px);
@import url('desktop.css') screen and (min-width: 300px);

移动.css：

.heading{
    color: red;  
}

桌面.css：

.heading{
    color: green;  
}

说明：让我们一一了解CSS文件。 mobile.css文件将标题的颜色更改为红色，而desktop.css更改为绿色。现在，我们不再使用单个文件style.css进行媒体查询，而是为桌面屏幕和移动屏幕使用了两个不同的文件。可以看到，我们使用了带有“ max-width ”的“ and ”条件来保证媒体查询。

输出：在输出中，我们在桌面和移动屏幕的浏览器上运行。

@进口

• @namespace：用于告诉 CSS 引擎所有的 XML 命名空间都将在 CSS 样式表中使用。

例子：

@namespace url/String; /* Url or string of XML namespace */


@namespace anything url/String; /* Anything is identifie */

在选择器中使用它

anything|title {your style}

• @media：它用于基于媒体查询结果的部分或部分 HTML 代码。例如，响应式导航栏是使用媒体屏幕宽度制作的。

示例：在此示例中，我们将使用与上面相同的代码index.html 。

HTML

  

    
    
  
    

  

    
GeeksforGeeks

  

说明：这里，当屏幕宽度小于 450 px 时，标题的颜色将是红色，否则为绿色。 @media 与屏幕一起使用以获取我们要检查屏幕宽度的正确上下文，条件是“min-width: 450px”。您还可以使用更多查询。

输出：

@媒体

• @support：用于了解浏览器的支持能力，即。如果条件满足，那么它将为这些元素应用样式。例如，如果浏览器支持网格。

例子：

HTML

  

    
    
    
    

  

    

        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
        
Geeks
    

  

输出：

网格布局

如果浏览器不支持display: grid属性，那么您可以使用以下代码：

@supports not (display: grid)
{
 /*code for no grid support*/
}

• @page：它用于修改一些 CSS 属性并在打印文档时将样式应用于各个页面。

例子：

HTML

  

    
    
  
    

  

    

        
Welcome to GeeksforGeeks
  
        

            Here we can find lot's of tutorials 
            related to Programming, Data Structures 
            and Algorithms. I have found tutorials 
            and articles related to Array, Linked 
            Lists, HashMap, Stack, Queue, Binary 
            Trees, Binary Search,tree, heap, hash, 
            graph matrix and lots and lots. There 
            are lots of courses at geeksforgeeks.org 
            related to competitve programming,
            interview preparation. The only thing 
            that is required are keen to learn and 
            learn.
        
    

  

说明：在@page at-rule 中，我们提到了如何打印页面的细节。如果您右键单击网页，则会出现打印选项，打印时会显示指定的输出。

输出：

@页

• @font-face：它指定用于显示文本的自定义字体。可以从服务器或系统上的任何位置加载字体。首先，我们必须定义字体名称，然后提供要从中加载的字体的 URL。

例子：

HTML

  

    
    
  
    

  

    

  
        

            GeeksforGeeks is website for programming 
            geeks. It has tons of articles for 
            programming in almost all popular 
            programming language.
        
    

  

我们需要从 fonts.google.com 下载 Roboto 字体，点击这里下载。确保必须将其下载到放置 index.html 的同一工作目录中，才能正常工作。

输出：

@字体脸

• @keyframes：它逐渐从一组 CSS 变为另一组 CSS 样式。

例子：

HTML

  

    
    
  
    

  

    

        

            GeeksforGeeks is website for programming 
            geeks. It has tons of articles for 
            programming in almost all popular 
            programming language.
        
    

  

语法非常清晰。首先，我们将容器与动画联系起来。接下来，我们使用与#page 中同名的@keyframes 来制作动画。

输出：

@关键帧

此外，您可以按如下方式提供百分比变化：

@keyframes gfgexpanding{
  0%    {font-size: 12px;}
  25%    {font-size: 16px;}
  50%    {font-size: 18px;}
  100%    {font-size: 24px;}
}

• @counter-style：它允许您定义不属于预定义样式集的计数器样式。 @counter-style规则定义了如何将一个计数器值转换为另一个字符串。

句法：

@counter-style counter-style-name {
  system: system;
  symbols: symbols;
  additive-symbols: additive-symbols;
  negative: negative-symbol;
  prefix: prefix;
  suffix: suffix;
  range: range;
  pad: padding;
}

例子：

HTML

  

    
    
  
    

  

    

        

            
Geeks
            
for
            
Geeks
        
    

  

这里重要的是系统。如果是字母，则必须提及所有字符，如果是数字，则必须提及所有数字。

输出：

@counter 风格