IV Unidad PDF

Planificacin de Clase
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M. 05 y 8 octubre de 2012 Clase: N 4 Unidad IV: Hojas de Estilo en Cascada CSS3 Contenidos: 1. Qu es Hojas de estilo en cascada CSS3? 2. Sintaxis y comentarios 3. Enlazar una hoja de estilo en un documento html 4. Gua de referencia 5. Selectores, Sintaxis avanzada Universal De etiqueta Descendente id y class 6. Ejercicios y aplicacin Objetivos: Desarrollo:
1. Qu es Hojas de estilo en cascada CSS3?

Mientras que HTML nos permite definir la estructura una pgina web, las hojas de estilo en cascada (Cascading Style Sheets o CSS) son las que nos ofrecen la posibilidad de definir las reglas y estilos de representacin en diferentes dispositivos, ya sean pantallas de equipos de escritorio, porttiles, mviles, impresoras u otros dispositivos capaces de mostrar contenidos web. Las hojas de estilo nos permiten definir de manera eficiente la representacin de nuestras pginas y es uno de los conocimientos fundamentales que todo diseador web debe manejar a la perfeccin para realizar su trabajo.
2. Sintaxis y comentarios
Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno o ms:
El selector es normalmente el elemento HTML que desea aplicar un estilo. Cada declaracin consta de una propiedad y un valor.
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M. La propiedad es el atributo de estilo que desee cambiar. Cada propiedad tiene un valor. Ejemplo CSS Una declaracin CSS siempre termina con un punto y coma, y los grupos de la declaracin estn rodeadas de llaves: p {color:red;text-align:center;} Para hacer que la CSS sea ms legible, se puede poner una declaracin en cada lnea, de esta manera: p { color:red; text-align:center; }
Comentarios CSS
Los comentarios se utilizan para explicar su cdigo, y puede ayudarte a la hora de editar el cdigo fuente en una fecha posterior. Los comentarios son ignorados por los navegadores. Un comentario CSS comienza con "/ *", y termina con "* /", as: /*Este es un comentario*/ p { text-align:center; /*Este es un comentario*/ color:black; font-family:arial; }
3. Enlazar una hoja de estilo en un documento html

<head> <link rel=stylesheet href=styles.css> </head>
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M.
4. Gua de referencia
Ver Documentos: - CSS2 Basico.pdf y css3-cheat-sheet v5.pdf
5. Selectores, Sintaxis avanzada Universal

El selector universal se escribe con un asterisco (*). Una de las aplicaciones bsica es eliminar el margen y el relleno de todos los elementos HTML como en este ejemplo *{ margin: 0; padding: 0; }
De etiqueta
Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los prrafos de la pgina: p{ ... }
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. El selector del siguiente ejemplo selecciona todos los elementos de la pgina que se encuentren dentro de un elemento :
p span { color: red; }
Si el cdigo HTML de la pgina es el siguiente:

 ... texto1 ... <a href="">...texto2</a>
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M.
... 
El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendiente, un elemento no tiene que ser "hijo directo" de otro. La nica condicin es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre. Al resto de elementos de la pgina que no estn dentro de un elemento , no se les aplica la regla CSSanterior. Los selectores descendientes permiten aumentar la precisin del selector de tipo o etiqueta. As, utilizando el selector descendiente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo ampla el anterior y muestra de color azul todo el texto de los contenidos dentro de un <h1>:
p span { color: red; } h1 span { color: blue; }
Con las reglas CSS anteriores:

Los elementos que se encuentran dentro de un elemento se muestran de color rojo. Los elementos que se encuentran dentro de un elemento <h1> se muestran de color azul. El resto de elementos de la pgina, se muestran con el color por defecto aplicado por el navegador. La sintaxis formal del selector descendiente se muestra a continuacin:
selector1 selector2 selector3 ... selectorN
Los selectores descendientes siempre estn formados por dos o ms selectores separados entre s por espacios en blanco. El ltimo selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento. En el siguiente ejemplo, el selector descendiente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
id y class
El selector de id se utiliza para especificar un estilo para un nico elemento, nico. El selector de Identificacin utiliza el atributo id del elemento HTML, y se define con un "#". La regla de estilo a continuacin se aplica al elemento con id = "para1": #para1 { text-align:center; color:red; }
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M. El selector de clase se utiliza para especificar un estilo para un grupo de elementos. A diferencia del selector de Identificacin, el selector de clase se utiliza con mayor frecuencia en varios elementos. Esto le permite definir un estilo particular de muchos elementos HTML con la misma clase. El selector de clase utiliza el atributo class HTML, y se define con un "." En el siguiente ejemplo, todos los elementos HTML con class = "centro" ser alineado al centro: .center { text-align:center; }
6. Ejercicios y aplicacin
Ver ejercicios propuestos (Archivos Fuentes): Ejercicio 1: index.html, estilo.css y estolo2.css Ejercicio 2: index3.html y estilo3.css Ejercicio 1. Resultado final
Tcnico Medio en Diseo Grfico I ao Mdulo: Diseo Web Tiempo: 60 horas Prof. Delvin Martn Daz M. Ejercicio 2. Resultado final

IV Unidad PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

IV Unidad PDF

Transféré par

Droits d'auteur :

Formats disponibles

Planificacin de Clase

1. Qu es Hojas de estilo en cascada CSS3?

3. Enlazar una hoja de estilo en un documento html

5. Selectores, Sintaxis avanzada Universal

Si el cdigo HTML de la pgina es el siguiente:

Con las reglas CSS anteriores:

Vous aimerez peut-être aussi