WEB: Diseño e Interacción

Tamaño: px

Comenzar la demostración a partir de la página:

Download "WEB: Diseño e Interacción"

Raquel Rosa Maldonado Villanueva
hace 10 años
Vistas:

1 WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 26 de Febrero Universidad de los Andes Facultad de Arquitectura y Diseño Departamento de Diseño

2 Clase Taller: Martes 7:00 am 9:50 am Andrés Burbano Y 110 A

3 TALLER HTML y CSS 1. Explorar estilos con CSS, hacer dos estilos distintos completos para el mismo sitio HTML

4 <head> body background-color:#b0c4de;

5 <head> body color:blue; h1 color:#00ff00; h2 color:rgb(255,0,0);

6 <head> h1 text-align:center; p text-align:justify; p.fecha text-align:right; <body> <h1>mi sitio web</h1> <p class= fecha >May, 2009</p> <p >parrafo principal</p> </body>

7 El selector id El selector id se utiliza para definir el estilo de un elemento único. El selector id se usa como atributo de un elemento HTML, y se define con un "#. El estilo siguiente aplica para el elemento con el id= parrafo1. #parrafo1 text-align:center; color:blue; </body> <p id="parrafo1">hello World!</p> </body>

El selector id se usa como atributo de un elemento HTML, y se define con un "#.

8 El selector class El selector class se utiliza para definir el estilo de varios elementos. El selector class se usa como atributo de un elemento HTML, y se define con un.. El estilo siguiente aplica para el elemento con el class= centrar. <head>.centrar text-align:center; <body> <h1 class="centrar">ejemplo titulo</h1> <p class="centrar">ejemplo parrafo</p> </body>

. El estilo siguiente aplica para el elemento con el class= centrar. <head>.

9 El selector id El selector id se utiliza para definir el estilo de un elemento único. El selector id se usa como atributo de un elemento HTML, y se define con un "#. El estilo siguiente aplica para el elemento con el id= parrafo1. #parrafo1 text-align:center; color:blue; </body> <p id="parrafo1">hello World!</p> </body>

10 El selector class El selector class se utiliza para definir el estilo de varios elementos. El selector class se usa como atributo de un elemento HTML, y se define con un.. El estilo siguiente aplica para el elemento con el class= centrar. <head>.centrar text-align:center; <body> <h1 class="centrar">ejemplo titulo</h1> <p class="centrar">ejemplo parrafo</p> </body>

11 <head> pfont-family:"times New Roman", Times, serif;

12 <head> p.normal font-style:normal; p.italic font-style:italic; p.oblique font-style:oblique; <body> <p class="normal">este parrafo es normal.</p> <p class="italic">este parrafo es italico</p> <p class="oblique">este parrafo es obliquo</p> </body>

13 <head> h1 font-size:40px; h2 font-size:30px; p font-size:14px;

14 <head> body background-color:#d0e4fe; h1 color:orange; text-align:center; p font-family:"times New Roman ; font-size:20px;

15 <head> body background-color:#d0e4fe; h1 color:orange; text-align:center; p font-family:"times New Roman ; font-size:20px;

16 <head> a:link color:#ff0000; /* link no visit ado */ a:visited color:#00ff00; /* link visitado*/ a:hover color:#ff00ff; /* mouse over */ a:active color:#0000ff; /* link activo */

17 <head> a:link text-decoration:none; a:visited text-decoration:none; a:hover text-decoration:underline; a:active text-decoration:underline;

18 <head> a:link background-color:#b2ff99; a:visited background-color:#ffff85; a:hover background-color:#ff704d; a:active background-color:#ff704d;

19 <head> <link rel="stylesheet" type="text/css" href="mystyle.css >

20 <!DOCTYPE html> <html> <head> <body> <p>aca un poco de texto.</p> <div style="color:#0000ff"> <h3>encabezado en un DIV </h3> <p>texto dentro de un DIV</p> </div> <p>aca otro poco de texto.</p> </body> </html>

21 Posición Fija: Es relativo al browser NO se mueve al hacer scroll p.pos_fixed position:fixed; top:30px; right:5px;

22 Posición relativa: Su posición es relativa al contexto, browser h2.pos_left position:relative; left:-20px; h2.pos_right position:relative; left:20px;

23 Posición absoluta: Su posición es absoluta, browser h2 position:absolute; left:100px; top:150px;

24 Elementos que se superponen img position:absolute; left:0px; top:0px; z-index:-1;

25 <html> <head> <title> nombre + curso web </title> <body> <h1>título</h1> <p> texto bienvenida</p> <img src= imagenes/foto.jpg > <a href= personal.html > personal </a> <a href= tutoriales.html > tutoriales </a> <a href= ejercicios.html > ejercicios </a> <a href= proyecto.html > proyecto </a> <p> texto despedida</p> </body> </html>

26 Tilde = &acute Comillas = &#8221 Ñ = &Ntilde ñ = &ntilde

Documentos relacionados

7. Definición de un estilo en función del contexto.

7. Definición de un estilo en función del contexto. Este otro recurso que provee las CSS es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada.