你不知道的css（一）

CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则，另一种是 qualified rule，也就是普通规则。

at 规则

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

@charset "utf-8";

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

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

• @media：它能够对设备的类型进行一些判断。在 media 的区块内，是普通规则列表。

@media print {
    body { font-size: 10pt }
}

• @page：用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

• @ counter-style：产生一种数据，用于定义列表项的表现

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

• @ key-frames：用于定义动画关键帧。

@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

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

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

p { font-family: Gentium, serif; }

• @ support：检查环境的特性，它与 media 比较类似。
• @ namespace：用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
• @ viewport：用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替。
• @color-profile：是 SVG1.0 引入的 CSS 特性，但是实现状况不怎么好。
• @document：还没讨论清楚，被推迟到了 CSS4 中。
• @font-feature-values 。

普通规则

普通规则这里我就不多讲，只是列出一些少见的，或者新出来的一些操作。

在CSS Variables 标准中，以双中划线开头的属性被当作变量，与之配合的则是 var 函数：

/* 在申明全局变量的时候,:root会很有用 */

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

CSS 支持一批特定的计算型函数：

• calc() ：是基本的表达式计算，它支持加减乘除四则运算。在针对维度进行计算时，calc() 函数允许不同单位混合运算。

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

• max()：表示取两数中较大的一个

div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}

• min()：表示取两数之中较小的一个
• clamp()：则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。

clamp(4,6,22)
返回 6，因为 22 大于 6 而 6 是范围的最大数值。

clamp(4,6,2)
返回 4，因为 2 小于 4 而 4 是范围的最小数值。

clamp(4,6,5)
返回 5，因为该数值位于范围内。

• attr()：允许 CSS 接受属性值的控制。