csscheatsheet速查表

imsky.org CSS Cheat Sheet brought to you by pxleyes.com div div, span div span #content .box ul#box span.box * #box * a:link, a:active, a:visited a:hover div > span position float top, left, right, bottom display z-index overflow background cursor outline border-collapse clear font-family font-size color font-weight font-style text-decoration text-align line-height letter-spacing text-indent text-transform vertical-align border border-top border-bottom border-left border-right list-style-type list-style- position list-style-image padding content border margin Selectors Text Borders and Lists Everything Else Box Model Positioning all DIV tags all DIV tags and all SPAN tags all SPAN tags inside DIVs element with ID “content” all elements with CLASS “box” UL tag with ID “box” all SPAN tags with CLASS “box” all elements all elements inside #box links in normal state, in clicked state, and in visited state link with mouse over it all SPANs one-level deep in a DIV places elements on screen, e.g. absolute, fixed, relative stacks elements horizontally in a particular direction, e.g. left specifies the offsets used in absolute, fixed, and relative positions, e.g. top:10px;left:10px sets how the element is placed in the doc flow, e.g. block, inline, none sets the stacking order of elements, e.g. z-index of 1 is below z-index of 2 sets what happens to content outside of container, e.g. auto, hidden sets background of an element, in the format: background: (color) (image) (repeat) (position), e.g. background: #000 url(bg.png) repeat-x top left sets shape of cursor, e.g. pointer a border drawn around an element that doesn’t affect the box model sets how borders within tables behave, e.g. collapse sets on what side a new line starts in relation to nearby floated elements, e.g. left, right, both font used, e.g. Helvetica, Arial text size, e.g. 60px, 3em text color, e.g. #000, #abcdef how bold the text is, e.g. bold what style the text is, e.g. italic sets a variety of effects on text, e.g. underline, overline, none how text is aligned, e.g. center spacing between lines, e.g. 2em spacing between letters, e.g. 5px indent of the first line, e.g. 2em applies formatting to text, e.g. upper- case, lowercase, capitalize align relative to baseline, e.g. text-top sets border style for all borders, in the format: border: (solid, dashed, dotted, double) (width) (color), e.g. border: solid 1px #000 sets border style for a specific border (same property syntax used for padding and margin, e.g. margin-left) sets style of bullets, e.g. square sets how text wraps when bulleted, e.g. outside, inside sets an image for a bullet, e.g. list-style-image:url(bullet.png) Always write in your files!