9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Lista de propiedades CSS

La tabla siguiente resume las propiedades definidas en las recomendaciones de Hojas de Estilo en Cascada (CSS): Se incluyen las propiedades CSS 2, excepto las propiedades relacionadas con las hojas de estilo auditivas (aural). Las propiedades que han sido eliminadas en la recomendacin CSS 2.1 se listan al final. Los valores de las propiedades aadidos o eliminados en la recomendacin CSS 2.1 se indican con los smbolos (+) o (-) . Se incluyen tambin propiedades CSS 3 que admiten los navgeadores Internet Explorer, Firefox y Google Chrome Tipo de letra - Texto - Bordes - Margen exterior - Margen interior - Fondos - Listas - Tablas Tamao - Posicionamiento - Impresora - Interface de usuario - Pseudo-elementos - Pseudoclases - No incluidas en CSS 2.1 - Tipos - CSS 3

Tipo de letra (fuente) Propiedad font font-family font-size font-style font-variant font-weight Texto Propiedad color direction letterspacing line-height text-align Descripcin color del texto direccin del texto espacio entre carcteres Valores color ltr | rtl normal | distancia Descripcin propiedad compuesta tipo de letra (fuente) tamao inclinacin (cursiva) versalitas grosor del trazo (negrita) Valores [ [ font-style || font-variant || font-weight ]? font-size [ / lineheight ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar [ nombre-fuente | familia-genrica ] [, nombre-fuente | familia-genrica ]* tamao-absoluto | tamao-relativo | distancia | porcentaje normal | italic | oblique normal | small-caps normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

espaciado entre normal | nmero | distancia | porcentaje lneas alineacin del texto center | justify | left | right
1/8

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

textdecoration text-indent texttransform unicode-bidi vertical-align

decoracin del texto sangra de la primera lnea maysculas / minsculas direccin del texto alineacin vertical

none | blink | line-through | overline | underline distancia | porcentaje none | capitalize | lowercase | uppercase normal | embed | bidi-override baseline | bottom | middle | sub | super | text-bottom | texttop | top | distancia | porcentaje

espacios en white-space blanco, saltos de normal | nowrap | pre | pre-line(+) | pre-wrap(+) lnea y wrap wordspacing Bordes Propiedad border border-top borderbottom border-left border-color border-width border-style Descripcin Valores cuatro bordes border-color || border-width || border-style simultneamente borde superior border-color || border-width || border-style border-color || border-width || border-style border-color || border-width || border-style espacio entre palabras normal | distancia

border-right borde derecho borde inferior

borde izquierdo border-color || border-width || border-style color de los bordes grosor de los bordes estilos de los bordes [ color | transparent ] {1, 4} [ medium | thick | thin | distancia ] {1, 4} [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} [ color | transparent ] {1, 4}

border-top- color del borde color superior

border-top- grosor del borde [ medium | thick | thin | distancia ] {1, 4} width superior border-top- estilo del borde style superior border-right- color del borde color derecho [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} [ color | transparent ] {1, 4}

border-right- grosor del borde [ medium | thick | thin | distancia ] {1, 4} width derecho border-right- estilo del borde style derecho [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}
2/8

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

bordercolor del borde bottom-color inferior borderbottomwidth

[ color | transparent ] {1, 4}

grosor del borde [ medium | thick | thin | distancia ] {1, 4} inferior [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4} [ color | transparent ] {1, 4}

borderestilo del borde bottom-style inferior border-leftcolor border-leftwidth border-leftstyle color del borde izquierdo

grosor del borde [ medium | thick | thin | distancia ] {1, 4} izquierdo estilo del borde izquierdo [ none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid ] {1, 4}

Margen exterior Propiedad margin margin-top margin-right marginbottom margin-left Descripcin Valores cuatro mrgenes exterior [ auto | distancia | porcentaje ] {1, 4} simultneamente margen exterior auto | distancia | porcentaje superior margen exterior auto | distancia | porcentaje derecho margen exterior auto | distancia | porcentaje inferior margen exterior auto | distancia | porcentaje izquierdo

Margen interior Propiedad padding Descripcin Valores cuatro mrgenes interiores [ distancia | porcentaje ] {1, 4} simultneamente distancia | porcentaje distancia | porcentaje distancia | porcentaje distancia | porcentaje

padding-top margen interior superior paddingright paddingbottom padding-left Fondos margen interior derecho margen interior inferior margen interior izquierdo

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

3/8

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Propiedad background

Descripcin propiedad compuesta

Valores background-attachment || background-color || backgroundimage || background-position || background-repeat fixed | scroll transparent | color

background- atadura de la attachment imagen backgroundcolor de fondo color

backgroundimagen de fondo none | uri image [ [ left | center | right | distancia | porcentaje] [ top | center | background- posicin de la bottom | distancia | porcentaje] ]? | [ [ left | center | right ] || [ position imagen de fondo top | center | bottom ] ] background- repeticin de la no-repeat | repeat | repeat-x | repeat-y repeat imagen de fondo Listas Propiedad list-style list-styleimage list-styleposition Descripcin propiedad compuesta imagen del marcador posicin del marcador Valores list-style-image || list-style-position || list-style-type none | uri inside | outside none | circle | disc | square | decimal | decimal-leadingzero | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | lower-roman | upper-roman | armenian | georgian | hebrew(-) | cjk-ideographic(-) | hiragana (-) | katakana (-) | hiragana-iroha(-) | katakana-iroha(-)

list-styletype

tipo de marcador

Tablas Propiedad bordercollapse borderspacing caption-side empty-cells table-layout Tamao

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam 4/8

Descripcin

Valores

modo de bordes collapse | separate separacin entre distancia distancia? celdas posicin de la leyenda borde de casillas vacas top | bottom | left(-) | right(-) hide | show

algoritmo ancho auto | fixed de tabla

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Propiedad width min-width max-width height min-height max-height overflow

Descripcin anchura

Valores auto | distancia | porcentaje

anchura mnima distancia | porcentaje anchura mxima distancia | porcentaje altura altura mnima si el contenido desborda al elemento auto | distancia | porcentaje distancia | porcentaje

anchura mxima distancia | porcentaje auto | hidden | scroll | visible

Posicionamiento Propiedad float Descripcin Valores modo de posicionamiento none | left | right flotante lado en el que no puede haber none | both | left | right elementos flotantes modo de absolute | fixed | relative | static posicionamiento posicin del borde superior del elemento posicin del borde derecho del elemento auto | distancia | porcentaje

clear

position top

right

auto | distancia | porcentaje

bottom

posicin del borde inferior del auto | distancia | porcentaje elemento posicin del borde izquierdo auto | distancia | porcentaje del elemento recorta el elemento auto | forma none | block | compact(-) | inline | inline-block(+) | inlinetable | list-item | marker(-) | run-in | table | table-caption | table-cell | table-column | table-column-group | tablefooter-group | table-header-group | table-row | table-rowgroup hidden | collapse | visible auto | nmero-entero
5/8

left clip

display

tipo de caja

visibility z-index

visibilidad apilamiento

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

Impresora Propiedad Descripcin Valores auto | always | avoid | left | right auto | always | avoid | left | right auto | avoid page-break- salto de pgina after despus de page-break- salto de pgina before antes de page-break- salto de pgina inside dentro de orphans widows

nmero de lneas nmero-entero al final de pgina nmero de lneas al principio de la nmero-entero pgina

Interface de usuario Propiedad cursor outline outline-color outline-width outline-style Descripcin tipo de cursor Valores [uri,]* | auto | crosshair | default | help | move | pointer | progress | n-resize | ne-resize | e-resize | se-resize | sresize | sw-resize | w-resize | nw-resize | text | wait

cuatro bordes outline-color || outline-width || outline-style simultneamente color de los bordes grosor de los bordes estilos de los bordes color border-width border-style

Pseudo-elementos Nombre :after Descripcin inserta contenido despus del elemento Valores content: contenido

:before :first-letter :first:line content

inserta contenido antes content: contenido del elemento primera letra primera lnea de texto contenido generado normal(+) | none(+) | [ texto | uri | contador | attr(atributo) | open-quote | close-quote | no-open-quote | no-close-quote ]+
6/8

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

counterincrement counterreset quotes

incremento de contador

none | [ identificador nmero-entero? ]+

puesto a cero de none | [ identificador nmero-entero? ]+ contador comillas none | [ texto-apertura texto-cierre ]+

Pseudo-clases Nombre :active :first-child :focus Descripcin cuando se hace clic sobre el elemento primer elemento hijo cuando el elemento tiene el foco cuando el ratn pasa sobre el elemento idioma enlaces no visitados enlaces ya visitados :lang(en) | :lang(es) | :lang(fr) etc. Valores

:hover :lang :link :visited

Propiedades no incluidas en CSS 2.1 Propiedad font-sizeadjust font-stretch markeroffset marks Descripcin ajuste de tamao anchura distancia entre marcador y elemento Valores nmero-decimal ultra-condensed | extra-condensed | condensed | semicondensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower distancia

marcas de corte crop | cross de papel desplazamiento horizontal, desplazamiento vertical, tamao desenfoque, color

text-shadow sombreado Tipos Propiedad contador Descripcin Contador

Valores counter(nombre, estilo)

7/8

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

9/2/2014

Lista de propiedades. CSS. Pginas web HTML / XHTML y hojas de estilo CSS. Bartolom Sintes Marco

familiagenrica forma tamaoabsoluto tamaorelativo uri (para imagen de fondo o fuentes web) CSS 3 Propiedad borderradius

Familia genrica cursive | fantasy | monospace | serif | sans-serif de fuente Forma Tamao absoluto de fuente rect(top, right, bottom, left) xx-small | x-small | medium | large | x-large | xx-large

Tamao relativo larger | smaller de fuente Direccin absoluta o relativa

url("ruta_y_nombre_de_archivo")

Descripcin bordes redondeados

Valores [ distancia | porcentaje ] {1, 4} distancia | porcentaje

borde superior border-topderecho right-radius redondeado borderborde inferior bottomderecho right-radius redondeado borderborde inferior bottom-left- izquierdo radius redondeado borde superior border-topizquierdo left-radius redondeado

distancia | porcentaje

distancia | porcentaje

distancia | porcentaje

Esta pgina forma parte del curso "Pginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org Autor: Bartolom Sintes Marco ltima modificacin: 5 de noviembre de 2013

Esta obra est bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 Espaa.

http://www.mclibre.org/consultar/amaya/css/css_propiedades.html#Posicionam

8/8