INICIO
logo de clasesordenador

TUTORIAL DE ESTILOS CSS

Lista de todas los elementos CSS para añadir estilos a un pagina html. Manual y tutorial de css

BACKGROUNDS

background: background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color background-image: url, none 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-size: length, %, auto | cover | contain background-repeat: repeat | repeat-x | repeat-y |, no-repeat background-attachment: scroll | fixed background-origin: border-box | padding-box |, content-box background-clip: length, %, border-box | padding-box |,content-box | no-clip background-color: color, transparent

BORDER

border: border-width, border-style, border-color border-width: thin | medium | thick | length border-style: none | hidden | dotted |, dashed | solid | double |, groove | ridge | inset | outset border-color: color border-bottom: border-bottom-width, border-style, border-color border-left: border-left-width, border-style, border-color border-left-style: border-style border-right-color: border-color border-right-width: thin | medium | thick | length border-top-width: thin | medium | thick | length border-break: border-width, border-style, color, close border-bottom-color: border-color border-bottom-style: border-style border-left-color: border-color border-left-width: thin | medium | thick length border-right-style: border-style border-top: border-top-width, border-style, border-color border-top-color: border-color border-top-style: border-style box-shadow: inset || [ length, length, length, length || ], none border-collapse: collapse | separate border-image: image, number / %, border-width, stretch | repeat | round ], none border-right: border-right-width, border-style, border-color border-radius: 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

BOX MODEL

float:left | right | none height: auto, length, % max-height: none, length, % max-width: none, length, % min-height: none, length, % width: auto, %, length margin: margin-top, margin-right, margin-bottom, margin-left margin-bottom: auto, length, % margin-left: auto, height, % margin-right: auto, height, % margin-top: auto, length, % padding: padding-top, padding-right, padding-bottom, padding-left padding-bottom: length, % padding-left: length, % padding-right: length, % padding-top: length, % display: none | inline | block | inlineblock, | list-item |run-in |, compact | table | inline-table |, table-row-group | table-headergroup, | 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 marquee-direction: forward | reverse marquee-loop: infinite, integer marquee-play-count: infinite, integer marquee-speed: slow | normal | fast marquee-style: scroll | slide | alternate overflow: visible | hidden | scroll |, auto | no-display | no-content, overflow-x, overflow-y overflow-style: auto | marquee-line | marqueeblock overflow-x: visible | hidden | scroll |, auto | no-display | no-content rotation: angle rotation-point: position (paired value off-set) visibility:: visible | hidden | collapse clear: left | right | both | none

FONT

font: font-style, font-variant, font-weight, font-size/line-height, font-family,caption | icon | menu | messagebox, | small-caption | status-bar font-size-adjust: none | inherit, number font-family: normal | wider | narrower |, ultra-condensed | extracondensed, | condensed | semicondensed, | semi-expanded |, ultra-expanded | inherit font-style: normal | italic | oblique |, inherit font-variant: normal | small-caps | inherit font-size: xx-small | x-small | small |, medium | large | x-large | xxlarge, | smaller | larger |, inherit, length, % font-weight: normal | bold | bolder | lighter, | 100 | 200 | 300 | 400 | 500 |, 600 | 700 | 800 | 900 | inherit

TEXT

direction: ltr | rtl | inherit hanging-punctuation: none | [ start | end | endedge ] letter spacing: normal, length, % text-outline: none, color, length unicode-bidi: normal | embed | bidi-override white-space: normal | pre | nowrap | pre-wrap, | pre-line white-space-collapse: perserve | collapse | pre-servebreaks | discard punctuation-trim: none | [ start | end | adjacent ] text-align: start | end | left | right | center | justify text-align-last: start | end | left | right | center | justify text-decoration: none | underline | overline | line-thorugh | blink text-shadow: none, color, length word-break: normal | keep-all | loose | break-strict | break-all word-wrap: normal, length, % text-emphasis: none | [ [ accent | dot | circle | disc | [ before | after ]?] text-indent: length, % text-justify: auto | inter-word | interideograph | inter-cluster | distribute | kashida | tibetan text-transform: none | capitalize | uppercase | lowercase text-wrap: normal | unresrricted | none | suppress word-spacing: normal, length, %

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-style, border-style columns: column-width, column-count column-rule-width: thin | medium | thick, length

COLORS

color: inherit, color opacity: inherit, number

GRID POSITIONING

grid-columns: none | inherit [ length percentage relative length ] grid-rows: none | inherit [ length percentage relative length ]

TEMPLATE LAYOUT

box-align: start | end | center | base box-direction: normal | reverse box-flex: normal box-flex-group: integer box-lines: single | multiple box-orient: horizontal | verticle | inlineaxis | 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 empty-cells: show | hide border-spacing: length length table-layout: auto | fixed caption-side: top | bottom | left | right

SPEECH

cue: cue-before, cue-after cue-before: url [ silent | x-soft | soft | medium | loud | x-loud | none |, inherit ], number, % mark: mark-before, mark-after mark-before: string mark-after: string voice-pitch-range: x-low | low | medium | high | xhigh | inherit, number voice-stress: strong | moderate | none | reduced | inherit voice-volume: silent | x-soft | soft | medium | loud | x-loud | inherit, number, % cue-after: url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit ], number, % pause: pause-before, pause-after pause-before: none | x-weak | weak | medium | strong | x-strong | inherit, time phonemes: string voice-duration: time voice-family: inherit | [ ] voice-rate: x-slow | slow | medium | fast | x-fast | inherit, % voice-pitch: x-low | low | medium | high | xhigh | inherit, number, % caption-side: top | bottom | left | right 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-number

LIST & MARKERS

list-style: list-style-type, list-style-position, list-style-image list-style-image: none, url list-style-type: none | asterisks | box | check | circle | diamond | disc | hyphen | square | decimal | decimalleading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | footnotes marker-offset: auto, length

ANIMATIONS

animations: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction animation-name: none | IDENT animation-duration: time animation-timing-function: ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier (number, number, number, number) animation-delay: time animation-iteration-count: inherit, number animation-direction: normal | alternate animation-play-state: running | paused

TRANSITIONS

transitions: transitions-property, transitions-duration, transitions-timing-function, transitions-delay transitions-delay: time transitions-duration: time transitions-property: none | all transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic- Bezier( number, number, number, number)

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 | signature | password] cursor: auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | swresize | 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

Fecha actualización el 2017-5-21. Fecha publicación el . Categoría: Css. Autor: Mapa del sitio