Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
-
Upload
corazon-floria -
Category
Documents
-
view
227 -
download
0
Transcript of Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
![Page 1: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/1.jpg)
Curso de Diseño Web
Profesor: Mario Figge
![Page 2: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/2.jpg)
El Modelo de Cajas (Box Model)
![Page 3: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/3.jpg)
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.
![Page 4: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/4.jpg)
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.
![Page 5: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/5.jpg)
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).
![Page 6: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/6.jpg)
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.
![Page 7: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/7.jpg)
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;}
![Page 8: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/8.jpg)
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 */
}
![Page 9: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/9.jpg)
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.
![Page 10: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/10.jpg)
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 */ }
![Page 11: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/11.jpg)
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 */ }
![Page 12: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/12.jpg)
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.
![Page 13: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/13.jpg)
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.
![Page 14: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/14.jpg)
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.
![Page 15: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/15.jpg)
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
![Page 16: Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)](https://reader035.fdocuments.ec/reader035/viewer/2022062305/5665b4351a28abb57c8ffc36/html5/thumbnails/16.jpg)
Fin