1. maquetación
aplicar atributos básicos de CSS para diagramar
patricio rodríguez m.
@taller_media
martes 28 de agosto de 2012
2. tipos de selectores
etiquetas: nativas de HTML
identidad: posicionamiento, un elemento
clase: múltiples elementos
multimedia 1 - internet y sitios web
martes 28 de agosto de 2012
6. tipos de selectores
identidad: utiliza concatenador #, determina posición de
un objeto único
#introduccion{width: 980px;}
martes 28 de agosto de 2012
9. tipos de selectores
clase: utiliza concatenador ., son objetos que se reiteran
en cuanto a su uso y estructura
.fotos{border: 1px solid #6a4a3c;}
martes 28 de agosto de 2012
10. clase: son objetos que se reiteran en cuanto a su uso y
estructura
martes 28 de agosto de 2012
11. nociones básicas
de maquetación
con css
martes 28 de agosto de 2012
12. 1. la maquetación se realiza
por medio de contenedores cabecera
HTML enlaces
<div id=”contenedor”>
<div id=”cabecera”></div>
cuerpo
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div> pie
</div>
martes 28 de agosto de 2012
13. 2. los contenedores (<div>)
sin atributos funcionan por cabecera
apilamiento
HTML enlaces
<div id=”contenedor”>
<div id=”cabecera”></div>
cuerpo
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div> pie
</div>
martes 28 de agosto de 2012
14. 3. el atributo float
permite sacar a un elemento del cabecera
flujo del documento, y
posicionarlo a la izquierda o enlaces cuerpo
derecha de otros elementos
adyacentes. Admite tres valores,
pie
right, left y none.
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div> #enlaces {
</div> width: 300px;
float: left;
}
martes 28 de agosto de 2012
15. 4. el atributo clear
cabecera
se utiliza conjuntamente con
float para indicar cuando un
elemento flotante permite otros enlaces cuerpo
elementos flotantes junto a el.
#enlaces {
<div id=”contenedor”> width: 300px;
<div id=”cabecera”></div> float: left;
<div id=”enlaces”></div> }
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
#cuerpo { pie
width: 650px;
float: right;
}
#pie{
clear:both;
}
martes 28 de agosto de 2012
16. <div id=”contenedor”>
<div id=”cabecera”></div>
cabecera
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div> enlaces cuerpo
#enlaces {
width: 300px;
float: left;
}
pie
#cuerpo {
width: 650px;
float: right;
}
#pie{
clear:both;
}
martes 28 de agosto de 2012