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
2017-5-21. Categoría:
Css. Autor:
Oscar olg Mapa del sitio
