CSS.docx

background Cascading Style Sheets (CSS3) BACKGROUND BORDER BOX MODEL 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 background-clip background-color background-attachment scroll | fixed background-break bounding-box | each-box | continuous background-clip length % border-box | padding-box | content-box | no-clip background-color color transparent background-image url none background-origin border-box | padding-box | content-box background-position top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right x-% y-% x-pos y-pos background-repeat repeat | repeat-x | repeat- y | no-repeat background-size length % auto | cover | contain border-top-style border-style border-top-width thin | medium | thick length border-width thin | medium | thick length border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius border-top-right-radius length border-bottom-right-radius length border-bottom-left-radius length border-top-left-radius length box-shadow inset || [ length, length, length, length || ] none border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset FONT font font-style font-variant font-weight font-size/line-height font-family max-height none length % max-width none length % min-height none | inherit length % min-width none | inherit length % width auto % length margin margin-top margin-right margin-bottom margin-left margin-bottom auto length % margin-left auto length % margin-right auto length % BORDER border border-width border-style border-color border-break border-width border-style color close border-bottom border-bottom-width border-style border-color caption | icon | menu | message-box | small- caption | status-bar font-family family-name generic-family inherit font-size xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit length % margin-top auto length % padding padding-top padding-right padding-bottom padding-left padding-bottom length % padding-left length % border-bottom-color border-color font-size-adjust none| inherit number padding-right length % border-bottom-style border-style border-bottom-width thin | medium | thick length font-stretch normal | wider | narrower | ultra-condensed | extra- condensed | condensed | semi-condensed | semi- padding-top length % marquee-direction forward | reverse border-collapse collapse | separate border-color color border-image image [ number / % border-width stretch | repeat | round ] none expanded | expanded | extra-expanded | ultra- expanded | inherit font-style normal | italic | oblique | inherit font-variant normal | small-caps | inherit font-weight normal | bold | bolder | marquee-loop infinite number marquee-play-count infinite integer marquee-speed slow | normal | fast marquee-style scroll | slide | alternate 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 border-left-width thin | medium | thick length border-right border-right-width border-style border-color border-right-color border-color border-right-style border-style border-right-width thin | medium | thick length clear left | right | both | none display 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-group overflow-style auto | marquee-line | mar- quee-block overflow-x visible | hidden | scroll | auto | no-display | no- content overflow-y visible | hidden | scroll | auto | no-display | no- content rotation angle rotation-point position (paired value off- set) visibility visible | hidden | collapse Cascading Style Sheets (CSS 3) TEXT direction ltr | rtl | inherit hanging-punctuation none | [ start | end | end- edge ] letter-spacing normal length % punctuation-trim none | [start | end | adja- cent] text-align start | end | left | right | center | justify text-align-last start | end | left | right | center | justify text-decoration none | underline | overline | line-through | blink text-emphasis none | [ [ accent | dot | circle | disc] [ before | after ]? ] text-indent length % text-justify auto | inter-word | inter- ideograph | inter-cluster | distribute | kashida | tibetan text-outline none color length text-shadow none color length text-transform none | capitalize | uppercase | lowercase text-wrap normal | unrestricted | none | suppress unicode-bidi normal | embed | bidi- override white-space normal | pre | nowrap | pre- wrap | pre-line white-space-collapse preserve | collapse | pre- serve-breaks | discard word-break normal | keep-all | loose | break-strict | break-all word-spacing normal length % word-wrap normal | break-word COLUMN column-count auto number column-fill auto | balance column-gap normal length column-rule column-rule-width column-rule-style column-rule-color column-rule-color color column-rule-style border-style column-rule-width thin | medium | thick length columns column-width column-count column-span 1 | all column-width auto length COLOR color inherit color opacity inherit number TEMPLATE LAYOUT box-align start | end | center | base- box-direction normal | reverse box-flex number box-flex-group integer box-lines single | multiple box-orient horizontal | vertical | inline- axis | block-axis box-pack start | end | center | justify box-sizing content-box | padding-box | border-box | margin-box tab-side top | bottom | left | right TABLE border-collapse collapse | separate border-spacing length length caption-side top | bottom | left | right empty-cells show | hide table-layout auto | fixed SPEECH cue cue-before cue-after cue-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-before mark-after mark-before string mark-after string pause pause-before pause-after pause-before none | x-weak | weak | medium | strong | x-strong | inherit time pause-after none | x-weak | weak | medium | strong | x-strong | inherit time phonemes string rest rest-before rest-after rest-before none | x-weak | weak | medium | strong | x-strong | inherit time rest-after none | x-weak | weak | medium | strong | x-strong | inherit time speak none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit voice-balance left | center | right | left- wards | rightwards | inherit number voice-duration time SPEECH voice-family inherit | [ ] voice-rate x-slow | slow | medium | fast | x-fast | inherit % voice-pitch x-low | low | medium | high | x-high | inherit number % voice-pitch-range x-low | low | medium | high | x-high | inherit number voice-stress strong | moderate | none | reduced | inherit voice-volume silent | x-soft | soft | me- dium | loud | x-loud | inherit number % LIST & MARKERS list-style list-style-type list-style-position list-style-image list-style-image none url list-style-position Inside | outside list-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 | footnotes marker-offset auto length ANIMATIONS animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-delay time animation-direction normal | alternate animation-duration time animation-iteration-count inherit number animation-name none | IDENT animation-play-state running | paused animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (number, num- ber, number, number) TRANSITIONS transition transition-property transition-duration transition-timing-function transition-delay transition-delay time transition-duration time transition-property none | all transition-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (number, num- ber, number, number) Cascading Style Sheets (CSS 3) GRID POSITIONING grid-columns none | inherit [ length percentage relative length ] grid-rows none | inherit [ length percentage relative length ] OUTLINE outline outline-color outline-style outline-width outline-color color invert outline-offset inherit length outline-style None | dotted | dashed | solid | double | groove | ridge | inset | outset outline-width thin | medium | thick length 3D / 2D TRANSFORM backface-visibility visible | hidden perspective none number perspective-origin [ [ [ percentage> | | left | center | right ] [ | | top | center | bottom ]? ] ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] ] transform none | matrix | matrix3d | translate3d | translateX | translateY | translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate | rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew | perspective transform-origin [ [ [ | | left | center | right ] [ | | top | center | bottom ]? ] ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] ] transform-style flat | preserve-3d GENERATED CONTENT GENERATED CONTENT hyphenate-after auto integer hyphenate-before auto integer hyphenate-character auto string hyphenate-lines no-limit integer hyphenate-resource none uri hyphens none | manual | auto image-resolution normal | auto dpi marks [ crop || cross ] | none move-to normal | here identifier page-policy start | first | last quotes none string string string string string-set identifier content-list text-replace none [ ]+ LINE BOX alignment-adjust auto | baseline | before- edge | text-before-edge | middle | central | after-edge | text-after-edge | ideo- graphic | alphabetic | hang- ing | mathematical length % alignment-baseline baseline | use-script | be- fore-edge | text-before- edge | after-edge | text- after-edge | central | middle | ideographic | alphabetic | hanging | mathematical baseline-shift baseline | sub | super length % dominant-baseline auto | use-script | no- change | reset-size | alpha- betic | hanging | ideo- graphic | mathematical | central | middle | text-after- edge | text-before-edge LINE BOX line-height normal number length % line-stacking line-stacking-strategy line-stacking-ruby line-stacking-shift line-stacking-strategy inline-line-height | block- line-height | max-height | grid-height line-stacking-ruby exclude-ruby | include-ruby line-stacking-shift consider-shifts | disregard- shifts text-height auto | font-size | text-size | max-size vertical-align Baseline | sub | super | top | text-top | middle | bottom | text-bottom length % HYPERLINK target target-name target-new target-position target-name current | root | parent | new | modal string target-new window | tab | none target-position above | behind | front | back POSITIONING bottom auto % length clip shape auto left auto % length position static | relative | absolute | fixed right auto % length top auto % length bookmark-label content attr string bookmark-level none integer bookmark-target self uri attr border-length auto length content normal | none | inhibit uri counter-increment none identifier number counter-reset none identifier number crop auto shape display normal | none | list-item float-offset length length drop-initial-after-align alignment-baseline drop-initial-after-adjust central | middle | after-edge | text-after-edge | ideo- graphic | alphabetic | mathematical length % drop-initial-before-align caps-height alignment-baseline drop-initial-before-adjust before-edge | text-before- edge | central | middle | hanging | mathematical length % drop-initial-value initial integer drop-initial-size auto integer % line inline-box-align initial | last integer z-index auto number RUBY ruby-align auto | start | left | center | end | right | distribute-letter | distribute-space | line- edge ruby-overhang auto | start | end | none ruby-position before | after | right | inline ruby-span attr(x) | none 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 [ current | root | ] nav-right auto | inherit [ current | root | ] nav-down auto | inherit [ current | root | ] nav-left auto | inherit [ current | root | ] resize none | both | horizontal | vertical | inherit Cascading Style Sheets (CSS 3) PSEUDO-CLASS UNITS SELECTOR TYPES :active an activated element ABSOLUTE MEASUREMENT Name Info Example :focus an element while the element has focus :visited a visited link :hover an element when you mouse over it :link an unvisited link :disabled an element while the element is disabled :enabled an element while the element is enabled :checked an element (form element control) that is checked % percentage cm centimeter in inch mm millimeter pc pica (1p = 12 points) pt point (1pt = 1/72 inch) RELATIVE MEASUREMENT ch width of the "0" glyph found in the font for the font size used to render Universal Any element Type Any element of that type Grouping Multiple elements of different types Class Multiple elements of different types when you don’t want to affect all instances of that type Id A single * { font: 10px Arial; } h1 { text-decoration: underline; } h1, h2, h3 { font-family: Verdana; } .sampleclass { text- decoration: underline; } #sampleid { text- :selection an element that is currently selected of highlighted by the user :lang Allows the author to specify a language to use in a specified element em 1em = current font size of current element ex x-height of the element's font gd the grid defined by 'layout-grid' px pixel of the viewing device element type when you don’t want to affect all instances of that type Descendant An element that is below (in the decoration: underline; } #gallery h1 { text- decoration: underline; } :nth-child(n) an element that is the n-th sibling :nth-last-child(n) an element that is the n-th sibling counting from the last sibling :first-child an element that is the first sibling :last-child an element that is the last sibling rem the font size of the root element vh the viewport's height vw the viewport's width vm viewport's height or width, whichever is smaller of the two ANGLES deg degrees document tree) another element—no matter how many levels below Child An element that is directly below (in the document tree) another #title > p { font-weight: bold; } :only-child an element that is the only child :nth-of-type(n) an element that is the n-th sibling of its type. :nth-last-of-type(n) an element that is the n-th sibling of its type counting from the last sibling :last-of-type an element that is the first sibling of its type :first-of-type an element that is the last sibling of its type :only-of-type an element that is the only child of that type grad grads rad radians turn turns TIME ms milli-seconds s seconds FREQUENCY Hz hertz kHz kilo-hertz COLORS element Adjacent All elements Sibling that share the same parent and elements are in the same immediate sequence General All elements Sibling that share the same parent and elements are in the same sequence (not necessarily immediate) h1 + p { font-style: italic; } h1 ~ p { font-style: italic; } :empty an element that has no children :root root element within the document color name red, blue, green, dark green rgb(x,y,z) red = rgb(255,0,0) rgb(x%,y%,z%) red = rgb(100%,0,0) Attribute An element with that matches the attribute listed E[selected] - att whatever the value E[att="val"] - att with a specific value E[rel~="next"] - att with :not(x) an element not represented by the argument ‘x’ :target a target element as specified by a target in a URI PSEUDO-ELEMENT ::first-letter Adds special style to the first letter of a text ::first-line Adds special style to the first line of a text ::before Inserts some content before an element ::after Inserts some content after an element rgba(x,y,z, alpha) red = rgba(255,0,0) #rrggbb red = #ff0000 (or shorthand = #f00) hsl(hue, saturation, red = hsl(0, 100%, 50%) lightness) hsla(hue, saturation, red = hsl(0, 100%, 50%) lightness, alpha) flavor An accent color (typically chosen by the user) to customize the user interface of the user agent itsel currentColor computed value of the 'currentColor' keyword is the computed value of the 'color' property a value is a whitespace separated list *[lang|="en"] - att value either being exactly "val" or beginning with "val" immediately followed by "-" E[att^="val"] - att value that begins with the prefix "val" E[att$="val"] - att value that end with the suffix "val" E[att*="val"] - att value contains at least one instance of the substring "val" 593766158964An A-Z Index of CSS properties animation -name, -duration, -timing-function -delay -iteration-count -direction -fill-mode CSS3 background -Attachment -Color -Image -Repeat -Position background-Clip The painting area of the background. CSS3 background-Origin The positioning area of the background images. CSS3 background-Size Size or resize a background image. CSS3 bookmark-label Label a bookmark. CSS3 bookmark-target Target of a bookmark link. CSS3 border -color -style -width Set all 4 borders. border-bottom -bottom-width -bottom-style -bottom-color border-left -left-width -left-style -left-color border-right -right-width -right-style -right-color border-top -top-width -top-style -top-color border-collapse Collapse table borders. border-spacing Distance between the borders of adjacent cells. border-image Set a border image. CSS3 border-radius -top-left-radius -top-right-radius -bottom-left-radius -bottom-right-radius CSS3 bottom Bottom position of a positioned element box-align Align the child elements of a box. CSS3 box-direction The direction in which children of a box are displayed. CSS3 box-flex Whether the children of a box are flexible or inflexible in size. CSS3 box-ordinal-group Display order of the child elements of a box. CSS3 box-orient Position child elements horizontally or vertically. CSS3 box-pack Define the horizontal or vertical position or a box. CSS3 box-shadow Attach one or more drop-shadows to the box. CSS3 box-sizing The CSS box model used to calculate the height and width of elements. CSS3 c clear Set sides of an element where other floating elements are not allowed clip Clip an absolutely positioned image/element. color Text color column-gap Gap between the columns. CSS3 column-rule -rule-color -rule-style -rule-width CSS3 column-span How many columns an element should span across. CSS3 columns -width -count CSS3 content Insert generated content before or after an element. counter-increment Increment one or more counters. CSS3 counter-reset Create or reset one or more counters. CSS3 crop Allow a replaced element to be a cropped area of the whole object. CSS3 00An A-Z Index of CSS properties animation -name, -duration, -timing-function -delay -iteration-count -direction -fill-mode CSS3 background -Attachment -Color -Image -Repeat -Position background-Clip The painting area of the background. CSS3 background-Origin The positioning area of the background images. CSS3 background-Size Size or resize a background image. CSS3 bookmark-label Label a bookmark. CSS3 bookmark-target Target of a bookmark link. CSS3 border -color -style -width Set all 4 borders. border-bottom -bottom-width -bottom-style -bottom-color border-left -left-width -left-style -left-color border-right -right-width -right-style -right-color border-top -top-width -top-style -top-color border-collapse Collapse table borders. border-spacing Distance between the borders of adjacent cells. border-image Set a border image. CSS3 border-radius -top-left-radius -top-right-radius -bottom-left-radius -bottom-right-radius CSS3 bottom Bottom position of a positioned element box-align Align the child elements of a box. CSS3 box-direction The direction in which children of a box are displayed. CSS3 box-flex Whether the children of a box are flexible or inflexible in size. CSS3 box-ordinal-group Display order of the child elements of a box. CSS3 box-orient Position child elements horizontally or vertically. CSS3 box-pack Define the horizontal or vertical position or a box. CSS3 box-shadow Attach one or more drop-shadows to the box. CSS3 box-sizing The CSS box model used to calculate the height and width of elements. CSS3 c clear Set sides of an element where other floating elements are not allowed clip Clip an absolutely positioned image/element. color Text color column-gap Gap between the columns. CSS3 column-rule -rule-color -rule-style -rule-width CSS3 column-span How many columns an element should span across. CSS3 columns -width -count CSS3 content Insert generated content before or after an element. counter-increment Increment one or more counters. CSS3 counter-reset Create or reset one or more counters. CSS3 crop Allow a replaced element to be a cropped area of the whole object. CSS3 95002645431 cursor The type of cursor to be displayed. d direction The text reading direction, left-to-right or right-to-left. display How to display an HTML element. f float Shift to the left (or right) allowing other content to flow/wrap alongside. font -family -size -style(italic/normal) -variant(small-caps) -weight(Normal/bold) @font-face Download and use a web font. font-size-adjust Attempt to normalise the font size. CSS3 font-smoothing Apply anti-aliasing to fonts. font-stretch Select a normal, condensed, or expanded font face. CSS3 g grid-columns Width of each column in a grid. CSS3 grid-rows Height of each column in a grid. CSS3 h height Height of an element. max-height Maximum height of an element. min-height Minimum height of an element. hyphens How to split words to improve the paragraph layout. CSS3 @keyframes Control the intermediate steps in a CSS animation l left Left position of a positioned element. Letter-Spacing Increase or decrease the space between characters. line-height Line height. list-style -image -position -type list-item markers. m margin -top -right -bottom -left marquee -direction -play-count -speed -style Moving content. max-width Maximum width of an element. min-width Minimum width of an element. o opacity Opacity level for an element. CSS3 outline -color -style -width outline-offset Offset an outline, and draw it beyond the border edge. CSS3 overflow What happens if content overflows an element's box. overflow-x Whether to clip the left/right edges of overflowing content. CSS3 overflow-y Whether to clip the top/bottom edges of overflowing content. CSS3 overflow-wrap Break lines within words in order to prevent overflow. CSS3 text-overflow What should happen when text overflows the containing element. CSS3 p padding -bottom -left -right -top page-break-after Adjust page breaks after the current element. 00 cursor The type of cursor to be displayed. d direction The text reading direction, left-to-right or right-to-left. display How to display an HTML element. f float Shift to the left (or right) allowing other content to flow/wrap alongside. font -family -size -style(italic/normal) -variant(small-caps) -weight(Normal/bold) @font-face Download and use a web font. font-size-adjust Attempt to normalise the font size. CSS3 font-smoothing Apply anti-aliasing to fonts. font-stretch Select a normal, condensed, or expanded font face. CSS3 g grid-columns Width of each column in a grid. CSS3 grid-rows Height of each column in a grid. CSS3 h height Height of an element. max-height Maximum height of an element. min-height Minimum height of an element. hyphens How to split words to improve the paragraph layout. CSS3 @keyframes Control the intermediate steps in a CSS animation l left Left position of a positioned element. Letter-Spacing Increase or decrease the space between characters. line-height Line height. list-style -image -position -type list-item markers. m margin -top -right -bottom -left marquee -direction -play-count -speed -style Moving content. max-width Maximum width of an element. min-width Minimum width of an element. o opacity Opacity level for an element. CSS3 outline -color -style -width outline-offset Offset an outline, and draw it beyond the border edge. CSS3 overflow What happens if content overflows an element's box. overflow-x Whether to clip the left/right edges of overflowing content. CSS3 overflow-y Whether to clip the top/bottom edges of overflowing content. CSS3 overflow-wrap Break lines within words in order to prevent overflow. CSS3 text-overflow What should happen when text overflows the containing element. CSS3 p padding -bottom -left -right -top page-break-after Adjust page breaks after the current element. 617517158964 page-break-before Adjust page breaks before the current element. position Positioning method for an element. (static, relative, absolute or fixed) q quotes Type of quotation marks for embedded quotations. r right Right position of a positioned element. t table-layout How to layout table columns. top Top position of a positioned element. text-align Horizontal alignment of text. text-decoration Add decoration to text. text-indent Indent the first line in a text-block. text-overflow What should happen when text overflows the containing element. CSS3 text-shadow Add a shadow to text. CSS3 text-transform Change the capitalization of text. text-align-last How to align the last line of text. CSS3 text-justify Justification method used when text-align is "justify". CSS3 text-rendering Choose the quality of text over speed. transform Apply a 2D or 3D transformation to an element. CSS3 transform-origin Change the position of transformed elements. CSS3 transform-style How nested elements are rendered in 3D space. CSS3 transition -property -duration -timing-function -delay CSS transition effects. CSS3 u unicode-bidi Control the inline direction of text. user-select Control the selection of text. vertical-align Vertical alignment of an image/element. visibility Hide or show an element. w white-space How white-space inside an element is handled. word-spacing Increase or decrease the space between words. word-wrap Break lines within words in order to prevent overflow. width Width of an element. max-width Maximum width of an element. min-width Minimum width of an element. z-index Stack order of a positioned element. /* This is a CSS comment */ Bold = Shortcut property Grey = limited web browser support. 00 page-break-before Adjust page breaks before the current element. position Positioning method for an element. (static, relative, absolute or fixed) q quotes Type of quotation marks for embedded quotations. r right Right position of a positioned element. t table-layout How to layout table columns. top Top position of a positioned element. text-align Horizontal alignment of text. text-decoration Add decoration to text. text-indent Indent the first line in a text-block. text-overflow What should happen when text overflows the containing element. CSS3 text-shadow Add a shadow to text. CSS3 text-transform Change the capitalization of text. text-align-last How to align the last line of text. CSS3 text-justify Justification method used when text-align is "justify". CSS3 text-rendering Choose the quality of text over speed. transform Apply a 2D or 3D transformation to an element. CSS3 transform-origin Change the position of transformed elements. CSS3 transform-style How nested elements are rendered in 3D space. CSS3 transition -property -duration -timing-function -delay CSS transition effects. CSS3 u unicode-bidi Control the inline direction of text. user-select Control the selection of text. vertical-align Vertical alignment of an image/element. visibility Hide or show an element. w white-space How white-space inside an element is handled. word-spacing Increase or decrease the space between words. word-wrap Break lines within words in order to prevent overflow. width Width of an element. max-width Maximum width of an element. min-width Minimum width of an element. z-index Stack order of a positioned element. /* This is a CSS comment */ Bold = Shortcut property Grey = limited web browser support. 58166018732500