13css语法——带@的规则

13css语法——带@的规则

1.css语法的总体结构

2.at 规则

1.css语法的总体结构

由两种规则列表构成：

• at 规则
• 普通规则

2.at 规则

2-1 @charset

@charset用于提示css文件使用的字符编码方式，使用时必须放在最前面。

@charset "utf-8"

2-2 @import

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

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

2-3 @media

@media 即@meida query使用的规则，它能够对设备的类型进行一些判断。

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

2-4 @page

用于分页媒体访问网页时的表现设置。

2-5 @counter-style

产生一种数据。用于定义列表项的表现。

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

2-6 @key-frames

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

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

2-7 @fontface

用于定义一种字体。

@font-face {font-family: Gentium;src: url(.woff);
}p { font-family: Gentium, serif; }

2-8 @support

检查环境的特性，它与media比较类似。

2-8 @namespace

用于跟XML命名空间配合的一个规则，表示内部的css选择器全都带上特定命名空间。

2-9 @viewport

用于设置视口的一些特性，不过兼容性目前不好，多数时候被HTML的meta代替。