Tutoriales Varios

Lista de propiedades CSS

diginota Follow on Twitter ▷ 18 Oct

 

Lista de propiedades CSS
 

 

 
Tipo de letra (fuente)
Propiedad Descripción Valores
font propiedad compuesta
font-family tipo de letra (fuente) serif | sans-serif | cursive | fantasy | monospace
font-size tamaño xx-small | x-small | medium | large | x-large | xx-large | larger | smaller | longitud | %
font-size-adjust
font-stretch anchura ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal | wider | narrower
font-style inclinación normal | oblique | italic
font-variant versalitas normal | small-caps
font-weight grosor del trazo 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | bolder | lighter
Texto
Propiedad Descripción Valores
color color del texto
direction dirección del texto
letter-spacing espacio entre carácteres
text-align alineación del texto left | right | center | justify
text-decoration decoración del texto none | underline | overline | line-through | blink
text-indent sangría de la primera línea longitud | %
text-shadow
text-transform mayúsculas / minúsculas none | capitalize | uppercase | lowercase
unicode-bidi
white-space manejo de los espacios en blanco
word-spacing espacio entre palabras
Bordes
Propiedad Descripción Valores
border cuatro bordes simultáneamente border-color border-width border-style
border-top borde superior
border-right borde derecho
border-bottom borde inferior
border-left borde izquierdo
border-color color de los bordes
border-width grosor de los bordes thin | medium | thick | longitud
border-style estilos de los bordes none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-color color del borde superior
border-top-width grosor del borde superior thin | medium | thick | longitud
border-top-style estilo del borde superior none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-color color del borde derecho
border-right-width grosor del borde derecho thin | medium | thick | longitud
border-right-style estilo del borde derecho none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-color color del borde inferior
border-bottom-width grosor del borde inferior thin | medium | thick | longitud
border-bottom-style estilo del borde inferior none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-color color del borde izquierdo
border-left-width grosor del borde izquierdo thin | medium | thick | longitud
border-left-style estilo del borde izquierdo none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Márgenes
Propiedad Descripción Valores
margin cuatro márgenes simultáneamente longitud | % (de 1 a 4 valores)
margin-top margen superior longitud | %
margin-right margen derecho longitud | %
margin-bottom margen inferior longitud | %
margin-left margen izquierdo longitud | %
Relleno
Propiedad Descripción Valores
padding cuatro rellenos simultáneamente longitud | % (de 1 a 4 valores)
padding-top relleno superior longitud | %
padding-right relleno derecho longitud | %
padding-bottom relleno inferior longitud | %
padding-left relleno izquierdo longitud | %
Listas
Propiedad Descripción Valores
list-style propiedad compuesta
list-style-type tipo de marcador disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana- iroha | katakana-iroha | none | inherit
list-style-position posición del marcador inside | outside | inherit
list-style-image imagen del marcador url («ruta_y_nombre_de_archivo»)
marker-offset distancia entre marcador y elemento longitud
Fondos
Propiedad Descripción Valores
background propiedad compuesta
background-color color de fondo
background-image imagen de fondo url («ruta_y_nombre_de_archivo»)
background-position posición de la imagen de fondo 2 valores: longitud, %, top | center | bottom , left | center | right
background-repeat repetición de la imagen de fondo no-repeat | repeat-x | repeat-y | repeat
background-attachment atadura de la imagen scroll | fixed
Pseudo-elementos
Nombre Descripción Valores
:first-letter primera letra
:first:line primera línea de texto
:before inserta contenido antes del elemento
:after inserta contenido después del elemento
Pseudo-clases
Nombre Descripción Valores
:first-child primer elemento hijo
:link enlaces no visitados
:visited enlaces ya visitados
:hover cuando el ratón pasa sobre el elemento
:active cuando haces clic sobre el elemento
:focus cuando el elemento tiene el foco
:lang idioma :lang(en) | :lang(es) | :lang(fr) etc.
Tablas
Propiedad Descripción Valores
caption-side posición de la leyenda top | bottom | left | right
empty-cells borde de casillas vacías show | hide
Posicionamiento
Propiedad Descripción Valores
display tipo de caja inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none
float modo de posicionamiento flotante left | right
clear lado en el que no puede haber elementos flotantes none | left | right | both
position modo de posicionamiento static | relative | absolute | fixed
top posición del borde superior del elemento longitud | %
right posición del borde derecho del elemento longitud | %
bottom posición del borde inferior del elemento longitud | %
left posición del borde izquierdo del elemento longitud | %
overflow si el contenido desborda al elemento visible | hidden | scroll | auto
z-index apilamiento valor (número entero)
Tamaño
Propiedad Descripción Valores
width anchura longitud | % | auto
min-width anchura mínima longitud | %
max-width anchura máxima longitud | %
height altura longitud | % | auto
min-height altura mínima longitud | %
max-height anchura máxima longitud | %
line-height espaciado normal | número | longitud | %
vertical-align alineación vertical baseline | sub | super | top | text-top | middle | bottom | text-bottom | longitud | %
Interface de usuario
Propiedad Descripción Valores
cursor tipo de cursor <uri> | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help

 

Autor: Bartolomé Sintes Marco ( http://www.mclibre.org)
Etiquetas
diginota Follow on Twitter ▷ 18 Oct
Botón volver arriba