Enquanto estudando XHTML, entendi que o <span>
é um elemento em linha. A class
será um elemento em bloco.
Mas quando usar um e outro? Além deles, quando usar alguns elementos sabendo que existem outros parecidos.
Você está a misturar coisas diferentes. Um span
é um elemento HTML inline, porém a class
é um atributo de elementos como o span
, p
, div
ou qualquer outro.
Ou seja pode juntar-se o atributo class
ao span para lhe dar classes de CSS.
Da mesma maneira que se pode fazer assim para mudar a côr para azul:
<span style="color: blue;">Este texto é azul</span>
O mesmo pode (e deve) ser feito usando classes CSS para poder ter as regras de CSS num ficheiro à parte que controla todos os elementos com uma certa class. Assim o exemplo em cima pode ser feito assim usando class:
CSS
.azul{ color: blue;}
HTML
<span class="azul">Este texto é azul também</span>
Este exemplo em cima é simples mas em páginas com centenas de spans não é prático escrever o stile ou mudar elemento a elemento, então usam-se class(es).
Outra grande vantagem que não tem a ver com o CSS é a possibilidade de selecionar grupos de elementos que partilhem a mesma class no DOM e aplicar-lhes outras regras ou mudá-los caso necessário. Isto pode ser feito com CSS, por exemplo usando .azul:hover{ color: red;}
que muda a cor no caso de o mouse passar por cima, ou no caso de javascript (com ou sem biblioteca) onde se pode fazer:
document.querySelectorAll('.azul').innerHTML = 'Novo texto...';
e assim mudar o texto (conteudo) dos elemento que tenham essa classe, independentemente de serem span ou não.
Estes são exemplos bem simples mas no fundo é importante lembrar que o span
é um elemento do DOM, e o class
é um atributo de elementos do DOM que lhes dá classes CSS para poderem aplicar regras de CSS ao elemento; ou poderem ser selecionadas por javascript para alterar/selecionar o(s) elemento(s) que tenham essa(s) classes.
O span
é apenas um elemento do HTML enquanto a class
é usada para manipular qualquer elemento HTML, como por exemplo, você pode usa-la para estilizar qualquer elemento. Veja:
.nav {
background-color: #000;
}
<span class="nav">Texto<span>
<p class="nav">Texto<p>
Nesse exemplo, tanto o elemento p
quanto o span
vão receber o background preto porque tem a class .nav
Se você utilizar o elemento span
para estilizar, todos os elementos span
vão receber as propriedades do span
.
Exemplo:
span {
background-color: #fff;
}
Você também pode utilizar o span
para estilizar apenas uma parte de um texto.
Exemplo:
span {
color: red;
}
<p>Texto <span>texto vermelho</span> texto.</p>
Esse site e bom para estudar http://www.w3schools.com/