2. 3.1 texto color font (shorthand) font-size font-family font-style font-variant font-weight text-align line-height text-decoration www.laramarcos.com
3. color Hay múltiples formas de establecer el valor del color Palabras clave, en inglés = 17 colores RGB = 16 millones de colores Propiedad que se hereda, a excepción de los enlaces Ejemplos: color: red; color: rgb (51, 204, 102); color: rgb (20%, 12%, 75%); color: #33CC66; EL MÁS UTILIZADO www.laramarcos.com
4. FONT-SIZE El valor del tamaño de letra también se puede establecer de varias maneras Medidas relativas: LA MEJOR OPCIÓN (accesibildad y flexibilidad de medios) em (M mayúscula) ex (x minúscula) px (depende de la resolución de pantalla) % (depende del tamaño de un elemento superior) Medidas absolutas cm (centímetros) mm (milímetros) pt (puntos) www.laramarcos.com
5. Font- family Al establecer el tipo de letra se recomienda indicar, al menos, tres alternativas 2 nombres de tipos de letra, por ejemplo: Times New Roman o Courier New. Y el nombre de la familia tipográfica: serif, cursive, sans-serif, fantasy y monospace. Ejemplos más habituales: font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Courier New", Courier, monospace; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; www.laramarcos.com
9. Font-weight Para cambiar la anchura de la letra Puede tomar múltiples valores pero los más útiles son: normal (valor por defecto) bold (negrita) Otros valores: 400 = normal 700 = bold lighter, bolder www.laramarcos.com
10. font Regla shorthand que engloba las 5 anteriores En ESTE CASO, sigue un orden estricto Opcionalmente: font-style, font-variant y/o font-weight (uno, dos o los tres valores) Obligatoriamente: font-size Obligatoriamente: font-family www.laramarcos.com
11. Text-align Alineación del CONTENIDO de un elemento No es únicamente para alinear texto Posibles valores left (valor por defecto) right center justify www.laramarcos.com
12. Line-height Interlineado: altura de línea de los ELEMENTOS No funciona únicamente con el texto Posibles valores Cualquier tipo de medida Un número: funciona como múltiplo del tamaño de la propia letra www.laramarcos.com
13. Text-decoration Adorno del texto Valores none (valor por defecto, excepto en los enlaces) underline (subrayado: puede parecer un enlace) overline line-through (tachado: habitual en los blogs) blink (parpadeante: poco recomendado) www.laramarcos.com
14. 3.2 enlaces color font text-decoration Jugar con ellas para establecer diferencias según el estado del enlace link (aún sin visitar) visited (visitados anteriormente) hover (puntero encima) active (momento en el que se pincha) www.laramarcos.com
15. 3.3 imágenes width height Los valores se expresan mediante cualquier tipo de medida (relativa, absoluta y %) No es recomendable deformar las proporciones de la imagen www.laramarcos.com
17. List-style-type Marcado de la lista Valores disc (círculo relleno) circle (círculo vacío) square (cuadradito) decimal, decimal-leading-zero lower-roman, upper-roman (números romanos) lower-latin, upper-latin, lower-alpha, upper-alpha (alfabeto) Otros: armenian, georgian, lower-greek www.laramarcos.com
18. List-style-position Posición del marcador respecto al texto (sólo se aprecia cuando ocupan más de una línea) Valores inside (la 2ª línea se coloca debajo del marcador) outside (la 2ª línea permanece alejado del marcador) www.laramarcos.com
19. List-style-image Utilizar una pequeña imagen como marcador de las listas Valor url (“images/marcador1.png”) www.laramarcos.com
20. 3.5 tablas border-spacing (separación entre celdas) Una medida (horizontal y vertical) Opcionalmente, una 2ª medida (la 1ª indica la horizontal y la 2ª la vertical) caption-side (posición vertical del caption) top (valor por defecto) bottom border-collapse (cómo se muestra el borde de las celdas) separate (valor por defecto) collapse www.laramarcos.com
21. 3.6 formularios Jugar con: padding (para los input type=“text”) margin display (block) float etc. Y con la pseudo-clase :focus www.laramarcos.com
