Tablilla de propiedades Css

Como les prometí en el pasado tutorial aquí las principales propiedades y valores que se les puede dar...
No puedes llevarte la tabla a otro lado sin pedirla antes y dar créditos

═❖═ Enlaces ═❖═

✰

✰ NO VISITADOS
● a: link

✰

✰ VISITADOS
 ● a:visited

✰

✰ ENLACES ACTIVOS
 ● a: active

✰

✰ CUANDO EL RATÓN ESTA ENCIMA DEL ENLACE
 ● a: hover

═❖═ Propiedades de Fuentes ═❖═

✰

✰ FONT (Fuentes)
● font-style
● font-variant
● font-weight
● font-size
● font-family Ejemplo: p { font: italic bold 12pt Times, serif }

✰

✰ FONT-FAMILY (Familias)
● nombre de familia
● familia genérica (serif, sans-serif, cursive, fantasy, monospace)
Ejemplo: p { font: font-family: "New Century Schoolbook", Times, serif; }

✰

✰ FONT-STYLE (Estilo)
● normal
● italic
● oblique Ejemplo: p { font-style: oblique; }

✰

✰ FONT-VARIANT (Variante)
● normal
● small-caps Ejemplo: h1 { font-variant: small-caps; }

✰

✰ FONT-WEIGHT (peso)
● normal
● bold
● bolder
● lighter
● oblique Ejemplo: p { font-weight: normal; }

✰

✰ FONT-SIZE (tamaño)
● tamaño absoluto (px, pt)

(xx-small, x-small, small, medium, large, x-large, xx-large)

● tamaño relativo (larger,smaller)
● longitud
● porcentaje (%, em) .... Ejemplo: h1 { font-size: 12pt; }

═❖═ Color y Fondo ═❖═

✰

✰ COLOR (color)
● hexadecimal (#000000)
● RGB [rgb(255,00)]
● nombre del color (red) Ejemplo: p { color: #FFFFFF; }

✰

✰ BACKGROUND (Fondo)
● background-color
● background-image
● background-repeat
● background-attachment
● background-position Ejemplo: body { background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; }

✰

✰ BACKGROUND-COLOR (color de fondo)
● color
● Transparent Ejemplo: body { background-color: #FFCC66; }

✰

✰ BACKGROUND-IMAGE (Imagen de fondo)
 ● url Ejemplo: body { background-image: url (http://www.image.com/bg.png); }

✰

✰ BACKGROUND-REPEAT (Repetir fondo)
● repeat
● repeat-x
● repeat-y
● no-repeat Ejemplo: body { background: white url (white.gif); background-repeat: repeat-x; }

✰

✰ BACKGROUND-ATTACHMENT (Fijación de fondo)
● scroll
● fixed Ejemplo: body { background: white url (white.gif); background-attachment: fixed; }

✰

✰ BACKGROUND-POSITION (Posición del fondo)
● unidades fijas (px-cm-etc)
● top
● bottom
● center
● left
● right
● porcentaje Ejemplo: body { background: white url (white.gif); background-position: right bottom; }

═❖═ Texto ═❖═

✰

✰ TEXT-INDENT (sangría del Texto) Ejemplo: p { text-indent: 30px; }

✰

✰ TEXT-ALIGN (Alineación del Texto)
● left
● right
● center
● justify Ejemplo: p { text-align: center; }

✰

✰ VERTICAL-ALIGN (Alineación Vertical del Texto)
● baseline (alinea líneas bases del elemento)
● middle (alinea el punto medio vertical del elemento)
● sub (subíndice)
● super (superíndice)
● text-top (alinea las partes superiores del elemento y la fuente)
● text-bottom (alinea las partes inferiores del elemento y la fuente)
● top (alinea la parte superior del elemento con el elemento más alto en la línea)
● bottom (alinea la parte inferior del elemento con el elemento más bajo en la línea) Ejemplo: img { vertical-align: middle }

✰

✰ TEXT-TRANSFORM (Transformación del texto)
 ● Capitalize
● UPPERCASE

UPPERCASE

● lowercase
● none Ejemplo: h1 { text-transform: uppercase; }

✰

✰ TEXT-DECORATION (Decoración o efectos del texto)
● Underline (subrayado)
● Overline (subrayado por encima)
● line-through (tachado)
● none Ejemplo: A:link, A:visited, A:active { text-decoration: none; }

✰

✰ LETTER-SPACING (Espaciamiento de letras)
● Normal
● longitud Ejemplo: p { letter-spacing: 0.1em; }

✰

✰ WORD-SPACING (Espaciamiento de palabras)
● Normal
● longitud Ejemplo: p { word-spacing: 0.4em; }

✰

✰ LINE HEIGHT (Altura de línea)
● Normal
● Número*
● longitud
● Porcentaje Ejemplo: p { line-height: 200%; }

*Nota: Si fuese un número esta se calcula multiplicando el tamaño de fuente del elemento por el número.

═❖═ De los cuadros ═❖═

✰

✰ MARGIN (Margen)
● Top (superior) (Valores: longitud, porcentaje, auto)
● Right (derecho) (Valores: longitud, porcentaje, auto)
● Left (izquierdo) (Valores: longitud, porcentaje, auto)
● Bottom (inferior) (Valores: longitud, porcentaje, auto) Ejemplos: p { margin: 5em; } p { margin: 5px 10px 5px 10px ; } p { margin-top: 5px; margin-right: 15px; margin-lef: 10px; margin-bottom: 1px; }

✰

✰ PADDING (Relleno)
● Top (superior) (Valores: longitud, porcentaje)
● Right (derecho) (Valores: longitud, porcentaje)
● Left (izquierdo) (Valores: longitud, porcentaje)
● Bottom (inferior) (Valores: longitud, porcentaje) Ejemplos: h1 { padding: 2em; } h1 { padding: 5px 10px 5px 10px ; } h1 { padding-top: 5px; padding-right: 10px; padding-lef: 15px; padding-bottom: 20px; }

✰

✰ BORDER (Borde)
● Border-width (Ancho de borde) Top (superior) (Valores: thin, medium, thick) Right (derecho) (Valores: thin, medium, thick) Left (izquierdo) (Valores: thin, medium, thick) Bottom (inferior) (Valores: thin, medium, thick)
● Border-style (Estilo de borde) (Valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset)
● Border-color (Color de borde) (valor: #color, nombre del color)
Ejemplos: body { border-width: 5px; border-style: solid; border-color: green; }
 body { border: 5px solid green; }
 body {border-top: 5px solid #008000; padding-right: 10px dashed green; padding-lef: 15px dotted green; padding-bottom: 20px double #008000; }

✰

✰ WIDTH (Ancho)
● Longitud
● Porcentaje
● Auto Ejemplo: #ancho { width: 200px; }

✰

✰ HEIGHT (Altura)
● Longitud
● Auto Ejemplo: #altura { height: 40px; }

✰

✰ FLOAT (Flotar)
● left
● right
● none Ejemplo: #column { float: left; width: 50%; }

✰

✰ CLEAR (Despejar)
● left
● right
● none
● both Ejemplo: img { float: left; clear: both; }

✰

✰ POSITION (Posición)
● Static (posición por defecto)
● Absolute (no deja espacio vacío después de ser posicionado)
● Relative (se calcula desde la posición original del documento, osea ocupa espacio después de ser posicionado)
● Fixed (fija, situado con relación a la ventana del navegador)
● Inherit (posición heredada) Ejemplo: img { float: left; clear: both; }

═❖═ Clasificación ═❖═

✰

✰ DISPLAY (Visualización)
● Block (salto de línea antes y después del elemento)
● Inline (ningún salto de línea)
● List-ítem (es igual a block pero agrega un marcador de ítems de lista)
● None (sin visualización)

✰

✰ WHITE-SPACE (Espacio en blanco)
● Normal (contrae espacios en uno)
● Pre (no contrae múltiples espacios)
● nowrap (no permite el ajuste de línea sin una etiqueta <br>)

✰

✰ LIST-STYLE (Estilo de lista)
● list-style-type
● list-style-position
● list-style-image Ejemplo: li.cuadrado { list-style: square inside; }

✰

✰ LIST-STYLE-TYPE (Tipo de estilo de lista)
● disc
● circle
● square
● decimal
● lower-roman
● upper-roman
● lower-alpha
● upper-alpha
● none Ejemplo: ol { list-style-type: upper-alpha; } ◄ A B C D E...

✰

✰ LIST-STYLE-IMAGE (Imagen de estilo de lista)
● url
● none Ejemplo: ol { list-style-image: url(x.png); }

✰

✰ LIST-STYLE-POSITION (Posición de estilo de lista)
● inside (Posición interior) (las líneas se ajustan debajo del marcador en vez de tener sangría)
● outside (Posición exterior) (es el valor por defecto de la posición)

Los valores de LONGITUD pueden ser:

 

✰ ✰

Relativos

✰ ✰

● em (la altura de la fuente de los elementos)
● ex (x-height, altura de la letra "x")
● px (pixels, relativa a la resolución del lienzo)

✰ ✰

Absolutos

✰ ✰

● in (pulgadas; 1 pulgada=2.54 cm)
● cm (centímetros; 1 cm = 10 mm)
● mm (milímetros)
● pt (puntos; 1pt = 1/72 pulgada)
● pc (picas; 1 pc = 12 pt)