Successfully reported this slideshow.

1.Introduccion (diseño con CSS)

675 views

Published on

intro

Published in: Design, Technology, Education
  • Be the first to comment

  • Be the first to like this

1.Introduccion (diseño con CSS)

  1. 1. INTRODUCCIÓNY CONTEXTO<br />TEMA 1<br />www.laramarcos.com<br />
  2. 2. RAZONES PARA DISEÑARCON CSS<br />Páginas BUENAS<br />Cumplen los estándares del w3c<br />Son accesibles<br />Prevenir PROBLEMAS futuros<br />Páginas BONITAS<br />Se pueden conseguir diseños muy llamativos<br />Páginas BARATAS<br />Es un estándar del w3c, por lo cual es GRATIS<br />www.laramarcos.com<br />
  3. 3. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB<br />ELEMENTOS DINÁMICOS<br />Capas que aparecen y desaparecen<br />Elementos que se mueven al pasar por encima<br />Menús desplegables<br />JAVASCRIPT<br />www.laramarcos.com<br />
  4. 4. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB<br />FORMA<br />CONTENIDO<br />Párrafos<br />Listas<br />Tablas<br />Imágenes<br />Enlaces<br />Formularios<br />Tipos de letra<br />Alineación<br />Colores<br />Distribución<br />Decoración en las listas<br />CSS<br />XHTML<br />www.laramarcos.com<br />
  5. 5. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO<br />Dentro de la propia etiqueta de XHTML, como un atributo más<br />&lt;p style= “color: red”&gt;Hola&lt;/p&gt;<br />Dentro del propio documento .html<br /> &lt;head&gt;<br /> &lt;styletype=&quot;text/css&quot;&gt;<br /> p { color: red; } <br /> &lt;/style&gt; <br /> &lt;/head&gt;<br />www.laramarcos.com<br />
  6. 6. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO<br />En un archivo externo<br /> Su extensión será .css<br /> La MEJOR opción<br />.css<br />.html<br /> &lt;head&gt;<br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/estilos.css&quot; media=&quot;screen&quot; /&gt; <br />&lt;/head&gt;<br />p { color: red; } <br />www.laramarcos.com<br />
  7. 7. 1.3 diferencias formales según navegadores<br />El motor de los navegadores es el responsable de interpretar los lenguajes HTML y CSS<br />Unos motores son capaces de leer todas las reglas CSS y otros no<br />Los más avanzados son los motores de Safari y Opera<br />En cambio, IE6 contiene decenas de errores<br />www.laramarcos.com<br />
  8. 8. 1.3 diferencias formales según navegadores<br />Información de Javier Eguíluz<br />www.laramarcos.com<br />

×