.GIF){kind=small}
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)
