Agrupar elementos (span e div) CSSOs 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>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; } |