Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)

Presentación del tema: "Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)"— Transcripción de la presentación:

1 Curso de Diseño Web Profesor: Mario Figge

2 El Modelo de Cajas (Box Model)

3 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.

4 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.

5 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).

6 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.

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

8 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 */ }

9 ID  HTML: Algo aquí  CSS: #cabecera { font-familiy: Arial, Helvetica, sans-serif; } El valor de id no puede repetirse en el código HTML.

10 Reglas Contextuales Este es un párrafo con algo de texto y una imagen en su interior. #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 */ }

11 Pseudo Clases Esto es un link 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 */ }

12 Clases  HTML: Algo aquí…. Texto texto Algo aquí…. texto  CSS:.resaltado { font-weight: bold; background-color: #FF0000; } Una clase se puede aplicar muchas veces y a diversos elementos.

13 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.

14 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.

15 Peso de las Reglas SelectorPesoEjemplo *0* {…} Tags1p {…} Class y Pseudoclass10.resaltado {…} ID100#contenedor {…} EjemploPeso p {…}1 p.resaltado {…}11 #contenedor p.resaltado {…}111 #top h1101 a.especial:hover {…}21 #contenedor p img102

16  Fin