at 规则

@charset

在外部样式表文件内使用。指定该样式表使用的字符编码。

该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。在外部css文件中写法如下：

@charset "utf-8";body{sRules}div{sRules}...

@import

指定导入的外部样式表及目标媒体。

@import url(example.css) screen and (min-width:800px);@import url(example.css) screen and (width:800px),(color);@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

@media

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (max-width: 300px) {    body {        background-color:lightblue;    }}

@counter-style

使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

@counter-style counter名字{     system  : 算法;     range   : 使用范围;     symbols : 符号; or additive-symbols: 符号     prefix  : 前缀;     suffix  : 后缀;     pad     : 补零(eg. 01,02,03);     negative: 负数策略;     fallback: 出错后的默认值;     speakas : 语音策略;}

@key-frames

定义动画的关键帧

使一个div元素逐渐移动200像素：

@keyframes mymove{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}}

@font-face

使用您需要的字体,当今流行的fontawesome就是用这种方式加载图标的

新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),     url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}

viewport

这个和meta name="viewport"类似，但支持没有使用meta的好，所以建议使用meta

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

calc() max() min() clamp() toggle() attr()

calc()

calc() 函数用于动态计算长度值。

● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 "+", "-", "*", "/" 运算； ● calc()函数使用标准的数学运算优先级规则；

max()

用于比较数值的大小并取出最大的那个。

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

min()

用于比较数值的大小并取出最小的那个。

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

clamp()

mozilla 上说没有浏览器支持，暂不研究

toggle()

允许子孙元素使用取值序列中的值循环替换继承而来的值。

在更老的版本中使用的是：cycle()

ul {    list-style-type: toggle(disk, circle, square, box);}

在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。

attr()

attr() 函数返回选择元素的属性值。

content和attr()配合使用

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字

    
div[data-line]:after { content: attr(data-line);/* 属性名称上不要加引号！ */ }