Tutorial Ccs - Agrupación   elementos con span y div

Las etiquetas<span> y <div> son usados para agrupar y darle estructura a su documento, se utilizan generalmente con los atributos  atributos class e id.
En esta lección revisaremos el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS.

Agrupando con <span>

El elemento <span> se podría denominar un elemento  que no añade nada al documento en sí. Pero con  el  se puede usar para implementar  propiedades viuales a  distintivas a partes específicas de texto en los documentos.

Un ejemplo de esto podría ser esta cita de Benjamin Franklin:

 
 <p>El que pronto se acuesta y pronto se levanta,
es hombre saludable, rico y sabio.</p>
 
 

Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:

 
 <p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="benefit">saludable</span>,
<span class="benefit">rico</span>
y <span class="benefit">sabio</span>.</p>
 
 

El código CSS necesario para producir este efecto es el siguiente:

 
 span.benefit {
  color:red;
 }
 
 

• Mirar ejemplo

De igual , se puede usar también el atributo id para añadir estilo a los elementos definidos con <span>. Pero recuerda que tendrás que aplicar siempre un atributo id único para cada uno de los tres elementos <span>, tal como aprendimos en la lección anterior.

Agrupación con el elemento <div>

Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior, <div> se usa para agrupar uno o más elementos a nivel de bloque.
Aparte de esta diferencia, la agrupación con <div> funciona más o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas según su filiación política.

 
 <div id="democrats">
 <ul>
 <li>Franklin D. Roosevelt</li>
 <li>Harry S. Truman</li>
 <li>John F. Kennedy</li>
 <li>Lyndon B. Johnson</li>
 <li>Jimmy Carter</li>
 <li>Bill Clinton</li>
 </ul>
 </div>

 <div id="republicans">
 <ul>
 <li>Dwight D. Eisenhower</li>
 <li>Richard Nixon</li>
 <li>Gerald Ford</li>
 <li>Ronald Reagan</li>
 <li>George Bush</li>
 <li>George W. Bush</li>
 </ul>
 </div>
 
 

En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:

 
 #democrats {
  background:blue;
 }

 #republicans {
  background:red;
 }
 
 

• Ver ejemplo

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•