css语法规则.docx

1、css语法规则1 charset !-1 描述： charset ; 取值： ： 字符编码。如：charset utf-8; 说明： 在外部样式表文件内使用。指定该样式表使用的字符编码。 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。 在外部css文件中写法如下： 示例代码： charset utf-8; bodysRules divsRules . - body background-color: deepskyblue; 2 comment comment body background-color: deepskyblue; .test color: #f00; /*红色*

2、/ CSS中的注释语法：/* 注释的内容 */ 3 font-face font-face !- 描述： 设置嵌入HTML文档的字体。 通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。 微软的IE5已经是开始支持这个属性，但是只支持微软自有的.eot(Embedded Open Type)格式，而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始

3、已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。 语法： font-facefont-family:name;src:;sRules; 取值： ： 字体名称 ： 使用绝对或相对地址指定OpenType字体 ： 样式表定义 兼容性： 1、IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。 2、IE9.0-10.0部分支持ttf和otf字体格式。 - font-face font-family: YH; src: url(http:/domain/fonts/MSYH.TTF); body background-

4、color: deepskyblue; font-family: YH; 如果你的机器没有安装微软雅黑Microsoft YaHei，可以玩玩看。如果你用的是老版本IE，很遗憾你得找找看.eot格式的该字体 4 import import !- 描述： import ：, *? ：only | not? and * | and * ：(:?) 取值： ： 使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url ： 指定媒体类型和查询条件。 说明： 指定导入的外部样式表及目标媒体。 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式

5、表将无法正确导入，并会生成错误信息。 IE使用import无法引入超过35条的样式表。 使用url(url)和直接使用url需要注意的地方： 示例代码： import url(global.css); import url(global.css); import global.css; 以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。 指定媒体查询： 示例代码： import url(example.css) screen and (min-width:800px); import url(example.css) scr

6、een and (width:800px),(color); import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px); - body background-color: deepskyblue; import url(style.css) screen, print; 5 important !important body background-color: deepskyblue; .test color: #f00!important; color: #000; .t

7、est2 color: #f00!important; .test2 color: #000; 同一条样式内，!important将在IE6及以下浏览器中失效 在分散的样式条目内，IE6及以下浏览器对!important的支持与其它浏览器一致 6 keyframe !- 作者：刘志宝 时间：2016-07-15 描述：指定动画名称和动画效果。 keyframes定义的动画名称用来被animation-name所使用。 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态： 语法： keyframes ; ： from | to | sRules , from |

8、 to | sRules * 取值： ： identifier定义一个动画名称 ： 定义动画在每个阶段的样式，即帧动画。 示例代码： keyframes testanimations fromopacity:1; toopacity:0; 其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。 如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式： 示例代码： keyframes testanimations fromtransform:translate(0,0); 20%transform:translate(20,20); 40%transform:tra

9、nslate(40,0); 60%transform:translate(60,20); 80%transform:translate(80,0); totransform:translate(100,20); 当然，也可以不适用关键字from和to，而都使用： 示例代码： keyframes testanimations 0%transform:translate(0,0); 20%transform:translate(20,20); 40%transform:translate(40,0); 60%transform:translate(60,20); 80%transform:tran

10、slate(80,0); 100%transform:translate(100,20); 注意，这里的0%不能简写成0。 - keyframes body background-color: deepskyblue; #sport position: relative; width: 500px; height: 400px; border: 1px solid #ddd; #staff position: absolute; z-index: 3; bottom: 10px; left: 10px; overflow: hidden; width: 180px; height: 8px;

11、border-radius: 3px; background: #ddd; line-height: 20; -moz-animation: staff 3s linear; -webkit-animation: staff 3s linear; -o-animation: staff 3s linear; -ms-animation: staff 3s linear; animation: staff 3s linear; #ball position: absolute; z-index: 3; bottom: 20px; left: 90px; overflow: hidden; wid

12、th: 30px; height: 30px; border-radius: 15px; box-shadow: 0 0 10px rgba(204, 102, 0, .8); background: #F6D66E; background: -moz-linear-gradient(top, #fff, #F6D66E); background: -webkit-linear-gradient(top, #fff, #F6D66E); background: -o-linear-gradient(top, #fff, #F6D66E); background: -ms-linear-grad

13、ient(top, #fff, #F6D66E); background: linear-gradient(top, #fff, #F6D66E); line-height: 20; -moz-animation: ball 3s linear; -webkit-animation: ball 3s linear; -o-animation: ball 3s linear; -ms-animation: ball 3s linear; animation: ball 3s linear; -moz-keyframes ball 0% -moz-transform: translate(0, 0

14、); 5% -moz-transform: translate(-90px, -100px); 18% -moz-transform: translate(0, -350px); 35% -moz-transform: translate(200px, 0); 46% -moz-transform: translate(380px, -160px); 60% -moz-transform: translate(250px, -350px); 78% -moz-transform: translate(60px, 0); 100% -moz-transform: translate(0, 0);

15、 -webkit-keyframes ball 0% -webkit-transform: translate(0, 0); 5% -webkit-transform: translate(-90px, -100px); 18% -webkit-transform: translate(0, -350px); 35% -webkit-transform: translate(200px, 0); 46% -webkit-transform: translate(380px, -160px); 60% -webkit-transform: translate(250px, -350px); 78

16、% -webkit-transform: translate(60px, 0); 100% -webkit-transform: translate(0, 0); -o-keyframes ball 0% -o-transform: translate(0, 0); 5% -o-transform: translate(-90px, -100px); 18% -o-transform: translate(0, -350px); 35% -o-transform: translate(200px, 0); 46% -o-transform: translate(380px, -160px);

17、60% -o-transform: translate(250px, -350px); 78% -o-transform: translate(60px, 0); 100% -o-transform: translate(0, 0); -ms-keyframes ball 0% -ms-transform: translate(0, 0); 5% -ms-transform: translate(-90px, -100px); 18% -ms-transform: translate(0, -350px); 35% -ms-transform: translate(200px, 0); 46%

18、 -ms-transform: translate(380px, -160px); 60% -ms-transform: translate(250px, -350px); 78% -ms-transform: translate(60px, 0); 100% -ms-transform: translate(0, 0); keyframes ball 0% transform: translate(0, 0); 5% transform: translate(-90px, -100px); 18% transform: translate(0, -350px); 35% transform:

19、 translate(200px, 0); 46% transform: translate(380px, -160px); 60% transform: translate(250px, -350px); 78% transform: translate(60px, 0); 100% transform: translate(0, 0); -moz-keyframes staff 0% -moz-transform: translate(0, 0); 6% -moz-transform: translate(260px, 0); 20% -moz-transform: translate(300px, 0); 30% -moz-transform: translate(300px, 0); 40% -moz-transform: translate(200px, 0); 65% -moz-transform: translate(40px, 0); 79% -moz-transform: translate(0, 0); 100% -moz-transform: translate(0, 0); -webkit-keyframes staff 0% -webkit-