Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen

Transcripción

1 Curso CSS Clase 5

2 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo de Caja. Imágenes de fondo. 5. Selectores básicos. Listas. 6. Posicionamiento, Flotamiento y Visibilidad. 7. Tablas y Layouts. Selectores avanzados. Formularios. Especificación. 8. CSS3 9. Ejercicio Práctico 10. Examen

3 Selectores

4 Selectores Los selectores permiten seleccionar un elemento, o un conjunto de elementos sobre los cuales se aplican una regla de estilo. Existen diversos tipos de Selectores que podemos utilizar como veremos.

5 CSS y selectores - Etiquetas Selectores de Etiquetas: Se aplican a todas las etiquetas HTML de un tipo determinado. Se aplican utilizando como nombre del selector el texto de la etiqueta HTML correspondiente. Para las etiquetas <p> utilizamos el selector p y así sucesivamente para las demás etiquetas HTML. Lic. Omar Esgaib-Lic.Mauricio Merín

6 CSS y selectores - Clases Otra opción es mediante los selectores de clase. Permite especificar ciertos elementos en particular, los que pertenecen a una clase dada, a los cuales aplicar un estilo. Para utilizar un selector de clase definimos el estilo con la sintaxis:.nombreclase (Punto) (Nombre de clase puede ser cualquier texto) A los elementos HTML que queremos modificar la agregamos el atributo class y como valor del mismo le asignamos el nombre de la clase elegida. Lic. Omar Esgaib-Lic.Mauricio Merín

7 CSS y selectores - Clases Esto nos permite asignar un estilo a varios elementos HTML, incluso si son de diferentes etiquetas. Lic. Omar Esgaib-Lic.Mauricio Merín

8 CSS y selectores - Clases Con el selector de clase se aplica el estilo a todos los elementos que tengan esa clase como valor de su atributo class HTML. Lic. Omar Esgaib-Lic.Mauricio Merín

9 CSS y selectores - Clases Con el selector de etiqueta se aplica la regla a los elementos que sean de dicho tipo de elemento. Lic. Omar Esgaib-Lic.Mauricio Merín

10 CSS y selectores - Clases Cuando varios selectores se aplican a un mismo elemento, pero desde selectores distintos, se utiliza la regla de especificación para saber cual gana. Esta regla se verá en próximas clases. Lic. Omar Esgaib-Lic.Mauricio Merín

11 CSS y selectores - Clases También es posible que un elemento tenga más de una clase, y se le aplicarán todas las reglas de estilo que tengan como selector alguna de dichas clases. Al asignar varias clases a un elemento, simplemente se separan por espacios.

12 CSS y selectores - Clases Varios selectores de clase aplicados a un mismo elemento.

13 CSS y selectores - ID Otra opción que podemos utilizar es el selector de ID. Esto nos permite identificar una parte específica de nuestro sitio a la cual aplicar el estilo, es decir a un único elemento. El ID es similar al uso de clases, con la diferencia que clases son selectores que se utilizan en más de un lugar (elemento). Con el ID, lo utilizamos cuando existe un único elemento con dicho identificador al cual aplicar la regla. Usar clases cuando existen mas de una ocurrencia de dicho elemento por página. Lic. Omar Esgaib-Lic.Mauricio Merín

14 CSS y selectores - ID Para crear selectores de ID utilizamos la siguiente notación: #nombre {} De igual manera, debemos agregar el atributo id a los elementos HTML que queremos modificar, cuyo valor debe ser nombre. Lic. Omar Esgaib-Lic.Mauricio Merín

15 CSS y selectores - ID Aplicar una regla de estilo utilizando un selector de Id.

16 CSS y selectores - ID Si bien se asume que los selectores de ID se utilizan con elementos una sola vez por página, y selectores de clase cuando se repiten varios elementos de dicha clase en una misma página, los navegadores ni CSS producen un error si utilizamos el mismo ID más de una vez en una misma página. Lic. Omar Esgaib-Lic.Mauricio Merín

17 CSS y selectores - ID Sin embargo, es posible que las páginas no se puedan validar si utilizamos ID más de una vez por página. Otro motivo por el cual debemos utilizar los ID y las clases correctamente es debido a JavaScript. JS utiliza el ID para encontrar y manipular elementos directamente. Además el ID nos permite hacer links internos, es decir, enlaces dentro de un mismo documento. Lic. Omar Esgaib-Lic.Mauricio Merín

18 CSS y selectores - Grupos Otra manera de utilizar selectores es mediante los selectores de grupo. Nos permite aplicar un mismo estilo a un conjunto de etiquetas, declarándolo una sola vez. Sencillamente utilizamos los selectores de la manera tradicional, separados entre sí por comas. h1, h2, h3, h4 { } Lic. Omar Esgaib-Lic.Mauricio Merín

19 CSS y selectores - Grupos Los selectores de grupo pueden combinar selectores de cualquier tipo. h1,.p, #info { }

20 CSS y selectores Selector Universal El selector universal aplica un estilo a absolutamente todas las etiquetas: * { } Lic. Omar Esgaib-Lic.Mauricio Merín

21 CSS y selectores - Descendentes Para ver los selectores descendentes, tenemos que recordar que toda página Web bien formada se puede ver como un árbol. Con la raíz siendo el elemento principal, etiqueta html. Dicha etiqueta tiene dos hijos, las etiquetas head y body, los cuales son hermanos entre sí.

22 CSS y selectores - Descendentes Ejemplo, viendo una página como un árbol.

23 CSS y selectores - Descendentes Los selectores descendentes (descendent selectors) permiten aplicar estilos a etiquetas que solo se encuentran debajo de una etiqueta particular. Nos referimos con debajo a los elementos descendientes de una etiqueta en particular, como vimos en el árbol HTML de cada página, cuya raíz es la etiqueta html. Estas relaciones entre nodos de un árbol puede ser de ancestro, descendiente, padre, hijo y hermano. Lic. Omar Esgaib-Lic.Mauricio Merín

24 CSS y selectores - Descendentes Con los selectores descendentes podemos aplicar un estilo a todas las etiquetas que descienden de un elemento (nodo) particular en el árbol de elementos HTML. Lic. Omar Esgaib-Lic.Mauricio Merín

25 CSS y selectores - Descendentes Un ejemplo: h1 strong { } Esto indica que todas las etiquetas strong, descendientes de una etiqueta h1 deben ser modificadas por el estilo. Cualquier etiqueta strong que no sea descendiente de una etiqueta h1 no se verá modificada. Con descendiente nos referimos a una etiqueta que sea hija, nieta, o más de una etiqueta. Lic. Omar Esgaib-Lic.Mauricio Merín

26 CSS y selectores - Descendentes

27 CSS y selectores - Descendentes

28 CSS y selectores - Descendentes

29 CSS y selectores - Descendentes

30 CSS y selectores - Descendentes Las reglas se pueden escribir de muchas maneras y combinando varios elementos y tipos de selectores: body li a { } p.intro a { }.intro a { } Lic. Omar Esgaib-Lic.Mauricio Merín

31 CSS y selectores - Descendentes Las reglas se pueden escribir de muchas maneras y combinando varios elementos y tipos de selectores: body li a { } p.intro a { }.intro a { } Lic. Omar Esgaib-Lic.Mauricio Merín

32 CSS y selectores - Descendentes Las reglas se pueden escribir de muchas maneras y combinando varios elementos y tipos de selectores: body li a { } p.intro a { }.intro a { } Lic. Omar Esgaib-Lic.Mauricio Merín

33 CSS y selectores - Combinaciones Se pueden combinar los selectores una manera. Podemos seleccionar elementos que sean de una clase, y al mismo tiempo, de un tipo de etiqueta. Notemos que no hay espacio entre los selectores. p.intro { } /* Todas las etiquetas p que tengan la clase intro únicamente */ p.intro a { } /* Todas las a, que desciendan en cualquier nivel de etiquetas p que tengan la clase intro*/

34 CSS y selectores - Pseudo-estados Pseudo-estados: Existen cuatro Pseudo-estados que se aplican sobre enlaces. a:link se aplica sobre cada enlace no visitado. a:visited se aplica sobre cada enlace visitado. a:hover se aplica cuando se pasa el mouse sobre un enlace. Se puede aplicar sobre otros elementos no solo enlaces. a:active se aplica cuando el usuario hace click en el enlace. Estas Pseudo-estados sirven para seleccionar un elemento en base a su estado. Lic. Omar Esgaib-Lic.Mauricio Merín

35 CSS y selectores Otros selectores: :first-letter :first-line :before (ejemplo: p.tip:before {content: "HOT TIP!" } ) :after :first-child :focus Lic. Omar Esgaib-Lic.Mauricio Merín

36 Listas

37 Listas Las propiedades de listas son pocas y sencillas, y se aplican a las listas ordenadas y no ordenadas.

38 Listas Posición viñeta

39 Listas Imagen como viñeta

40 Listas Tipo de Viñeta

41 Listas - Resumen

42 Modelo de Caja Repaso

43 Modelo de Caja

44 Alto y Ancho Min y Max hacen referencia a los valores mínimos y máximos que puede un elemento ocupar.

45 CSS Image Sprites

46 CSS Image Sprites Los CSS Image Sprites son simplemente un conjunto de imágenes, que es utilizada en nuestro sitio, unidas en una única gran imagen. Cada imagen que utilizamos en nuestra Web, se carga con una solicitud HTTP separada. Normalmente cuando tenemos muchas imágenes, y estas son pequeñas, como iconos, estamos bajando N imágenes en N solicitudes.

47 CSS Image Sprites Cada solicitud HTTP tiene una cabecera de unos cuantos bytes, si las imágenes son pequeñas como iconos, como hemos dicho, puede que incluso estemos bajando tantos bytes en cabeceras HTTP como de tamaño mismo de las imágenes. Al combinar todas las imágenes en una única gran imagen, hacemos solo una solicitud HTTP para obtenerla, ganando eficiencia al solo realizar 1 única solicitud HTTP.

48 CSS Image Sprites Pero que hacemos al bajar una única imagen para el sitio? Para esto utilizamos la propiedad background-position de CSS. Con esta propiedad movemos esta imagen en cada elemento que requiera utilizarla, colocando la imagen de fondo en la posición correcta para que sea únicamente la imagen que quiere mostrar en dicho elemento.

49 CSS Image Sprites

50 Ejercicios

51 Determinar el selector para obtener los elementos seleccionados html head body div div div p p p span a span span b

52 Determinar el selector para obtener los elementos seleccionados html body div div div p p p span a span span b

53 Determinar el selector para obtener los elementos seleccionados html head body span div div div p p p span span span span span

54 Determinar el selector para obtener los elementos seleccionados html head body div id= gral div class= gral div

55 Determinar el selector para obtener los elementos seleccionados html head body div id= gral div id= gral2 div class= gral div

56 Determinar el selector para obtener los elementos seleccionados html head body div id= gral div id= gral2 div class= gral div class= gral div ul ul li li li li li li

57 Determinar el selector para obtener los elementos seleccionados html head body div class= gral div class= gral p class= gral ul ul ol li li li

58 Determinar el selector para obtener los elementos seleccionados html head body div div class= gral div div div class= gral a a

59 Determinar el selector para obtener los elementos seleccionados html head body div id= main ol ul li li

60 Determinar el selector para obtener los elementos seleccionados html head body p class= gral div class= gral div class= gral p p p

61 Ejercicio Listas

62 Ejercicio Listas

63 Ejercicio Sprite Utilizar la siguiente imagen para aplicar la técnica de CSS Sprites en un menú: La imagen de la primera fila debe mostrarse en cuatro div, cada uno mostrando un «botón».

64 Ejercicio Sprite Utilizar la siguiente imagen para aplicar la técnica de CSS Sprites en un menú: Idem al anterior, pero al poner el mouse encima mostrar la última fila.

65 Bibliografía

66 Autores Omar Esgaib Mauricio Merin