DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual.

Presentación del tema: "DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual."— Transcripción de la presentación:

1 DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual

2 Selectores CSS básicos h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

3 Selectores CSS universal * { margin: 0; padding: 0; }

4 Selectores CSS descendente p span { color: red; } p a { color: red; } Enlace p * a { color: red; } Enlace

5 Selectores CSS clase Lorem ipsum dolor sit amet... Nunc sed lacus et est adipiscing accumsan... Class aptent taciti sociosqu ad litora....destacado { color: red; }

6 Selectores CSS combinados Lorem ipsum dolor sit amet... Nunc sed lacus et est adipiscing accumsan... Class aptent taciti sociosqu ad litora... enlace p.destacado { color: red }

7 Selectores CSS prueba p.aviso {... } p.aviso {... } p,.aviso {... }

8 Selectores CSS prueba /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso {... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p.aviso {... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p,.aviso {... }

9 Selectores CSS clase.error { color: red; }.error.destacado { color: blue; }.destacado { font-size: 15px; }.especial { font-weight: bold; } Párrafo de texto...

10 Selectores CSS ID #destacado { color: red; } Primer párrafo Segundo párrafo Tercer párrafo

11 Selectores CSS hijos p a { color: red; } p > a { color: red; } Enlace1 Enlace2

12 Selectores CSS adyacentes Titulo1 Subtítulo... Otro subtítulo... h2 { color: green; } h1 + h2 { color: red }

13 Menu http://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/

14 Pseudoclases link - Enlace sin explorar visited - Enlace que ha sido seguido por el usuario active - Enlace seleccionado por el usuario hover - Enlace que tiene el ratón encima

15 Pseudoelementos first-letter - Se refiere a la primera letra del objeto. first-line - Se refiere a la primera línea del objeto.

16 Márgenes

17 Margenes margen superior: 4px 4px 4px 4px; margen derecho: 4px 4px 4px 4px; margen inferior: 4px 4px 4px4px; margen izquierdo: 4px 4px 4px 4px;

18 Márgenes BODY { margin: 10px 10px 10px 10px } En este primer ejemplo, todos los elementos están a la misma distancia de los elementos cercanos y cada uno de ellos está correctamente indicado. BODY { margin: 10px 10px } En este segundo ejemplo, están impostados sólo dos valores (margin-top e margin-right). Los márgenes que faltan, el izquierdo y el inferior, se deducen del valor del margen derecho y del superior, respecticamente.

19 Posición estática Static, por defecto todos los elementos son estáticos, dependen del elemento padre. No les afecta el posicionamiento.

20 Posición Fija Posición relativa a la ventana. Le afecta todos los posicionamientos.

21 Posición Relativa Posición relativa a su posición en static. No afecta a tamaños

22 Posición Absoluta Posición relativa dependiendo del elemento padre (se considera padre al elemento superior no estatico.)

23

24