Curso de Diseño Web

Profesor: Mario Figge

El Modelo de Cajas (Box Model)

Reset de margenes y padding* {

margin: 0;padding: 0;

}

Cada browser aplica margenes y padding por defecto a los elementos del HTML. Suele variar bastant, por lo que conviene quitarlos todos y redefinirlos nosotros.

Reglas Agrupadas

h1, h2, h3, p {font-familiy: Arial, Helvetica, sans-serif;

}

La misma propiedad es aplicada a las 4 etiquetas.

Son 4 reglas diferentes que comparten las mismas propiedades.

Redefinición de estilos

h1, h2, h3, p {font-familiy: Arial, Helvetica, sans-serif;font-size: 16px;

}

h2 { font-familiy: "Times New Roman", Times, serif;

}

Si se define una propiedad dos o más veces, la que vale es la última (Se redefine).

Herencia de Estilos

body {font-familiy: Arial, Helvetica, sans-serif;font-size: 16px;

}

h2 { /* Hereda el tipo de letra (font-family) */ }

p { /* Hereda el tipo de letra y el tamaño (font-family y font-size) */ }

Algunas propiedades son heredadas por los elementos hijos. Si quiero cambiarlas, debo definirlas específicamente.

Forma compacta

div {font: italic bold 108%/28px "Times New Roman",

Times, serif;}

Puede escribirse como:div {

font-weight: bold;font-style: italic;font-size: 108%;line-height: 28px ;font-famliy: Georgia, "Times New Roman", Times,

serif;}

Forma compacta

div {font: italic bold 108%/28px "Times New Roman", Times,

serif;background: #FFFFFF url(fondo.png) repeat-x left top;margin: 20px 10px 0 10px; /* Top Right Bottom Left

*/padding: 21px; /* Los 4 iguales */border: 5px solid #FC0; /* #FFCC00 */

}

ID

HTML:<div id="cabecera">Algo aquí</div>

CSS:#cabecera {

font-familiy: Arial, Helvetica, sans-serif;}

El valor de id no puede repetirse en el código HTML.

Reglas Contextuales

<div id="cabecera"><p>Este es un párrafo <img src="imagen.jpg"> con algo de texto y una imagen en su interior.</p>

</div>

#cabecera img { /* Esto afecta solamente las imágenes dentro de #cabecera */ }

p img { /* Esto afecta a cualquier imagen que esté dentro de un párrafo */ }

#cabecera p img { /* Esto afecta solamente las imágenes dentro de #cabecera y dentro de un párrafo */ }

Pseudo Clases

<a href="archivo.html">Esto es un link</a>

a:link { /* Esto afecta al estado normal del link y se hereda en los otros estados */ }

a:visited { /* Esto afecta al estado visitado del link */ }

a:hover { /* Esto afecta la apariencia del link cuando se pasa el mouse por encima */ }

a:active { /* Esto afecta la apariencia del link cuando se hace clic en el */ }

Clases

HTML:<p class="resaltado">Algo aquí….</p><p>Texto texto <span class="resaltado">Algo

aquí….</span> texto </p>

CSS:.resaltado {

font-weight: bold;background-color: #FF0000;

}

Una clase se puede aplicar muchas veces y a diversos elementos.

Peso de las Reglas

Dadas estas dos reglas:

p {color:#00FF00; /* verde */

}p {

color:#FF0000; /* rojo */}

El color de los párrafos será rojo, porque la regla escrita posteriormente sobreescribe la anterior.

Peso de las Reglas

Dadas estas dos reglas:

#contenedor p {color:#00FF00; /* verde */

}p {

color:#FF0000; /* rojo */}

El color de los párrafos será verde, porque la primera regla tiene mayor especificidad, o peso.

Peso de las Reglas

Selector Peso Ejemplo

* 0 * {…}

Tags 1 p {…}

Class y Pseudoclass

10 .resaltado {…}

ID 100 #contenedor {…}Ejemplo Peso

p {…} 1

p.resaltado {…} 11

#contenedor p.resaltado {…}

111

#top h1 101

a.especial:hover {…} 21

#contenedor p img 102

Fin