at规则@charset在外部样式表文件中使用。指定此样式表使用的字符编码。此规则后的分号是必需的，如果省略，将生成错误消息。外部css文件中的写法如下：@charset"utf-8";body{sRules}div{sRules}...@import指定导入的外部样式表和目标媒体。@importurl(example.css)屏幕和(min-width:800px);@importurl(example.css)屏幕和(width:800px),(color);@importurl(example.css)屏幕和(min-device-width:500px)and(max-device-width:1024px);@media使用@media查询，可以为不同的媒体类型定义不同的样式。@media可以为不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式页面，@media非常有用。当您调整浏览器大小时，页面也会根据浏览器的宽度和高度重新呈现。@mediascreenand(max-width:300px){body{background-color:lightblue;}}@counter-style使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等。@counter-style计数器名称{系统：算法；范围：使用范围；符号：符号；或附加符号：符号前缀：前缀；后缀：后缀；pad：零填充（例如01,02,03）；negative：负数策略；fallback：错误后的默认值；speakas:speechstrategy;}使用@key-frames定义动画关键帧逐渐移动一个div元素200像素的详细方法：@keyframesmymove{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和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这个类似于metaname="viewport"，但是支持不如使用meta，所以推荐使用metaCSS来支持一批具体计算函数：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标记、子孙依次使用圆、方、框。attr()attr()函数返回所选元素的属性值。content和attr()一起使用attr属性通常和自定义属性data-一起使用，因为其他传统属性虽然也可以存储值，但通常不适合存储表达性文本
