Temas > Programacion > Html > Elementos HTML div y span
Julio

Elementos HTML <div> y <span>
Estas marcas se utilizan en conjunción con las hojas de estilo. Sin éstas
tiene poco sentido el empleo de estos elementos HTML.
Estos elementos "div" y "span" nos permiten agrupar un conjunto de
elementos y aplicar reglas de estilo.
La diferencia entre estos dos elementos es que cuando utilizamos el
elemento div produce un salto de línea previo y uno al final, es decir es
una marca de bloque como lo son h1,h2,p etc. En cambio el elemento span no
produce un salto de línea porque se trata de un elemento en línea como lo
son
a,em,strong,input etc.
Veamos un ejemplo creando una división (div) y la aplicación de algunas
reglas de estilo, como así un elemento span.
Listar una serie de nombres y un bloque de comentarios para cada nombre.
Indentar la primer línea de cada párrafo. Hacer que algunas palabras del
párrafo aparezcan resaltadas en otro color. Disponer todos los comentarios
con un color gris de fondo:
<?php //esto no va
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>título página</title>
</head>
<body>
<div style="background-color:#eeeeee">
<h3>Luis Barrionuevo</h3>
<p style="color:#888888;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span>
Aquí comentarios.
</p>
<h3>Ana Rodriguez</h3>
<p style="color:#888888;text-indent:20px">
<span style="background-color:#eeee00">Aquí comentarios.</span>
Aquí comentarios.
</p>
</div>
</body>
</html>
?>//esto no va
Veamos como definimos los elementos span:
<span style="background-color:#eeee00">comentarios.</span>
Como podemos ver luego en el resultado de la página el texto "comentarios"
aparece con un color
amarillo de fondo. El resto del párrafo continúa inmediatamente a la
derecha, es decir el elemento span no produce salto de línea. Para ver la
diferencia con el elemento div pruebe de remplazar la palabra span por div
y vea los resultados (recuerde cambiar tanto la marca de apertura como la
de cerrado del span). Como verá el texto aparece en un bloque
independiente.
El div agrupa todos los títulos y párrafos y define la propiedad
background-color que es heredado por todos los elementos contendidos por el
div:
<?php //esto no va
<div style="background-color:#eeeeee">
<h3>Luis Barrionuevo</h3>
<p style="color:#888888;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span>
Aquí comentarios.
.
.
.
.
Aquí comentarios.
Aquí comentarios.
</p>
</div>
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar