Your SlideShare is downloading. ×
CSS3 דף קוד
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 דף קוד

224
views

Published on

Published in: Technology, Education

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
224
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Page 1 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) BACKGROUND BORDER BOX MODELbackground 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 % lengthbackground-attachment scroll | fixed max-width none border-width thin | medium | thick lengthbackground-break bounding-box | each-box | length % continuous border-radius border-top-right-radius min-height none | inheritbackground-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 lengthbackground-color color transparent % border-bottom-right-radius lengthbackground-image url width auto border-bottom-left-radius length % none lengthbackground-origin border-box | padding-box | border-top-left-radius length content-box margin margin-top box-shadow inset || [ length, length, margin-rightbackground-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 lengthbackground-repeat repeat | repeat-x | repeat- y | no-repeat % font font-style font-variant margin-right autobackground-size length font-weight length % font-size/line-height % auto | cover | contain font-family caption | icon | menu | margin-top auto BORDER message-box | small- lengthborder border-width caption | status-bar % border-style font-family family-name padding padding-top border-color generic-family padding-rightborder-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 lengthborder-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- numberborder-color color expanded | inherit marquee-play-count infiniteborder-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-xborder-left-color border-color BOX MODEL overflow-yborder-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar- quee-blockborder-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-groupborder-right-width thin | medium | thick | ruby-text-group rotation-point position (paired value off- length set) visibility visible | hidden | collapsehttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • 2. Page 2 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) TEXT TEMPLATE LAYOUT SPEECHdirection 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 | highpunctuation-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 | justifytext-align-last start | end | left | right | | x-high | inherit center | justify box-sizing content-box | padding-box | number border-box | margin-boxtext-decoration none | underline | overline | voice-stress strong | moderate | none | line-through | blink tab-side top | bottom | left | right reduced | inherittext-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 numbertext-indent length % % border-spacing length length LIST & MARKERStext-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-imagetext-outline none table-layout auto | fixed color list-style-image none length SPEECH urltext-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-beforewhite-space-collapse preserve | collapse | pre- mark-after marker-offset auto serve-breaks | discard length mark-before stringword-break normal | keep-all | loose | break-strict | break-all ANIMATIONS mark-after stringword-spacing normal animation animation-name length pause pause-before animation-duration % pause-after animation-timing-function animation-delayword-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count medium | strong | x-strong animation-direction COLUMN | inherit time animation-delay timecolumn-count auto number pause-after none | x-weak | weak | animation-direction normal | alternate medium | strong | x-strongcolumn-fill auto | balance | inherit animation-duration time timecolumn-gap normal animation-iteration-count inherit length phonemes string numbercolumn-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 | inheritcolumns column-width transition transition-property time column-count transition-duration speak none | normal | spell-out | transition-timing-functioncolumn-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 | allcolor 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. Page 3 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) GRID POSITIONING GENERATED CONTENT LINE BOXgrid-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-rubyoutline-color color invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard- image-resolution normal | auto shiftsoutline-offset inherit length dpi text-height auto | font-size | text-size | marks [ crop || cross ] | none max-sizeoutline-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-bottomoutline-width thin | medium | thick length page-policy start | first | last length % quotes none 3D / 2D TRANSFORM HYPERLINK string string string stringbackface-visibility visible | hidden target target-name string-set identifier content-list target-newperspective none target-position number text-replace none [<string> <string>]+ target-name current | root | parent | newperspective-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- POSITIONINGtransform 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 autotransform-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 lengthbookmark-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- RUBYbookmark-level none graphic | alphabetic | integer mathematical ruby-align auto | start | left | center | length end | right | distribute-letterbookmark-target self % | distribute-space | line- uri edge attr drop-initial-before-align caps-height alignment-baseline ruby-overhang auto | start | end | noneborder-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 integercounter-reset none identifier number drop-initial-size auto integercrop auto % shape linedisplay normal | none | list-item inline-box-align initial | last integerfloat-offset length lengthhttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • 4. Page 4 of 5 Quick Reference Guide FREE Cascading Style Sheets (CSS 3) PAGED MEDIAfit fill | hidden | meet | slicefit-position [top | center | bottom] || [left | center | right] length %image-orientation auto angleorphans integerpage auto identifierpage-break-after auto | always | avoid | left | rightpage-break-before auto | always | avoid | left | rightpage-break-inside auto | avoidsize auto | landscape | portrait lengthwindows integer UIappearance 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 urlicon auto | inherit urlnav-index auto | inherit numbernav-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-widthhttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved
  • 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 elements 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 viewports height element—no:nth-last-child(n) an element that is the n-th matter how sibling counting from the vw the viewports width many levels last sibling below vm viewports 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 propertyhttp://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

×