• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css3 cheat-sheet
 

Css3 cheat-sheet

on

  • 130 views

 

Statistics

Views

Total Views
130
Views on SlideShare
130
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Css3 cheat-sheet Css3 cheat-sheet Document Transcript

    • Page 1 of 5 FREEQuick Reference Guidehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights ReservedCascading Style Sheets (CSS 3)BACKGROUNDbackground background-imagebackground-positionbackground-sizebackground-repeatbackground-attachmentbackground-originbackground-clipbackground-colorbackground-attachment scroll | fixedbackground-break bounding-box | each-box |continuousbackground-clip length%border-box | padding-box |content-box | no-clipbackground-color colortransparentbackground-image urlnonebackground-origin border-box | padding-box |content-boxbackground-position top left | top center | topright | center left | centercenter | center right |bottom left | bottom center| bottom rightx-% y-%x-pos y-posbackground-repeat repeat | repeat-x | repeat-y | no-repeatbackground-size length%auto | cover | containBORDERborder-top border-top-widthborder-styleborder-colorborder-top-color border-colorborder-top-style border-styleborder-top-width thin | medium | thicklengthborder-width thin | medium | thicklengthborder-radius border-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-top-left-radiusborder-top-right-radius lengthborder-bottom-right-radius lengthborder-bottom-left-radius lengthborder-top-left-radius lengthbox-shadow inset || [ length, length,length, length || <color> ]noneborder-style none | hidden | dotted |dashed | solid | double |groove | ridge | inset |outsetFONTfont font-stylefont-variantfont-weightfont-size/line-heightfont-familycaption | icon | menu |message-box | small-caption | status-barfont-family family-namegeneric-familyinheritfont-size xx-small | x-small | small |medium | large | x-large |xx-large | smaller | larger |inheritlength%font-size-adjust none| inheritnumberfont-stretch normal | wider | narrower |ultra-condensed | extra-condensed | condensed |semi-condensed | semi-expanded | expanded |extra-expanded | ultra-expanded | inheritfont-style normal | italic | oblique |inheritfont-variant normal | small-caps | inheritfont-weight normal | bold | bolder |lighter | 100 | 200 | 300 |400 | 500 | 600 | 700 | 800| 900 | inheritBOX MODELfloat left | right | noneheight autolength%max-height nonelength%max-width nonelength%min-height none | inheritlength%min-width none | inheritlength%width auto%lengthmargin margin-topmargin-rightmargin-bottommargin-leftmargin-bottom autolength%margin-left autolength%margin-right autolength%margin-top autolength%padding padding-toppadding-rightpadding-bottompadding-leftpadding-bottom length%padding-left length%padding-right length%padding-top length%marquee-direction forward | reversemarquee-loop infinitenumbermarquee-speed slow | normal | fastmarquee-style scroll | slide | alternateoverflow visible | hidden | scroll |auto | no-display | no-contentoverflow-xoverflow-yoverflow-style auto | marquee-line | mar-quee-blockoverflow-x visible | hidden | scroll |auto | no-display | no-contentoverflow-y visible | hidden | scroll |auto | no-display | no-contentrotation anglerotation-point position (paired value off-set)visibility visible | hidden | collapsemarquee-play-count infiniteintegerBOX MODELclear left | right | both | nonedisplay none | inline | block | inline-block | list-item | run-in |compact | table | inline-table | table-row-group |table-header-group | table-footer-group | table-row |table-column-group | table-column | table-cell | table-caption | ruby | ruby-base |ruby-text | ruby-base-group| ruby-text-groupBORDERborder border-widthborder-styleborder-colorborder-break border-widthborder-stylecolorcloseborder-bottom border-bottom-widthborder-styleborder-colorborder-bottom-color border-colorborder-bottom-style border-styleborder-bottom-width thin | medium | thicklengthborder-collapse collapse | separateborder-color colorborder-image image[ number / %border-widthstretch | repeat | round ]noneborder-left border-left-widthborder-styleborder-colorborder-left-color border-colorborder-left-style border-styleborder-left-width thin | medium | thicklengthborder-right border-right-widthborder-styleborder-colorborder-right-color border-colorborder-right-style border-styleborder-right-width thin | medium | thicklength
    • Page 2 of 5 FREEQuick Reference Guidehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights ReservedTABLEborder-collapse collapse | separateborder-spacing length lengthcaption-side top | bottom | left | rightempty-cells show | hidetable-layout auto | fixedCascading Style Sheets (CSS 3)TEXTdirection ltr | rtl | inherithanging-punctuation none | [ start | end | end-edge ]letter-spacing normallength%punctuation-trim none | [start | end | adja-cent]text-align start | end | left | right |center | justifytext-align-last start | end | left | right |center | justifytext-decoration none | underline | overline |line-through | blinktext-emphasis none | [ [ accent | dot | circle| disc] [ before | after ]? ]text-indent length%text-justify auto | inter-word | inter-ideograph | inter-cluster |distribute | kashida | tibetantext-outline nonecolorlengthtext-shadow nonecolorlengthtext-transform none | capitalize | uppercase| lowercasetext-wrap normal | unrestricted | none| suppressunicode-bidi normal | embed | bidi-overridewhite-space normal | pre | nowrap | pre-wrap | pre-linewhite-space-collapse preserve | collapse | pre-serve-breaks | discardword-break normal | keep-all | loose |break-strict | break-allword-spacing normallength%word-wrap normal | break-wordCOLUMNcolumn-count autonumbercolumn-fill auto | balancecolumn-gap normallengthcolumn-rule column-rule-widthcolumn-rule-stylecolumn-rule-colorcolumn-rule-color colorcolumn-rule-style border-stylecolumn-rule-width thin | medium | thicklengthcolumns column-widthcolumn-countcolumn-span 1 | allcolumn-width autolengthTEMPLATE LAYOUTbox-align start | end | center | base-box-direction normal | reversebox-flex numberbox-flex-group integerbox-lines single | multiplebox-orient horizontal | vertical | inline-axis | block-axisbox-pack start | end | center | justifybox-sizing content-box | padding-box |border-box | margin-boxtab-side top | bottom | left | rightCOLORcolor inheritcoloropacity inheritnumberSPEECHcue cue-beforecue-aftercue-before uri [ silent | x-soft | soft |medium | loud | x-loud] |none | inherit ]number%cue-after uri [ silent | x-soft | soft |medium | loud | x-loud] |none | inherit ]number%mark mark-beforemark-aftermark-before stringmark-after stringpause pause-beforepause-afterpause-before none | x-weak | weak |medium | strong | x-strong| inherittimepause-after none | x-weak | weak |medium | strong | x-strong| inherittimephonemes stringrest rest-beforerest-afterrest-before none | x-weak | weak |medium | strong | x-strong| inherittimerest-after none | x-weak | weak |medium | strong | x-strong| inherittimespeak none | normal | spell-out |digits | literal-punctuation |no-punctuation | inheritvoice-balance left | center | right | left-wards | rightwards | inheritnumbervoice-duration timeSPEECHvoice-family inherit | [ <specific-voice,age, generic-voice, num-ber> ]voice-rate x-slow | slow | medium |fast | x-fast | inherit%voice-pitch x-low | low | medium | high| x-high | inheritnumber%voice-pitch-range x-low | low | medium | high| x-high | inheritnumbervoice-stress strong | moderate | none |reduced | inheritvoice-volume silent | x-soft | soft | me-dium | loud | x-loud | inheritnumber%LIST & MARKERSlist-style list-style-typelist-style-positionlist-style-imagelist-style-image noneurllist-style-position Inside | outsidelist-style-type none | asterisks | box |check | circle | diamond |disc | hyphen | square |decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | up-per-alpha | lower-greek |lower-latin | upper-latin |hebrew | armenian | geor-gian | cjk-ideographic |hiragana | katakana | hira-gana-iroha | katakana-iroha| footnotesmarker-offset autolengthANIMATIONSanimation animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-delay timeanimation-direction normal | alternateanimation-duration timeanimation-iteration-count inheritnumberanimation-name none | IDENTanimation-play-state running | pausedanimation-timing-function ease | linear | ease-in |ease-out | ease-in-out |cubic-Bezier (number, num-ber, number, number)TRANSITIONStransition transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-delay timetransition-duration timetransition-property none | alltransition-timing-function ease | linear | ease-in |ease-out | ease-in-out |cubic-Bezier (number, num-ber, number, number)
    • Page 3 of 5 FREEQuick Reference Guidehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights ReservedPOSITIONINGbottom auto%lengthclip shapeautoleft auto%lengthposition static | relative | absolute |fixedright auto%lengthtop auto%lengthz-index autonumberGENERATED CONTENTbookmark-label contentattrstringbookmark-level noneintegerbookmark-target selfuriattrborder-length autolengthcontent normal | none | inhibituricounter-increment noneidentifier numbercounter-reset noneidentifier numbercrop autoshapedisplay normal | none | list-itemfloat-offset length lengthGRID POSITIONINGgrid-columns none | inherit[ length percentage relativelength ]grid-rows none | inherit[ length percentage relativelength ]Cascading Style Sheets (CSS 3)OUTLINEoutline outline-coloroutline-styleoutline-widthoutline-color colorinvertoutline-style None | dotted | dashed |solid | double | groove |ridge | inset | outsetoutline-width thin | medium | thicklengthoutline-offset inheritlength3D / 2D TRANSFORMbackface-visibility visible | hiddenperspective nonenumberperspective-origin [ [ [ percentage> |<length> | left | center |right ] [ <percentage> |<length> | top | center |bottom ]? ] <length> ] |[ [ [ left | center | right ] ||[ top | center | bottom ] ]<length> ]transform none | matrix | matrix3d |translate3d | translateX |translateY | translateZ |scale | scale3d | scaleX |scaleY | scaleZ | rotate |rotate3d | rotateX | rotateY| rotateZ | skewX | skewY |skew | perspectivetransform-origin [ [ [ <percentage> |<length> | left | center |right ] [ <percentage> |<length> | top | center |bottom ]? ] <length> ] |[ [ [ left | center | right ] ||[ top | center | bottom ] ]<length> ]transform-style flat | preserve-3dLINE BOXalignment-adjust auto | baseline | before-edge | text-before-edge |middle | central | after-edge| text-after-edge | ideo-graphic | alphabetic | hang-ing | mathematicallength%alignment-baseline baseline | use-script | be-fore-edge | text-before-edge | after-edge | text-after-edge | central | middle| ideographic | alphabetic |hanging | mathematicalbaseline-shift baseline | sub | superlength%dominant-baseline auto | use-script | no-change | reset-size | alpha-betic | hanging | ideo-graphic | mathematical |central | middle | text-after-edge | text-before-edgedrop-initial-after-align alignment-baselinedrop-initial-after-adjust central | middle | after-edge| text-after-edge | ideo-graphic | alphabetic |mathematicallength%drop-initial-before-align caps-heightalignment-baselinedrop-initial-before-adjust before-edge | text-before-edge | central | middle |hanging | mathematicallength%drop-initial-value initialintegerdrop-initial-size autointeger%lineinline-box-align initial | lastintegerHYPERLINKtarget target-nametarget-newtarget-positiontarget-name current | root | parent | new| modalstringtarget-new window | tab | nonetarget-position above | behind | front |backRUBYruby-align auto | start | left | center |end | right | distribute-letter| distribute-space | line-edgeruby-overhang auto | start | end | noneruby-position before | after | right | inlineruby-span attr(x) | noneGENERATED CONTENThyphenate-after autointegerpage-policy start | first | lastquotes nonestring string string stringhyphenate-before autointegerhyphenate-character autostringhyphenate-lines no-limitintegermove-to normal | hereidentifierhyphenate-resource noneurihyphens none | manual | autoimage-resolution normal | autodpimarks [ crop || cross ] | nonestring-set identifiercontent-listtext-replace none[<string> <string>]+LINE BOXline-height normalnumberlength%line-stacking line-stacking-strategyline-stacking-rubyline-stacking-shiftline-stacking-strategy inline-line-height | block-line-height | max-height |grid-heightline-stacking-ruby exclude-ruby | include-rubyline-stacking-shift consider-shifts | disregard-shiftstext-height auto | font-size | text-size |max-sizevertical-align Baseline | sub | super | top| text-top | middle | bottom| text-bottomlength%
    • Page 4 of 5 FREEQuick Reference Guidehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights ReservedPAGED MEDIAfit fill | hidden | meet | slicefit-position [top | center | bottom] ||[left | center | right]length%image-orientation autoangleorphans integerpage autoidentifierpage-break-after auto | always | avoid | left |rightpage-break-before auto | always | avoid | left |rightpage-break-inside auto | avoidsize auto | landscape | portraitlengthwindows integerCascading Style Sheets (CSS 3)• Values in italics are place holders for an actual value (like 1px,1em, 1%), values in normal text are values that can be used asthe actual value• CSS Properties in Dark Red are shorthand properties and eachvalue must be defined. The exception is where the property candefine from one to four of the sides of a box element property(Top-Right-Bottom-Left) - i.e. border-widthUIappearance normal | inherit | [icon |window | desktop | work-space | document | tooltip |dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu |menubar | pull-down-menu| pop-up-menu | list-menu |radio-group | checkbox-group | outline-tree | range| field | combo-box | signa-ture | password]icon auto | inheriturlresize none | both | horizontal |vertical | inheritcursor auto | crosshair | default |pointer | move | e-resize |ne-resize | nw-resize | n-resize | se-resize | sw-resize| s-resize | w-resize | text |wait | helpurlnav-index auto | inheritnumbernav-up auto | inherit<id> [ current | root |<target-name> ]nav-right auto | inherit<id> [ current | root |<target-name> ]nav-down auto | inherit<id> [ current | root |<target-name> ]nav-left auto | inherit<id> [ current | root |<target-name> ]
    • Page 5 of 5 FREEQuick Reference Guidehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights ReservedSELECTOR TYPESName Info ExampleUniversal Any element * { font: 10px Arial; }Type Any element ofthat typeh1 { text-decoration:underline; }Grouping Multipleelements ofdifferent typesh1, h2, h3 { font-family:Verdana; }Class Multipleelements ofdifferent typeswhen you don’twant to affectall instances ofthat type.sampleclass { text-decoration: underline; }Id A singleelement typewhen you don’twant to affectall instances ofthat type#sampleid { text-decoration: underline; }Descendant An element thatis below (in thedocument tree)anotherelement—nomatter howmany levelsbelow#gallery h1 { text-decoration: underline; }Child An element thatis directly below(in thedocument tree)anotherelement#title > p { font-weight:bold; }AdjacentSiblingAll elementsthat share thesame parentand elementsare in the sameimmediatesequenceh1 + p { font-style:italic; }Attribute An element withthat matchesthe attributelistedE[selected] - att whateverthe valueE[att="val"] - att with aspecific valueE[rel~="next"] - att witha value is a whitespaceseparated list*[lang|="en"] - att valueeither being exactly "val"or beginning with "val"immediately followed by"-"E[att^="val"] - att valuethat begins with the prefix"val"E[att$="val"] - att valuethat end with the suffix"val"E[att*="val"] - att valuecontains at least oneinstance of the substring"val"GeneralSiblingAll elementsthat share thesame parentand elementsare in the samesequence (notnecessarilyimmediate)h1 ~ p { font-style:italic; }UNITSABSOLUTE MEASUREMENT% percentagecm centimeterin inchmm millimeterpc pica (1p = 12 points)pt point (1pt = 1/72 inch)RELATIVE MEASUREMENTch width of the "0" glyph found inthe font for the font size used torenderem 1em = current font size ofcurrent elementex x-height of the elements fontgd the grid defined by layout-gridpx pixel of the viewing devicerem the font size of the root elementvh the viewports heightvw the viewports widthvm viewports height or width,whichever is smaller of the twoANGLESdeg degreesgrad gradsrad radiansturn turnsTIMEms milli-secondss secondsHz hertzkHz kilo-hertzCOLORScolor name red, blue, green, dark greenrgb(x,y,z) red = rgb(255,0,0)rgb(x%,y%,z%) red = rgb(100%,0,0)#rrggbb red = #ff0000 (or shorthand =#f00)FREQUENCYhsl(hue, saturation,lightness)red = hsl(0, 100%, 50%)hsla(hue, saturation,lightness, alpha)red = hsl(0, 100%, 50%)rgba(x,y,z, alpha) red = rgba(255,0,0)flavor An accent color (typically chosenby the user) to customize theuser interface of the user agentitselcurrentColor computed value of thecurrentColor keyword is thecomputed value of the colorpropertyPSEUDO-CLASS:active an activated element:focus an element while theelement has focus:visited a visited link:hover an element when you mouseover it:link an unvisited link:disabled an element while theelement is disabled:enabled an element while theelement is enabled:checked an element (form elementcontrol) that is checked:selection an element that is currentlyselected of highlighted bythe user:lang Allows the author to specifya language to use in aspecified element:nth-child(n) an element that is the n-thsibling:nth-last-child(n) an element that is the n-thsibling counting from thelast sibling:first-child an element that is the firstsibling:last-child an element that is the lastsibling:only-child an element that is the onlychild:nth-of-type(n) an element that is the n-thsibling of its type.:nth-last-of-type(n) an element that is the n-thsibling of its type countingfrom the last sibling:last-of-type an element that is the firstsibling of its type:first-of-type an element that is the lastsibling of its type:only-of-type an element that is the onlychild of that type:empty an element that has nochildren:root root element within thedocument:not(x) an element not representedby the argument ‘x’:target a target element as specifiedby a target in a URIPSEUDO-ELEMENT::first-letter Adds special style to the firstletter of a text::first-line Adds special style to the firstline of a text::before Inserts some content beforean element::after Inserts some content after anelementCascading Style Sheets (CSS 3)