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

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; }

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

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

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

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 }

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

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 {... }

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

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

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

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

Menu

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

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

Márgenes

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

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.

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

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

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

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