Practica06

191 views
146 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
191
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×