CSS TOOL

1. Gradient 2. Animations 3. Transition 4. Transform 5. background-clip 6. CSS Selectors 7. font-face 8. @media

1. 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-functionlinear | 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

border-box padding-box content-box initial
蝙蝠侠(Batman)是DC漫画公司旗下的超级英雄,1939年5月于《侦探漫画》第27期首次登场,是漫画史上第一位没有超能力的超级英雄。他本名布鲁斯·韦恩(Bruce Wayne),是高谭市首富韦恩家族的独子。布鲁斯在儿时亲眼目睹父母被犯罪分子杀害,他发誓要扫除罪恶,不让别的孩子也遭受这样的命运。为此他遍访名师,掌握了各种侦探知识和战斗技巧,并依靠韦恩集团制造了大量高科技装备,开始了他的圣战。白天,他是别人眼中的无脑富二代、花花公子;夜晚,他是令罪犯闻风丧胆的黑暗骑士——蝙蝠侠。

6. CSS Selectors

选择器类型功能描述
\*通配选择器选择文档中所有的 HTML 元素,也可以选择某个元素下的所有元素
E元素选择器选择指定的类型的 HTML 元素
#idID 选择器选择指定 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

  • font2web - Generate Webfont
  • transfonter - Generate Webfont
  • Font Editor FontCreator
  • Icons
  • Font Awesome Icons
  • 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>
    
  • page-break-before:always表示在所在元素之前新起一页
  • page-break-after:always表示在所在元素之后新起一页
  • 属性的值除了always还有auto,auto等同于没有设置page-break-\*,他是按内容长度来决定是否新起一页,另外官方文档的left,right属性值,firefox,chrome,ie都不支持
  • 点击chrome的右键,会有打印,点击后有打印预览,布局可以选择横向/纵向
  • Continue...