CSS语法总结

CSS中除了我们经常写的那些内容外 还有像@charset @import @namespce @keyframes @media @page @font-face @viewport等。

　　

　　1, @charset 在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。

　　 

@charset "utf-8";
html{***}

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

　　语法：

　　@import <url> <media_query_list>

　　<url>：使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url

　　<media_query_list>：指定媒体类型和查询条件。

　　<media_query_list>：[<media_query>[',' <media_query>]*]?

　　<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

　　<expression>：'('<media_feature>[:<value>]?')'

　　

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

　　3，@namespce 在CSS中声明一个XML命名空间的前缀。当你使用的选择器仅匹配特定命名空间下的元素，则这东西就很管用。

　　4，@keyfames 用于设置动画

　　5，@media 指定样式表规则用于指定的媒体类型和查询条件。

　　　　语法：@media：<media_query_list>，可以用于@meida 和@import 以及HTMl中。

　　　　

@media screen and (800px){ … }

@import url(example.css) screen and (800px);

<link media="screen and (800px)" rel="stylesheet" href="example.css" />

　　　　所有浏览器都适用的媒介类型有：all,screen,print。 handheld适用于chrome safari 以及opera.

　　6，@page 检索或指定显示对象容器时使用的页面类型

　　7，@font-face 设置嵌入HTML文档的字体。通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。

　　　　语法：

　　　　　　@font-face{font-family:name;src:<url>;sRules;}

　　　　　　<name>：字体名称

　　　　　　<url>：使用绝对或相对地址指定OpenType字体

　　　　　　<sRules>：样式表定义。包括（font-style：设置文本样式。

font-variant：设置文本是否大小写。

font-weight：设置文本的粗细。

font-stretch：设置文本是否横向的拉伸变形。

font-size：设置文本字体大小。）

@font-face{
    font-family:YH;
    src:url(http://domain/fonts/MSYH.TTF);
}     //media query将viewport小于400px缩放至320px宽。

　　8，@viewport 需要加前缀

　　　　

@media screen and (max- 400px) {
   @-ms-viewport { width: 320px; }
   ...
}

　　9,!important用于提升指定样式规则的应用优先权，在IE6以及以前的浏览器不支持。

　　　　

.classes{
        color:#f00!important;
        color:#ff0;      
}   表现为红色，而非黄色。但是在IE6中表现为黄色。