CSS @规则

最近在看极客时间winter大神的重学前端系列,遇到了许多不常用但是很重要的知识点.感觉视野得到了极大的开阔(打个广告,哈哈).

其中css @规则令人印象深刻。简单的做下笔记:

@namespace

这个css规则还是蛮重要的,MDN有相关介绍--https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */
a {}

/* 匹配所有的 SVG <a> 元素 */
svg|a {}

/* 匹配 XHTML 和 SVG <a> 元素 */
*|a {}

说的简单点就是:为了分别给不同命名空间下的相同元素可以分别设置样式.

@media

想必是好多响应式设计都是借助于这一规则。

它可以针对不同媒体使用响应式,因为我么多说媒体是手机、pad、computer.

它还有以下媒体类型

链接地址为如下:

https://www.runoob.com/cssref/css3-pr-mediaquery.html

@ support

检测是否支持指定的CSS属性.

例如：

  @supports (display:flex) {

    section { display: flex }
    ...
    }

如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式.

@charset

@charset 用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。

@import

@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。

@import "mystyle.css";
@import url("mystyle.css")

通常此指令放在css文件其实位置;

@ counter-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
 @counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
ul {
   list-style: circled-alpha;
}
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>

    </ul>
</body>
</html>

代码效果如下:

测了下谷歌、IE、360、火狐浏览器，只有火狐支持此规则。

@ key-frames

keyframes 产生一种数据，用于定义动画关键帧。

@ fontface

fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }