Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales

Transcripción

1 Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales

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

3 Selector de etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. h1 { } color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif;

4 Selectores de etiqueta combinados h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

5 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; } h1 span { color: blue; }

6 Selector descendente No debe confundirse el selector descendente con la combinación de selectores /* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; }

7 Selector de clase Para aplicar estilos a un solo elemento de la página se utiliza el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar. HTML <p class="destacado">texto texto...</p> CSS.destacado { color: red; }

8 Selector de clase En una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class. <p class="destacado">texto texto...</p> <p>texto <a href="#" class="destacado">link</a> texto...</p> <p>texto <em class="destacado">texto</em> texto...</p>

9 Combinar selectores de etiqueta y clase Combinando el selector de etiqueta y el selector de clase, se obtiene un selector mucho más específico. p.destacado { color: red; } Este ejemplo se aplica sólo a aquellos elementos <p> que dispongan de un atributo class con valor destacado.

10 Selectores combinados /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso {... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p.aviso {... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p,.aviso {... }

11 Selector 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.

12 Selector de ID CSS #destacado { color: red; } HTML <p>primer parrafo</p> <p id="destacado">segundo parrafo</p> <p>tercer parrafo</p>

13 Combinar selectores de etiqueta y de ID Este ejemplo se aplica al elemento de tipo <p> que tenga un atributo id igual a aviso. p#aviso { color: blue; }

14 Selectores combinados /* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso {... } /* Todos los elementos con atributo id="aviso" que estén dentro de cualquier elemento de tipo "p" */ p #aviso {... } /* Todos los elementos "p" de la página y el los elementos con atributo id="aviso" de la página */ p, #aviso {... }

15 Herencia Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor. La herencia de estilos no funciona en todas las propiedades CSS, por lo que se debe estudiar cada propiedad de forma individual.

16 Unidades de medida Las medidas en CSS se usan, entre otras, para definir altura, ancho y márgenes de los elementos y para establecer el tamaño de letra del texto. CSS divide todas las unidades de medida en absolutas y relativas. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente.

17 Unidades relativas em ex px relativa respecto del tamaño de letra empleado (ancho de la M) del elemento padre relativa respecto de la altura x del tipo de letra que se esté utilizando relativa respecto de la pantalla del usuario

18 Unidades absolutas in, pulgadas (1 pulgada son 2.54 centímetros) cm, centímetros mm, milímetros pt, puntos (1 punto es 1/72 pulgada) pc, picas (1 pica equivale a 12 puntos)

19 Porcentajes CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje siempre está referenciado a otra medida, normalmente el elemento contenedor. Los elementos de bloque de manera predeterminada tienen un ancho de 100%.

20 Recomendaciones Usar em como unidad de medida para los tamaños del texto y los tamaños de los elementos relacionados con el texto (interlineado, márgenes entre párrafos, etc.). Usar porcentajes para los demás elementos, definiendo un contenedor. Pero siempre, siempre evaluar lo que mejor sirve según cada caso.

21 Colores Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave (color name), colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. El método más habitual es el del RGB hexadecimal.

22 Colores Color names aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, etc. Son 140 en total olors/colors_names.asp

23 Colores RGB hexadecimal Para obtener el color completo en formato RGB hexadecimal, se concatenan los valores de las componentes RGB en ese orden y se les añade el prefijo #. Por ejemplo: #4762B0

24 Colores Una de las ventajas del formato RGB hexadecimal es que se pueden comprimir sus valores cuando todas sus componentes son iguales dos a dos: #AAA = #AAAAAA #FFF = #FFFFFF #A0F = #AA00FF #369 = #336699

25 Tipografía CSS define numerosas propiedades para modificar la apariencia del texto. color font-family font-size font-weight font-style font-variant

26 Tipografías en la web Se deben utilizar tipografías que estén disponibles en los distintos sistemas operativos y que sean de buena legibilidad en pantalla Se definen por grupos Arial, Helvetica, sans-serif Verdana, Arial, Helvetica, sans-serif Times New Roman, Times, serif Georgia, Times New Roman, Times, serif Courier New, Courier, monospace

27 Texto Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. text-align line-height text-decoration text-transform

28 Links Los estilos más sencillos que se pueden aplicar a los links son los que modifican su tamaño de letra, su color y la decoración del texto del link. CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado utilizando pseudo-clases.

29 Pseudo-clases Una pseudo-clase es una palabra clave que se agrega a los selectores para especificar un estado especial del elemento. Las pseudo-clases permiten aplicar estilos a un elemento no sólo en relación a la estructura del documento, sino también en relación a factores externos como el history del navegador o la posición del mouse.

30 Pseudo-clases :link, aplica estilos a links que aún no han sido visitados :visited, aplica estilos a links que han sido visitados anteriormente :hover, aplica estilos al link sobre el que el usuario ha posicionado el mouse :active, aplica estilos al link que el usuario está presionando

31 Pseudo-clases para links /* link no visitado */ a:link { color: #FF0000; } /* link visitado*/ a:visited { color: #00FF00; } /* mouse over */ a:hover { color: #FF00FF; } /* seleccionado */ a:active { color: #0000FF; }

32 Combinando clases y pseudo-clases a.uno:hover { } color: #ff0000; Sólo aplica el estilo al link que tiene el atributo class="uno" cuando el usuario pasa el mouse por encima

33 Pseudo-clases CSS3 :first-of-type, aplica estilos al primer elemento de su tipo :last-of-type, aplica estilos al último elemento de su tipo :only-of-type, aplica estilo al elemento único en su tipo

34 Pseudo-clases CSS3 :first-child, aplica estilos al primer elemento hijo del elemento padre :last-child, aplica estilos al último elemento hijo del elemento padre :only-child, aplica estilos al elemento hijo único del elemento padre

35 Pseudo-elementos Un pseudo-elemento es una palabra clave que se agrega a los selectores para aplicar estilos a una parte específica del documento.

36 Pseudo-elementos CSS3 ::first-line, aplica estilos a la primera línea de texto del elemento ::first-letter, aplica estilos a la primera letra de la primera línea ::selection, aplica estilos al elemento seleccionado en el momento Nota: en CSS2 se escribía con : y en CSS3 se escribe :: (no todos los pseudo-elementos funcionan con : pero sí todos con ::)

37 Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales