CSS-@规则(At-rules)常用语法分享

悠悠 2024-03-22 20:11 25阅读 0赞

![5975ec8584e2c77560844d0b7c590631.jpeg][]

At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可，这篇文章主要介绍了CSS-@规则(At-rules)常用语法使用总结,需要的朋友可以参考下

At-rules规则是目前CSS中一种常见的语法规则，它使用一个`"@"`符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。  
这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。

### 常用规则 ###

#### @import ####

@import 主要用于从其他样式表导入新的样式规则，语法：`@import url|string list-of-mediaqueries;`。

*  url|string：需要引入的样式资源路径，相对路径或绝对路径都可以；
 *  list-of-mediaqueries：逗号分隔的条件列表，判断什么条件下才引入该样式资源，支持媒体查询条件。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>@import </code><code>"./reset.css"</code><code>;</code> <code>@import </code><code>url</code><code>(</code><code>"./reset.css"</code><code>)</code> </td> 
 </tr> 
 </tbody> 
</table>

当使用条件判断时，可以使用媒体查询条件。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>/* 宽度小于1000px才会生效 */</code> <code>@import </code><code>"./reset.css"</code> <code>screen</code> <code>and (</code><code>max-width</code><code>: </code><code>1000px</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

另外，当在html文件或样式文件中使用该语法(不使用现代框架)，有两点需要注意：

* 引入位置：必须位于样式文件或`<style>`区块的头部，前面不可以出现其他css样式，但可以在`@charset` 后面。
 * 不能在条件嵌套语法中使用。

当使用vue等框架的时候，则可以在 `@import` 前出现css样式，也能在条件嵌套语法中使用，是因为导入的样式资源会被解析具体的样式到页面上。

#### @font-face ####

@font-face 用于加载自定义字体。属于目前前端比较常用的语法，也有多开源的字体图标库可以使用。  
既支持提供字体资源文件路径进行加载，也支持用户本地安装的字体加载。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>@font-face { </code> <code>&nbsp;&nbsp;</code><code>font-family</code><code>: </code><code>"iconfont"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>src</code><code>: </code><code>url</code><code>(</code><code>'https://at.alicdn.com/t/font_....ttf?t=1545807318834'</code><code>);</code> <code>}</code> <code>@font-face { </code> <code>&nbsp;&nbsp;</code><code>font-family</code><code>: </code><code>"iconfont"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>src</code><code>: </code><code>url</code><code>(</code><code>'./font_985780_km7mi63cihi.ttf?t=1545807318834'</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如上，就是一个加载字体资源的示例，一个加载cdn上的地址，一个加载本地文件。

@font-face 定义了一个CSS区块，有多个属性取值：

*  font-family：指定字体名字，被用于font或font-family属性；
 *  src：加载字体资源；
    
    url()：加载字体资源文件；
    
    local()：加载本地电脑字体名称，如 `src: local("Arial");`；
 *  font-style：对src指定字体的描述；
 *  font-variant
 *  font-weight

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>@font-face { </code> <code>&nbsp;&nbsp;</code><code>font-family</code><code>: </code><code>"sys-Arial"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>src</code><code>: </code><code>local</code><code>(</code><code>"Arial"</code><code>);</code> <code>&nbsp;&nbsp;</code><code>font-weight</code><code>: </code><code>normal</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如上，使用local加载当前电脑系统的字体名称。

#### @charset ####

@charset 为样式表文件指定所需要使用的字符编码，只能在CSS文件中使用，语法：`@charset "charset";`。

*  charset：指定使用的字符集。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>@charset </code><code>"UTF-8"</code><code>;</code> </td> 
 </tr> 
 </tbody> 
</table>

特点：

* 在样式表文件中使用，不能在html文件的`<style>`区块或元素内样式属性中使用。
 * 必须出现在样式表文件的最前面。
 * 使用有效的字符编码和双引号，并且中间只能间隔一个空格字符，且以分号结尾。
 * 不能在条件嵌套语法中使用。
 * 如果有多个@charset声明，则只有第一个会生效。

浏览器解析样式表文件使用字符编码的顺序：

*  文件的编码格式；
 *  http请求响应中的charset属性值；
 *  @charset；
 *  link设置；
 *  默认UTF-8；

#### @keyframes ####

@keyframes 通过定义动画序列中的关键帧的样式，用来控制CSS动画的中间步骤。  
语法定义：`@keyframes animationname { keyframes-selector { css-styles; } }`。

*  animationname：动画名称，作为动画引用时的标识符；
 *  keyframes-selector：关键帧的名称选择器，用于指定关键帧被用于动画过程中的哪个节点，一般是时间节点，有两种取值方式：
    
    百分比：0% - 100%，时间百分比的节点
    
    from和to：from等同起始时间from，to等同结束时间
 *  css-styles：指定当前关键帧的样式属性值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>@keyframes dropIn { </code> <code>&nbsp;&nbsp;</code><code>from { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>opacity: </code><code>0</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>to { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>opacity: </code><code>1</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>@keyframes wave { </code> <code>&nbsp;&nbsp;</code><code>0%</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform: translateY(</code><code>0</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>45%</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform: translateY(</code><code>-100%</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>100%</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform: translateY(</code><code>0</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如上，使用两种方式定义的关键帧动画样式。

特性说明：

*  当没有指定开始或结束状态，则将元素的享有样式作为开始或结束状态；
 *  当有多个同名称的关键帧时，样式属性相同以最后一次为准，样式属性不同则会合并所有属性共同起作用；
 *  如果再关键帧样式中使用不能用作动画的属性，会被忽略；
 *  在关键帧中使用 `!important` 限定样式会被忽略，不起作用。

为了获得最佳动画体验，应该始终定义开始和结束状态。

#### @media ####

@media 媒体查询，是基于不同的媒体查询结果定义不同的样式。多用于针对不同屏幕尺寸进行差异化的样式设置，做一些响应式页面设计。另外，如果缩放浏览器的大小，也可以根据查询宽高重新渲染页面样式等。

语法： `@media mediatype and|not|only (media feature) { CSS-Style; }`。

说明：

*  mediatype：媒体类型，描述设备类别，一般有 all、print、screen、speech，默认all：
    
     *  all：所有设备；
     *  print：打印预览模式；
     *  screen：用于屏幕；
     *  speech：语音合成器；
 *  媒体特性(media feature)：描述设备、环境的具体条件特征；必须使用括号括起来，常用的有：
    
     *  宽高类：width、max-width、min-width、height、max-height、min-height等；
     *  其他：color、grid、orientation、resolution、scan等；
 *  逻辑操作符：and、not、only、，：
    
     *  and：多个规则组合，每条都满足才行；
     *  not：否定某个查询规则；
     *  only：整个查询匹配时才满足；
     *  逗号，：将多个查询组合，一条满足即可，类似 `or`;

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>@media </code><code>screen</code> <code>(</code><code>max-width</code><code>: </code><code>1000px</code><code>) { </code> <code>&nbsp;&nbsp;</code><code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>/*或者嵌套*/</code> <code>@media </code><code>screen</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>@media (</code><code>max-width</code><code>: </code><code>1000px</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如上示例，即是我们经常使用的方式。

`@media` 媒体查询也能作为 `@import` 的条件使用，可见上面已有介绍。

##### link和style中使用 #####

在引入样式表的 `<link>` 语句中，也可以使用媒体查询，根据不同的条件加载不同的样式文件：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;link rel=</code><code>"stylesheet"</code> <code>media=</code><code>"mediatype and|not|only (media feature)"</code> <code>href=</code><code>"./reset.css"</code><code>&gt;</code> <code>&lt;link rel=</code><code>"stylesheet"</code> <code>media=</code><code>"screen and (max-width: 1000px)"</code> <code>href=</code><code>"./reset.css"</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在 `<style>` 样式区块也可以使用媒体查询：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;style media=</code><code>"screen and (max-width: 1000px)"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>div { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&lt;/style&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

##### JS检测媒体查询 #####

使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。  
使用方式：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>// 获取媒体查询MediaQueryList对象，有matches</code> <code>const screenMediaQueryList = Window.matchMedia(</code><code>'(max-width: 1000px)'</code><code>)</code> <code>console.log(</code><code>1</code><code>, screenMediaQueryList)</code> <code>// matches: true&nbsp; -- 当前媒体查询规则已生效，为false则不生效</code> <code>// media: </code><code>"(max-width: 1000px)"</code> <code>screenMediaQueryList.addEventListener(</code><code>'change'</code><code>, (res) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>2</code><code>, res)</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

可以获取当前是否已使用该媒体查询规则，或者监听媒体查询状态的变化事件。

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[5975ec8584e2c77560844d0b7c590631.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8b8805d07a5d41f2b288d05ad08e2a6a.png
[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com