Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
545
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Seminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Facilitadora: María Zeballos
  • 2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Como ya sabe, el selector indica el elemento o elementos a los que se le aplica la regla CSS y, muy importante, tenga en cuenta que los selectores distinguen entre mayúsculas y minúsculas. En las siguientes diapositivas se presentan los tipos de selectores más usados, se describe su sintaxis, se explica a qué elementos afecta el selector y se presentan ejemplos.
  • 3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector universal Se indica con un asterisco (*) Afecta a todos los elementos de la página, por los que es poco utilizado (difícilmente un estilo se aplica a toda la página. * { declaración}
  • 4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector de tipo o etiqueta Se indica con el nombre de una etiqueta html. Se aplica a todos los elementos de la página cuya etiqueta HTML coincida con el valor del selector. p { declaración} h1 { declaración} a { declaración}
  • 5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector de ID Se indica con la almohadilla (#) y el valor del atributo id del elemento que se quiere seleccionar. #texto Se aplica al elemento específico de la página cuyo atributo id coincida con el texto del selector. #principal { color: blue; }
  • 6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector de clase Se indica con un punto (.) y el valor del atributo class del elemento que se quiere seleccionar. .texto Se aplica a todos los elementos de la página cuyo atributo class coincida con el selector. Permite seleccionar varios elementos de la páginas, sin importar su tipo, ni el lugar en que estén en la misma. Se puede restringir el alcance de los selectores, para seleccionar solamente los elementos de un tipo y un atributo class determinado, se indica la etiqueta del elemento y, sin dejar ningún espacio, se indica el selector de clase. .texto { color: red; } .pie { color: blue; } em.especial {color: green; }
  • 7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector descendente Se indica separando los selectores mediante un espacio en blanco. sel1 sel 2 Permite seleccionar los elementos que se encuentran dentro de otros elementos, sin importar que sean “hijos directos”. Se pueden utilizar varios selectores descendentes seguidos. Puede combinarse con los diferentes tipos de selectores. p em { color: red; } /* color rojo para todo texto en cursiva, que esté dentro de un párrafo*/ p a em { color: blue; } /* color azul para todo texto en cursiva, que esté dentro de un enlace, que esté dentro de un párrafo. */ .pie a { color: blue; } /* todos los enlaces que estén dentro de cualquier elemento cuyo atributo class sea igual pie */ .general .aviso { color: blue; }
  • 8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector de hijos Se indica separando los selectores con el signo de mayor (>) sel1 > sel 2 Permite seleccionar un elemento que es hijo directo de otro elemento (no existen otros elementos entre ellos) p > span { color: blue; }
  • 9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS SELECTORES CSS Tipo de Selector Cómo se indica Observaciones Ejemplo Selector adyacente Se indica separando los selectores con el signo de más (+) sel1 + sel 2 Permite seleccionar elementos adyacentes (Uno después del otro), afectando la regla al que está de segundo selector. h1 + h2 { color: blue; }
  • 10. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Pseudo-Clases Las pseudo-clases permiten aplicar diferentes estilos a un mismo elemento, en función de su estado. Las pseudo-clases “:hover” y “:active” se definen para todos los elementos HTML. p:hover{} em:hover{} a:active {} … :hover permite aplicar estilos al elemento que se muestran cuando el usuario posiciona el puntero del ratón sobre el elemento. :active define estilos que se aplican al elemento cuando el usuario está pinchando sobre él.
  • 11. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Pseudo-Clases Las pseudo-clases :link y :visited solamente están definidas para los enlaces. :link, permite aplicar estilos para los enlaces que aún no han sido pinchados. a:link {text-decoration:none; color:#e45a49;} :visited, aplica estilos a los enlaces que han sido pinchados anteriormente . a:visited {text-decoration:none; color:#e45a49;}
  • 12. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS AGRUPAMIENTO Agrupamiento de selectores. CSS admite agrupamiento de selectores utilizando la coma (,) para separarlos. Ejemplo: h1, h2, h3 { color : red } /* El color de los títulos de sección 1,2 y 3 son de color rojo */
  • 13. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS AGRUPAMIENTO Agrupamiento de propiedades. CSS admite agrupamiento de propiedades para un mismo selector, utilizando el puno y coma (;) para separarlos. Ejemplo: /* Define la familia tipográfica, tamaño y color de la fuente de los títulos de sección 1. */ h1 {font-family: Arial, Verdana; font-size: 2em; color : red }
  • 14. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS HERENCIA ¡Los elementos heredan estilo de sus padres! Por ejemplo, si se define una propiedad para el elemento body todos los elementos que estén en el body heredan esa propiedad. Una vez que se establece una regla de estilo para un elemento, esa regla se aplica a todos sus descendientes; lo que no significa que todos los descendientes estén “atados” a ese estilo ya que solo se tiene que definir una nueva regla para el descendiente y se anula el estilo correspondiente que se había heredado.
  • 15. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS COLISIONES DE ESTILOS Las colisiones de estilo se dan cuando se define más de una vez la misma propiedad para un elemento. Para resolver este problema, CSS da prioridad al estilo del selector más específico, es decir, cuanto más genérico es un selector, menos importancia tienen sus declaraciones. Si se tienen dos o más reglas con la misma prioridad, prevalece el estilo definido en la última de esas reglas.