当前位置 : 主页 > 网页制作 > css >

CSS-@规则(At-rules)常用语法使用总结

来源:互联网 收集:自由互联 发布时间:2023-03-22
目录 常用规则 @import @font-face @charset @keyframes @media link和style中使用 JS检测媒体查询 非常用规则 @supports 其他 At-rules规则是目前CSS中一种常见的语法规则,它使用一个 @ 符号加一个关键词
目录
  • 常用规则
    • @import
    • @font-face
    • @charset
    • @keyframes
    • @media
      • link和style中使用
      • JS检测媒体查询
  • 非常用规则
    • @supports
      • 其他

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

      常用规则

      @import

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

      • url|string:需要引入的样式资源路径,相对路径或绝对路径都可以;
      • list-of-mediaqueries:逗号分隔的条件列表,判断什么条件下才引入该样式资源,支持媒体查询条件。
      @import "./reset.css";
      @import url("./reset.css")

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

      /* 宽度小于1000px才会生效 */
      @import "./reset.css" screen and (max-width: 1000px); 

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

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

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

      @font-face

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

      @font-face {
        font-family: "iconfont";
        src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
      }
      @font-face {
        font-family: "iconfont";
        src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
      }

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

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

      • font-family:指定字体名字,被用于font或font-family属性;
      • src:加载字体资源;

        url():加载字体资源文件;

        local():加载本地电脑字体名称,如 src: local("Arial");

      • font-style:对src指定字体的描述;
      • font-variant
      • font-weight
      @font-face {
        font-family: "sys-Arial";
        src: local("Arial");
        font-weight: normal;
      }

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

      @charset

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

      • charset:指定使用的字符集。
      @charset "UTF-8";

      特点:

      • 在样式表文件中使用,不能在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:指定当前关键帧的样式属性值。
      @keyframes dropIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes wave {
        0% {
          transform: translateY(0);
        }
        45% {
          transform: translateY(-100%);
        }
        100% {
          transform: translateY(0);
        }
      }

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

      特性说明:

      • 当没有指定开始或结束状态,则将元素的享有样式作为开始或结束状态;
      • 当有多个同名称的关键帧时,样式属性相同以最后一次为准,样式属性不同则会合并所有属性共同起作用;
      • 如果再关键帧样式中使用不能用作动画的属性,会被忽略;
      • 在关键帧中使用 !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;
      @media screen (max-width: 1000px) { 
        div {
          background-color: red;
        }
      }
      
      /*或者嵌套*/
      @media screen {
        @media (max-width: 1000px) {
          div {
            background-color: red;
          }
        }
      }

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

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

      link和style中使用

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

      <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">
      
      <link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">

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

      <style media="screen and (max-width: 1000px)">
        div {
          background-color: red;
        }
      </style>

      JS检测媒体查询

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

      // 获取媒体查询MediaQueryList对象,有matches
      const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
      console.log(1, screenMediaQueryList)
      // matches: true  -- 当前媒体查询规则已生效,为false则不生效
      // media: "(max-width: 1000px)"
      
      screenMediaQueryList.addEventListener('change', (res) => {
        console.log(2, res)
      })

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

      非常用规则

      以下是一些使用较少的@规则。

      @supports

      @supports 用于指定依赖于浏览器一个或多个特定CSS功能的支持申明。常用来判断当前浏览器是否支持某个CSS特性功能,所以又被称为特性查询。
      ie不支持。

      如判断自定义属性,详见自定义属性知识介绍。

      @supports ((--a: 0)) {
        /* 支持自定义属性 */
      }
      @supports (not (--a: 0)) {
        /* 不支持自定义属性 */
      }

      语法,由一组样式声明和一条支持条件构成,支持条件可以是多条,可以使用 and、or、not 等进行结合处理;还可以使用圆括号调整优先级。

      /* 浏览器支持grid */
      @supports (display: grid) {
        div {}
      }
      
      /* 不支持grid */
      @supports not (display: grid) {
      }
      
      /* 不支持gri和flex */
      @supports not ((display: grid) and (display: flex)) {
      }

      其他

      • @namespace:是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。
      • @page:主要用于打印文档时修改某些CSS属性,兼容性不高。
      • counter-style:定义如何把一个计数器的值转化为字符串表示。

      到此这篇关于CSS-@规则(At-rules)常用语法使用总结的文章就介绍到这了,更多相关css @规则At-rules内容请搜索自由互联以前的文章或继续浏览下面的相关文章,希望大家以后多多支持自由互联!

      上一篇:css实现简易报警灯的示例代码
      下一篇:没有了
      网友评论