Block Vs Inline Block Vs Inline Existen 2 tipos de elementos en HTML: Complementos de XHTML Complementos de XHTML • block‐level • inline‐level inline level Los elementos de nivel bloque empiezan en un nueva línea. No es posible desplegar 2 elementos de tipo bloque en la misma línea (a menos que se utilicen CSS). Los bloques pueden contener otros bloques ó elementos de tipo en‐línea Los elementos de tipo en‐línea se despliegan en el lugar que ocurren en el documento. Solo pueden contener texto y otros elementos de tipo en‐línea. documento Solo pueden contener texto y otros elementos de tipo en‐línea Vertical division <div> Vertical division <div> permite dividir en bloques una página HTML. Generalmente se utiliza en combinación con las hojas de estilo para definir la presentación de un segmento del documento. del documento Horizontal division <span> Horizontal division Este elemento también permite dividir arbitrariamente un documento un documento pero opera en línea. opera en línea Her limericks weren’t worth a <span style="color:blue">P</span>enny p y /p y <div>Este es un bloque</div> <div>Este es otro bloque</div> Her limericks weren’t worth a Penny Este es un bloque Este es un bloque Este es otro bloque Atributo Style Atributo Style Una manera de cambiar el estilo de una página es simplemente d l declarandolo d l dentro d t de una d etiqueta ti t HTML mediante HTML di t el atributo l t ib t “style” style= propiedad:valor style="propiedad:valor" Aplicando varias propiedades Aplicando varias propiedades Para aplicar mas de una propiedad, se separa cada una de ellas con “;” por ejemplo: <div style="color:red <div style "color red ; font‐style:italic font style italic ">Mi color es ">Mi color es rojo, estilo rojo estilo itálico!</div> Ejemplo: <div style="color:red">Mi color es rojo!</div> La propiedad es "color". El valor de la propiedad es"red". Note que se usan 2 puntos entre la propiedad y el valor. Ejemplo <html ><head><title>Introductions</title></head><body> POEME div style style="color: color: red;background: beige red;background: beige">A A worse poet however was worse poet however was <div J<span style="color:green">enny</span>. <br/> Her limericks weren’t worth a P<span style="color:green">enny</span> <br/> Though the invention was s<span style="color: blue; background: yellow">ound</span> <br/> / She always f<span style="color: blue; background:yellow">ound</span> <br/> That whenever she tried to write <span style "color green">any</span> That, whenever she tried to write <span style="color:green">any</span> <br/> She always had one line to m<span style="color:green">any.</span> <br/> </div> </body></html> Resultado