Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Practica06

259 views

Published on

  • Be the first to comment

  • Be the first to like this

Practica06

  1. 1. Desarrollo web con Flash Práctica 6 Práctica 6: Selectores, herencia, orden y pesoEstructuras de una páginaLos selectores indican a que código html afecta cual regla, sirven para crear un código ordenado,limpio y fácil de mantener. 1. Selector universal: Aplica las propiedades de la regla a cualquier elemento HTML. 2. Selector de tipo: Aplica las propiedades de la regla a los elemento XHTML que nombra. <p>Lorem ipsum . . . </p> 3. Selector de Clase: Aplica las propiedades de la regla a los elemento XHTML en base al nombre de su atributo class. <p class="intro">Lorem ipsum . . . </p> 4. Selector de ID: Aplica las propiedades de la regla a los elemento XHTML en base al nombre de su atributo id. Este nombre tiene que ser único en la página. <p id="intro">Lorem ipsum . . . </p> 5. Selectores en Grupo: Podemos agrupar varios selectores separados por comas como declaración de selector de una regla. <p>... </p> <div> ... </div> <ul> ... </ul>Ing. Hugo Mendieta Pacheco 1
  2. 2. Desarrollo web con Flash Práctica 6 6. Selector Descendente: Aplica las propiedades de una regla a los elementos que están dentro de otro elemento. <div> <p>Lorem ipsum... </p> </div> 7. Selector Hijo: Aplica las propiedades de la regla a los elementos que sean hijos inmediatos de su padre. <div> <a href=""> ... </a> <p><a href=""> ...</a></p> </div> 8. Selector Adyacente: Aplica las propiedades de la regla a los elemento inmediatamente precedidos por un elemento hermano. <p> . . . </p> <p> . . . </p> <p> . . . </p> 9. seudo clase: • Selector pseudo-clase :link, aplica las propiedades de la regla a los links no visitados. • Selector pseudo-clase :visited, aplica las propiedades de la regla a los links no visitados. • Selector pseudo-clase :active, aplica las propiedades de la regla a los links no visitados.Ing. Hugo Mendieta Pacheco 2
  3. 3. Desarrollo web con Flash Práctica 6 • Selector pseudo-clase :hover, aplica las propiedades de la regla a los links no visitados. 10. Selector pseudo-elemento First letter: Aplica las propiedades de a regla a la primera letra de un elemento. <p> . . . </p> 11. Selector pseudo-elemento First line: Aplica las propiedades de a regla a la primera línea de un elemento.<p> . . . </p>HerenciaLos atributos de las etiquetas se heredan acorde al del padre.Practica 1: En la página herencia.html, siga las indicaciones del instructor para cambiar los elementosmediante los atributos de clase.Orden de lecturaSolución a conflictos con las reglas:Practica 2: Abra la página conflictos.html, y siga las indicaciones del instructor: • Coloque css mediante un archivo vinculado. • Sobre escriba mediante CSS internos. • Agrege css en línea, para sobre escribir los anteriores. • Mediante CSS internos, verifique la aplicación de las reglas.Ing. Hugo Mendieta Pacheco 3
  4. 4. Desarrollo web con Flash Práctica 6Peso de los SelectoresPractica 3: En el archivo peso.html, realice las siguientes actividades: • Escriba un selector de tipo. • Sobre escriba el selector de tipo con un selector de clase. • Implemente un selector de id, para sobre escribir a los anteriores. • Escriba un selector combinado.Ing. Hugo Mendieta Pacheco 4

×