CSS TOOL
1. Gradient 2. Animations 3. Transition 4. Transform 5. background-clip 6. CSS Selectors 7. font-face 8. @media1. Gradient
| Style: | Linear Radial |
| Gradient: | 配合控制台使用 |
| Angle: | deg |
| Shape: | 椭圆ellipse(Default) 圆形circle |
| Repeating: | 重复渐变 |
2. AnimationsWarning
| animation-duration: | |
| animation-timing-function: | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
| animation-delay: | |
| animation-iteration-count: | infinite | 数字: |
| animation-direction: | normal alternate |
| animation-play-state: | pausedrunning |
| animation-fill-mode: | none forwards (动画结束后) backwards (delay后) both |
3. Transition
常用于:hover,:focus,:active,:checked或JavaScript触发一个元素
| transition-duration | |
| transition-timing-function | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
| transition-delay |
4. Transform
translate(px,px) // 平移
scale(,) // 缩放
rotateX({{ transform_rX }}deg)
rotateY({{ transform_rY }}deg)
rotateZ({{ transform_rZ }}deg)
skew(deg,deg) // 倾斜
transform-origin:
center center(Default)
0 0
right bottom
backface-visibility:
visible(Default)
hidden
5. background-clip
蝙蝠侠（Batman）是DC漫画公司旗下的超级英雄，1939年5月于《侦探漫画》第27期首次登场，是漫画史上第一位没有超能力的超级英雄。他本名布鲁斯·韦恩（Bruce Wayne），是高谭市首富韦恩家族的独子。布鲁斯在儿时亲眼目睹父母被犯罪分子杀害，他发誓要扫除罪恶，不让别的孩子也遭受这样的命运。为此他遍访名师，掌握了各种侦探知识和战斗技巧，并依靠韦恩集团制造了大量高科技装备，开始了他的圣战。白天，他是别人眼中的无脑富二代、花花公子；夜晚，他是令罪犯闻风丧胆的黑暗骑士——蝙蝠侠。
6. CSS Selectors
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| \* | 通配选择器 | 选择文档中所有的 HTML 元素,也可以选择某个元素下的所有元素 |
| E | 元素选择器 | 选择指定的类型的 HTML 元素 |
| #id | ID 选择器 | 选择指定 ID 属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定 class 属性值为“class”的任意类型的任意多个元素 |
| selector1, selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并; 如 h1,h2{} |
通配选择器：
层次选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内 |
| E > F | 子选择器(IE7+) | 选择匹配的 F 元素，且匹配的 F 元素是所匹配的 E 元素的子元素(**孙元素不行**) |
| E + F | 相邻兄弟选择器(IE7+) | 选择匹配的 F 元素，且匹配的 F 元素**紧位于**匹配的 E 元素后面(E,F必须**同层**) |
| E ~ F | 通用选择器(IE7+) | 选择匹配的 F 元素，且位于匹配的 E 元素**后**的所有匹配的 F 元素(E,F必须**同层**) |
动态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的 E 元素，而且匹配元素被定义了超链接并未被访问过。常用于 链接锚点上 |
| E:visited | 链接伪类选择器 | 选择匹配的 E 元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接锚点上(**:visited优先级高于:link**) |
| E:active | 用户行为伪类选择器(IE8+) | 选择匹配的 E 元素，且匹配元素被激活(鼠标点击时)。常用于锚点与按钮上 |
| E:hover | 用户行为伪类选择器 | 选择匹配的 E 元素，且用户鼠标在停留在元素 E 上(鼠标悬浮在上面时)。IE 6 及以下浏览器仅 支持 a:hover (**:hover的优先级高于:active**) |
| E:focus | 用户行为伪类选择器(IE8+) | 选择匹配的 E 元素，且匹配的元素获得焦点(如input:focus{background:blue}) |
element = baseElement.querySelector(selectors)
7. font-face
8. @media
screen: 用于电脑屏幕，平板电脑，智能手机等 Usage: @media only screen and (max-width: 500px) { }
print: 用于打印机和打印预览
有三种方式来使用打印样式
@media print {
no-print {
display:none;
}
}
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="print">
....
</style>