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
tutorial de css
Le pedimos permiso para tener estadisticas de su navegación en clasesordenador.com. Si sigues navegando consideramos que acepta el uso de cookies. OK Este sitio utiliza cookies, puedes comprobar la politica de cookies, aqui