1, hexadecimal color value, if each two digits of the same value, you can abbreviate half. Such as:
color: #ffffff => color: #fffcolor: #aabbcc => color: #abc
2, border syntax sugar
Frame:
border: width style color; => border: (width) (style) (color);
Border: 1px solid #000;
Without a border, you can write border: None
Border-top / -bottom / -left / -right is the same
Border picture:
border-image: source slice / width / outset repeat; = >
Border-image :(image) (cropped area)/(border image width)/(spread) (stretched or tiled)
Border-image: url(button.png) 0 14 0 14 stretch;
3. Background grammar sugar
background: color image repeat attachment position; => Backgroud: (color) (image path) (repeat) (fixed) (position);
Background: # FFF url(‘image.png’) no-repeat fixed center;
CSS3 new notation:
background: color image repeat attachment position/size origin clip;
=> BACKGROUND :size(image size) Origin (clip)
4, font grammar sugar
Font size and font family must be defined at least
Font: variant weight /line-height family => Font: variant weight /line-height family
5, list
List-style :square; list-style :square; list-style-position:inside; list-style-image:url(image.png); => list-style: square inside url(image.png);
List-style :none; list-style:none;
6. Flex flex layout
flex-flow: direction wrap; => flex-flow: (array direction) (line break);
flex: grow shrink basis; => flex: (project size) (project size) (project size);
The Flex property has two shortcut values: flex: auto; => flex:1 1 auto; => flex: 0 0 auto