Learn the ABC of CSS

重识CSS

Learn English

Aa	Bb	Cc	Dd	Ee	Ff	Gg
Hh	Ii	Jj	Kk	Ll	Mm	Nn
Oo	Pp	Qq		Rr	Ss	Tt
Uu	Vv	Ww		Xx	Yy	Zz
                    

Learn CSS

?

Agenda

  • learn syntax
  • learn semantic
  • learn to use

learn the syntax

A normal csser

html,body {
    width:100%;
    height:100%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    -webkit-user-select:none;
    overflow:hidden;
    position:relative;
    background-color:black;
}
body {
    width:100%;
    height:100%;
}
.txt {
    font-size:60px;
    color:rgba(0,0,0,0);
    margin:10px 10px 10px 10px;
}
                    

A romantic csser

@charset "UTF-8";
/*! 
 * Source in minimum-src.css
 */
/**
* 
*  A. LIBRARIES (reset.css et fonts.css)
*
*  B. PAGE LAYOUT 
*
*  C. GRIDS 
*
*  D. USEFUL CLASSES
*
*  E. CONTENT
*
*  F. BLOCK STRUCTURES
*
*  G. BLOCK SKINS 
*
*  H. JAVASCRIPT
*
*  I. TABLES
*
*  J. SPECIFICATIONS
*
*  K. BLOGS
*
*  L. FORMS
*
*  M. Home Page NEWS
*
*
*  ACKNOWLEDGMENTS
**/
/* **************** A. LIBRARIES ***************** */
/**{background-color:pink !important;}*/
/* reset */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, address{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;font-size:inherit;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
                    

Me

<!--
@charset "UTF-8";
@import "lib.css"
@namespace foo "http://example.com/ns/foo";
@media screen and (max-width: 600px) {
    html {/*……*/}
}
@page thin:first { size: 3in 8in } 

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.ttf') format('truetype');
}
@keyframes testanimations{
	from{opacity:1;}
	to{opacity:0;}
}
@viewport {
    width: 500px;
}
html{color:#000;background:#FFF;}
foo|bar {  
    /*……*/  
}

-->
                    

collecting syntax

expect

http://www.w3.org/TR/CSS21/grammar.html

actual

                    http://www.w3.org/TR/CSS21/grammar.html
                    http://www.w3.org/TR/css3-mediaqueries/
                    http://www.w3.org/TR/css3-animations/
                    http://www.w3.org/TR/css3-selectors/
                    ……
                    

CSS grammar

硬广:one-request

https://github.com/amfe/or.htmlone.gulp

learn the semantic

所有的属性

properties

text

box

visual formatting

paint

  • box-shadow
  • color
  • background
  • ……

interaction

  • transition
  • user-select
  • ……

But, remember it's only ABC……

learn to use

硬广:lib.flexible

https://github.com/amfe/lib.flexible

Q&A

我的Blog: http://wintercn.cnblogs.com/
我个人的开源: https://github.com/wintercn
Email: hanquan.csf@taobao.com
Weibo: weibo.com/wintercn (@寒冬winter)
花名/旺旺: 寒泉

ali-mfe-hire@alibaba-inc.com