css3手册笔记

！important

ie6有问题

div { color: #f00 !important; } div { color: #000; }

@charset

@charset "utf-8";

@font-face

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

@import

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

IE使用@import无法引入超过35条的样式表。

本人不推荐使用这种方法使用

@keyframes

@keyframes定义的动画名称用来被animation-name所使用。

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

复杂的可以使用时间短来定义

@keyframes testanimations {
    from { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

或

@keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

ie6-9不兼容

使用案例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#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;border-radius:3px;background:#ddd;line-height:20;
    -webkit-animation:staff 3s linear;
    animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:linear-gradient(top,#fff,#F6D66E);line-height:20;
    -webkit-animation:ball 3s linear;
    animation:ball 3s linear;
}
@-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%{-webkit-transform:translate(60px,0);}
    100%{-webkit-transform:translate(0,0);}
}
@keyframes ball{
    0%{transform:translate(0,0);}
    5%{transform:translate(-90px,-100px);}
    18%{transform:translate(0,-350px);}
    35%{transform:translate(200px,0);}
    46%{transform:translate(380px,-160px);}
    60%{transform:translate(250px,-350px);}
    78%{transform:translate(60px,0);}
    100%{transform:translate(0,0);}
}
@-webkit-keyframes staff{
    0%{-webkit-transform:translate(0,0);}
    6%{-webkit-transform:translate(260px,0);}
    20%{-webkit-transform:translate(300px,0);}
    30%{-webkit-transform:translate(300px,0);}
    40%{-webkit-transform:translate(200px,0);}
    65%{-webkit-transform:translate(40px,0);}
    79%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(0,0);}
}
@keyframes staff{
    0%{transform:translate(0,0);}
    6%{transform:translate(260px,0);}
    20%{transform:translate(300px,0);}
    30%{transform:translate(300px,0);}
    40%{transform:translate(200px,0);}
    65%{transform:translate(40px,0);}
    79%{transform:translate(0,0);}
    100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
    <span id="ball">弹球</span>
    <span id="staff">滑杆</span>
</div>
</body>
</html>

@media

IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

@media screen and (800px){ … }
@import url(example.css) screen and (800px);
<link media="screen and (800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (800px)" rel="stylesheet" href="example.css"

使用方法

@media all and (1024px){
    body{color:#f00;}
}
@media all and (device-height:800px){ … }
@media all and (orientation:landscape){ … }
@media all and (device-aspect-ratio:16/10){ … }
@media all and (min-color:1){ … }
@media all and (monochrome:0){ … }
@media all and (grid:0){ … }