Seo Portugal
 
 
Segunda, 21 Janeiro 2019
 
 

Agrupar elementos (span e div) CSS


Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são usados de forma frequentemente em conjunto com os atributos class e id.

Detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua importância para CSS.

  •   Agrupar com <span>
  •   Agrupar com<div>

Agrupar com <span>

O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado nos CSS para adicionar efeitos visuais a partes específicas do texto no documento.

Um exemplo deste uso é mostrado na citação de Albert Einstein:

<p>A realidade é uma ilusão, embora bastante persistente.</p>

Vamos supor que queremos enfatizar a vermelha a "realidade". Marcamos  "realidade" com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:


<p>Dormir cedo e acordar cedo faz o homem
<span class="einstein">realidade</span>,
<span class="einstein">ilusão</span>
e <span class="einstein">persistente</span>.</p>

A folha de estilos:


span.einsteins {
    color:red;
}

   

Pode-se usar id para estilizar o elemento <span>. Mas deverá usar uma única id para cada um os três elementos <span>.

Agrupar com <div>

Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes de Portugal agrupados segundo suas filiações políticas:


<div id="esquerda">
<ul>
<li>Mário Soares</li>
<li>Ramalho Eanes</li>
</ul>
</div>

<div id="direita">
<ul>
<li>Cavaco Silva</li>
<li>Paulo Portas (este não foi mas é apenas um exemplo)</li>
</ul>
</div>

E na folha de estilos, podemos agrupar a estilização da mesma forma como fizemos no exemplo acima:


#esquerda {
    background:blue;
}

#direita {
    background:red;
}