At-rules规则是目前CSS中一种常见的语法规则,它使用一个"@"符号加一个关键词定义,后面跟上语法区块,如果没有则以分号结束即可,这篇文章主要介绍了CSS-@规则(At-rules)常用语法使用总结,需要的朋友可以参考下
At-rules规则是目前CSS中一种常见的语法规则,它使用一个"@"
符号加一个关键词定义,后面跟上语法区块,如果没有则以分号结束即可。
这种规则一般用于标识文档、引入外部样式、条件判断等等,本文是对该规则的使用总结。
常用规则
@import
@import 主要用于从其他样式表导入新的样式规则,语法:@import url|string list-of-mediaqueries;
。
- url|string:需要引入的样式资源路径,相对路径或绝对路径都可以;
- list-of-mediaqueries:逗号分隔的条件列表,判断什么条件下才引入该样式资源,支持媒体查询条件。
1 2 |
|
当使用条件判断时,可以使用媒体查询条件。
1 2 |
|
另外,当在html文件或样式文件中使用该语法(不使用现代框架),有两点需要注意:
- 引入位置:必须位于样式文件或
<style>
区块的头部,前面不可以出现其他css样式,但可以在@charset
后面。 - 不能在条件嵌套语法中使用。
当使用vue等框架的时候,则可以在 @import
前出现css样式,也能在条件嵌套语法中使用,是因为导入的样式资源会被解析具体的样式到页面上。
@font-face
@font-face 用于加载自定义字体。属于目前前端比较常用的语法,也有多开源的字体图标库可以使用。
既支持提供字体资源文件路径进行加载,也支持用户本地安装的字体加载。
1 2 3 4 5 6 7 8 |
|
如上,就是一个加载字体资源的示例,一个加载cdn上的地址,一个加载本地文件。
@font-face 定义了一个CSS区块,有多个属性取值:
- font-family:指定字体名字,被用于font或font-family属性;
- src:加载字体资源;
url():加载字体资源文件;
local():加载本地电脑字体名称,如
src: local("Arial");
; - font-style:对src指定字体的描述;
- font-variant
- font-weight
1 2 3 4 5 |
|
如上,使用local加载当前电脑系统的字体名称。
@charset
@charset 为样式表文件指定所需要使用的字符编码,只能在CSS文件中使用,语法:@charset "charset";
。
- charset:指定使用的字符集。
1 |
|
特点:
- 在样式表文件中使用,不能在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:指定当前关键帧的样式属性值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
如上,使用两种方式定义的关键帧动画样式。
特性说明:
- 当没有指定开始或结束状态,则将元素的享有样式作为开始或结束状态;
- 当有多个同名称的关键帧时,样式属性相同以最后一次为准,样式属性不同则会合并所有属性共同起作用;
- 如果再关键帧样式中使用不能用作动画的属性,会被忽略;
- 在关键帧中使用
!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
;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
如上示例,即是我们经常使用的方式。
@media
媒体查询也能作为 @import
的条件使用,可见上面已有介绍。
link和style中使用
在引入样式表的 <link>
语句中,也可以使用媒体查询,根据不同的条件加载不同的样式文件:
1 2 3 |
|
在 <style>
样式区块也可以使用媒体查询:
1 2 3 4 5 |
|
JS检测媒体查询
使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用方式:
1 2 3 4 5 6 7 8 9 |
|
可以获取当前是否已使用该媒体查询规则,或者监听媒体查询状态的变化事件。