Your SlideShare is downloading. ×
Page 1 of 5                                                              Quick Reference Guide                            ...
Page 2 of 5                                                                 Quick Reference Guide                         ...
Page 3 of 5                                                                  Quick Reference Guide                        ...
Page 4 of 5                                                Quick Reference Guide                                          ...
Page 5 of 5                                                                   Quick Reference Guide                       ...
Upcoming SlideShare
Loading in...5
×

Шпаргалка оп Css3

759

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
759
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Шпаргалка оп Css3"

  1. 1. Page 1 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) BACKGROUND BORDER BOX MODEL background background-image border-top border-top-width float left | right | none background-position border-style background-size border-color height auto background-repeat length background-attachment border-top-color border-color % background-origin border-top-style border-style max-height none background-clip length background-color border-top-width thin | medium | thick % length background-attachment scroll | fixed max-width none border-width thin | medium | thick length background-break bounding-box | each-box | length % continuous border-radius border-top-right-radius min-height none | inherit background-clip length border-bottom-right-radius length % border-bottom-left-radius % border-box | padding-box | border-top-left-radius content-box | no-clip min-width none | inherit border-top-right-radius length length background-color color transparent % border-bottom-right-radius length background-image url width auto border-bottom-left-radius length % none length background-origin border-box | padding-box | border-top-left-radius length content-box margin margin-top box-shadow inset || [ length, length, margin-right background-position top left | top center | top length, length || <color> ] margin-bottom right | center left | center none margin-left center | center right | border-style none | hidden | dotted | margin-bottom auto bottom left | bottom center dashed | solid | double | length | bottom right groove | ridge | inset | % x-% y-% outset x-pos y-pos margin-left auto FONT length background-repeat repeat | repeat-x | repeat- y | no-repeat % font font-style font-variant margin-right auto background-size length font-weight length % font-size/line-height % auto | cover | contain font-family caption | icon | menu | margin-top auto BORDER message-box | small- length border border-width caption | status-bar % border-style font-family family-name padding padding-top border-color generic-family padding-right border-break border-width inherit padding-bottom border-style padding-left color font-size xx-small | x-small | small | medium | large | x-large | padding-bottom length close xx-large | smaller | larger | % border-bottom border-bottom-width inherit length padding-left length border-style border-color % % font-size-adjust none| inherit padding-right length border-bottom-color border-color number % border-bottom-style border-style padding-top length font-stretch normal | wider | narrower | ultra-condensed | extra- % border-bottom-width thin | medium | thick condensed | condensed | length marquee-direction forward | reverse semi-condensed | semi- border-collapse collapse | separate expanded | expanded | marquee-loop infinite extra-expanded | ultra- number border-color color expanded | inherit marquee-play-count infinite border-image image font-style normal | italic | oblique | integer [ number / % inherit border-width marquee-speed slow | normal | fast stretch | repeat | round ] font-variant normal | small-caps | inherit none marquee-style scroll | slide | alternate font-weight normal | bold | bolder | border-left border-left-width lighter | 100 | 200 | 300 | overflow visible | hidden | scroll | border-style 400 | 500 | 600 | 700 | 800 auto | no-display | no- border-color | 900 | inherit content overflow-x border-left-color border-color BOX MODEL overflow-y border-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar- quee-block border-left-width thin | medium | thick display none | inline | block | inline- length block | list-item | run-in | overflow-x visible | hidden | scroll | compact | table | inline- auto | no-display | no- border-right border-right-width table | table-row-group | content border-style table-header-group | table- border-color footer-group | table-row | overflow-y visible | hidden | scroll | table-column-group | table- auto | no-display | no- border-right-color border-color column | table-cell | table- content caption | ruby | ruby-base | border-right-style border-style rotation angle ruby-text | ruby-base-group border-right-width thin | medium | thick | ruby-text-group rotation-point position (paired value off- length set) visibility visible | hidden | collapse http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  2. 2. Page 2 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) TEXT TEMPLATE LAYOUT SPEECH direction ltr | rtl | inherit box-align start | end | center | base- voice-family inherit | [ <specific-voice, age, generic-voice, num- hanging-punctuation none | [ start | end | end- ber> ] edge ] box-direction normal | reverse voice-rate x-slow | slow | medium | letter-spacing normal box-flex number fast | x-fast | inherit length % % box-flex-group integer voice-pitch x-low | low | medium | high punctuation-trim none | [start | end | adja- box-lines single | multiple | x-high | inherit cent] number box-orient horizontal | vertical | inline- text-align start | end | left | right | axis | block-axis % center | justify voice-pitch-range x-low | low | medium | high box-pack start | end | center | justify text-align-last start | end | left | right | | x-high | inherit center | justify box-sizing content-box | padding-box | number border-box | margin-box text-decoration none | underline | overline | voice-stress strong | moderate | none | line-through | blink tab-side top | bottom | left | right reduced | inherit text-emphasis none | [ [ accent | dot | circle TABLE voice-volume silent | x-soft | soft | me- | disc] [ before | after ]? ] dium | loud | x-loud | inherit border-collapse collapse | separate number text-indent length % % border-spacing length length LIST & MARKERS text-justify auto | inter-word | inter- caption-side top | bottom | left | right ideograph | inter-cluster | list-style list-style-type distribute | kashida | tibetan empty-cells show | hide list-style-position list-style-image text-outline none table-layout auto | fixed color list-style-image none length SPEECH url text-shadow none cue cue-before list-style-position Inside | outside color cue-after length list-style-type none | asterisks | box | cue-before uri [ silent | x-soft | soft | check | circle | diamond | text-transform none | capitalize | uppercase medium | loud | x-loud] | disc | hyphen | square | | lowercase none | inherit ] decimal | decimal-leading- number zero | lower-roman | upper- text-wrap normal | unrestricted | none % roman | lower-alpha | up- | suppress per-alpha | lower-greek | cue-after uri [ silent | x-soft | soft | lower-latin | upper-latin | unicode-bidi normal | embed | bidi- medium | loud | x-loud] | hebrew | armenian | geor- override none | inherit ] gian | cjk-ideographic | number hiragana | katakana | hira- white-space normal | pre | nowrap | pre- % gana-iroha | katakana-iroha wrap | pre-line | footnotes mark mark-before white-space-collapse preserve | collapse | pre- mark-after marker-offset auto serve-breaks | discard length mark-before string word-break normal | keep-all | loose | break-strict | break-all ANIMATIONS mark-after string word-spacing normal animation animation-name length pause pause-before animation-duration % pause-after animation-timing-function animation-delay word-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count medium | strong | x-strong animation-direction COLUMN | inherit time animation-delay time column-count auto number pause-after none | x-weak | weak | animation-direction normal | alternate medium | strong | x-strong column-fill auto | balance | inherit animation-duration time time column-gap normal animation-iteration-count inherit length phonemes string number column-rule column-rule-width rest rest-before animation-name none | IDENT column-rule-style rest-after column-rule-color animation-play-state running | paused rest-before none | x-weak | weak | column-rule-color color medium | strong | x-strong animation-timing-function ease | linear | ease-in | | inherit ease-out | ease-in-out | column-rule-style border-style time cubic-Bezier (number, num- ber, number, number) column-rule-width thin | medium | thick rest-after none | x-weak | weak | length medium | strong | x-strong TRANSITIONS | inherit columns column-width transition transition-property time column-count transition-duration speak none | normal | spell-out | transition-timing-function column-span 1 | all transition-delay digits | literal-punctuation | column-width auto no-punctuation | inherit transition-delay time length voice-balance left | center | right | left- transition-duration time COLOR wards | rightwards | inherit number transition-property none | all color inherit color voice-duration time transition-timing-function ease | linear | ease-in | ease-out | ease-in-out | opacity inherit cubic-Bezier (number, num- number ber, number, number) http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  3. 3. Page 3 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) GRID POSITIONING GENERATED CONTENT LINE BOX grid-columns none | inherit hyphenate-after auto line-height normal [ length percentage relative integer number length ] length hyphenate-before auto % grid-rows none | inherit integer [ length percentage relative line-stacking line-stacking-strategy length ] hyphenate-character auto line-stacking-ruby string line-stacking-shift OUTLINE hyphenate-lines no-limit line-stacking-strategy inline-line-height | block- outline outline-color integer line-height | max-height | outline-style grid-height outline-width hyphenate-resource none uri line-stacking-ruby exclude-ruby | include-ruby outline-color color invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard- image-resolution normal | auto shifts outline-offset inherit length dpi text-height auto | font-size | text-size | marks [ crop || cross ] | none max-size outline-style None | dotted | dashed | solid | double | groove | vertical-align Baseline | sub | super | top move-to normal | here ridge | inset | outset | text-top | middle | bottom identifier | text-bottom outline-width thin | medium | thick length page-policy start | first | last length % quotes none 3D / 2D TRANSFORM HYPERLINK string string string string backface-visibility visible | hidden target target-name string-set identifier content-list target-new perspective none target-position number text-replace none [<string> <string>]+ target-name current | root | parent | new perspective-origin [ [ [ percentage> | | modal <length> | left | center | LINE BOX string right ] [ <percentage> | <length> | top | center | target-new window | tab | none bottom ]? ] <length> ] | alignment-adjust auto | baseline | before- [ [ [ left | center | right ] || edge | text-before-edge | target-position above | behind | front | [ top | center | bottom ] ] middle | central | after-edge back <length> ] | text-after-edge | ideo- graphic | alphabetic | hang- POSITIONING transform none | matrix | matrix3d | ing | mathematical translate3d | translateX | length bottom auto translateY | translateZ | % % scale | scale3d | scaleX | length scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be- rotate3d | rotateX | rotateY fore-edge | text-before- clip shape | rotateZ | skewX | skewY | edge | after-edge | text- auto skew | perspective after-edge | central | middle | ideographic | alphabetic | left auto transform-origin [ [ [ <percentage> | hanging | mathematical % <length> | left | center | length right ] [ <percentage> | baseline-shift baseline | sub | super length position static | relative | absolute | <length> | top | center | fixed bottom ]? ] <length> ] | % [ [ [ left | center | right ] || right auto dominant-baseline auto | use-script | no- [ top | center | bottom ] ] % change | reset-size | alpha- <length> ] length betic | hanging | ideo- transform-style flat | preserve-3d graphic | mathematical | top auto central | middle | text-after- % GENERATED CONTENT edge | text-before-edge length bookmark-label content drop-initial-after-align alignment-baseline z-index auto attr number drop-initial-after-adjust central | middle | after-edge string | text-after-edge | ideo- RUBY bookmark-level none graphic | alphabetic | integer mathematical ruby-align auto | start | left | center | length end | right | distribute-letter bookmark-target self % | distribute-space | line- uri edge attr drop-initial-before-align caps-height alignment-baseline ruby-overhang auto | start | end | none border-length auto length drop-initial-before-adjust before-edge | text-before- ruby-position before | after | right | inline edge | central | middle | content normal | none | inhibit hanging | mathematical ruby-span attr(x) | none uri length % counter-increment none identifier number drop-initial-value initial integer counter-reset none identifier number drop-initial-size auto integer crop auto % shape line display normal | none | list-item inline-box-align initial | last integer float-offset length length http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  4. 4. Page 4 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) PAGED MEDIA fit fill | hidden | meet | slice fit-position [top | center | bottom] || [left | center | right] length % image-orientation auto angle orphans integer page auto identifier page-break-after auto | always | avoid | left | right page-break-before auto | always | avoid | left | right page-break-inside auto | avoid size auto | landscape | portrait length windows integer UI appearance 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] cursor auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n- resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help url icon auto | inherit url nav-index auto | inherit number nav-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> ] resize none | both | horizontal | vertical | inherit • Values in italics are place holders for an actual value (like 1px, 1em, 1%), values in normal text are values that can be used as the actual value • CSS Properties in Dark Red are shorthand properties and each value must be defined. The exception is where the property can define from one to four of the sides of a box element property (Top-Right-Bottom-Left) - i.e. border-width http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  5. 5. Page 5 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) PSEUDO-CLASS UNITS SELECTOR TYPES :active an activated element ABSOLUTE MEASUREMENT Name Info Example :focus an element while the % percentage Universal Any element * { font: 10px Arial; } element has focus cm centimeter Type Any element of h1 { text-decoration: :visited a visited link that type underline; } in inch :hover an element when you mouse Grouping Multiple h1, h2, h3 { font-family: over it mm millimeter elements of Verdana; } different types :link an unvisited link pc pica (1p = 12 points) Class Multiple .sampleclass { text- :disabled an element while the elements of decoration: underline; } element is disabled pt point (1pt = 1/72 inch) different types RELATIVE MEASUREMENT when you don’t :enabled an element while the want to affect element is enabled all instances of ch width of the "0" glyph found in :checked an element (form element the font for the font size used to that type control) that is checked render Id A single #sampleid { text- :selection an element that is currently em 1em = current font size of element type decoration: underline; } selected of highlighted by current element when you don’t the user want to affect ex x-height of the element's font all instances of :lang Allows the author to specify that type gd the grid defined by 'layout-grid' a language to use in a specified element Descendant An element that #gallery h1 { text- px pixel of the viewing device is below (in the decoration: underline; } :nth-child(n) an element that is the n-th rem the font size of the root element document tree) sibling another vh the viewport's height element—no :nth-last-child(n) an element that is the n-th matter how sibling counting from the vw the viewport's width many levels last sibling below vm viewport's height or width, :first-child an element that is the first whichever is smaller of the two Child An element that #title > p { font-weight: sibling is directly below bold; } ANGLES (in the :last-child an element that is the last document tree) sibling deg degrees another grad grads element :only-child an element that is the only child Adjacent All elements h1 + p { font-style: rad radians Sibling that share the italic; } :nth-of-type(n) an element that is the n-th turn turns same parent sibling of its type. and elements TIME are in the same :nth-last-of-type(n) an element that is the n-th sibling of its type counting immediate ms milli-seconds from the last sibling sequence s seconds :last-of-type an element that is the first General All elements h1 ~ p { font-style: sibling of its type FREQUENCY Sibling that share the italic; } same parent :first-of-type an element that is the last Hz hertz and elements sibling of its type are in the same kHz kilo-hertz sequence (not :only-of-type an element that is the only necessarily child of that type COLORS immediate) :empty an element that has no color name red, blue, green, dark green Attribute An element with E[selected] - att whatever children that matches the value rgb(x,y,z) red = rgb(255,0,0) the attribute E[att="val"] - att with a :root root element within the rgb(x%,y%,z%) red = rgb(100%,0,0) listed specific value document E[rel~="next"] - att with :not(x) an element not represented rgba(x,y,z, alpha) red = rgba(255,0,0) a value is a whitespace by the argument ‘x’ separated list #rrggbb red = #ff0000 (or shorthand = *[lang|="en"] - att value :target a target element as specified #f00) either being exactly "val" by a target in a URI or beginning with "val" hsl(hue, saturation, red = hsl(0, 100%, 50%) immediately followed by PSEUDO-ELEMENT lightness) "-" E[att^="val"] - att value ::first-letter Adds special style to the first hsla(hue, saturation, red = hsl(0, 100%, 50%) that begins with the prefix letter of a text lightness, alpha) "val" ::first-line Adds special style to the first flavor An accent color (typically chosen E[att$="val"] - att value line of a text by the user) to customize the that end with the suffix user interface of the user agent "val" ::before Inserts some content before itsel E[att*="val"] - att value an element contains at least one currentColor computed value of the instance of the substring ::after Inserts some content after an 'currentColor' keyword is the "val" element computed value of the 'color' property http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

×