Principales propiedades CSS agrupadas por leemnetos: textos, imágenes, enlaces, etc.

1. PROPIEDADES TEMA 3 www.laramarcos.com

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

7. normal (valor por defecto)

8. small-caps (mayúsculas pequeñas)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

16. 3.4 listas list-style (shorthand) list-style-type list-style-position list-style-image 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