10 Glosario básico

11 Comentarios /* Este es un comentario en CSS */ /* Este es uncomentario CSS de varias lineas */

12 Selectores Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración". La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

13 Selectores básicos Selector Universal Selector de tipo o EtiquetaSelector Descendente Selector de Clase Selectores de ID

14 1. Selector Universal Se utiliza para seleccionar todos los elementos de la página. * { margin: 0; padding: 0; }

15 2. Selector de tipo o etiquetaSelecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. p { ... }

16 3. Selector descendente Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. p span { color: red; }

... texto1 ...texto2

17 4. Selector de clase

Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan... Class aptent taciti sociosqu ad litora...

18 5. Selectores de ID El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. #destacado { color: red; }

19 Unidades de Medida y ColoresUnidades Relativas Unidades Absolutas Porcentajes

20 1. Unidades Relativas em, (no confundir con la etiqueta de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando px, (píxel) relativa respecto de la pantalla del usuario

21 2. Unidades Absolutas in, del inglés "inches", pulgadas (1 pulgada son 2.54cms.) cm, centímetros mm, milímetros pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 mm) pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 mm)

22 3. Porcentajes Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño de letra de los elementos: body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; }

23 Recomendaciones En general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la página y permite que los documentos se adapten fácilmente a cualquier medio y dispositivo. El documento "Recomendaciones sobre técnicas CSS para la mejora de la accesibilidad de los contenidos HTML" (http://www.w3.org/TR/WCAG10-CSS-TECHS/) elaborado por el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del texto y para todas las medidas que sean posibles.

24 Recomendaciones Normalmente se utilizan píxel y porcentajes para definir el layout del documento (básicamente, la anchura de las columnas y elementos de las páginas) y em y porcentajes para el tamaño de letra de los textos.

25 Colores Palabras clave RGB Decimal RGB Porcentual RGB Hexadecimalred, green, blue RGB Decimal p { color: rgb(71, 98, 176); } RGB Porcentual p { color: rgb(27%, 38%, 69%); } RGB Hexadecimal p { color: #4762B0; }

26 Modelo de cajas (box model)

27

28

29

30 Anchura y altura Anchura width Altura height

31 Bordes

32 Margen

33 Relleno

34 Fondos

35

36