2

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.

2 Respostas 2

8

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.

1
  • 2
    Obrigado pela ajuda. Fui ver o seu site pessoal. Fantástico. Adorava aprender tocar violino. É uma pena que não tem nenhuma musica no seu site. Talvez é o que falta. Saber que alguém é musico e não ouvir nenuma musica não diz muito. Se adicionar diga para ir ouvir. Cmp
    – David
    Commented 23/07/2014 às 21:55
7

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:

CSS

.nav {
 background-color: #000;
}

HTML

<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:

CSS

span {

  color: red;

}

HTML

<p>Texto <span>texto vermelho</span> texto.</p>

Esse site e bom para estudar http://www.w3schools.com/

3
  • Obrigado ana. Já conhecia o site que sugere. Ainda não o sei usar bem admito mas vou fazer o que me diz.
    – David
    Commented 23/07/2014 às 21:57
  • Um reparo - penso que pudemos usar a class sem o span. Assim desta forma: <p class="lista b">A nossa lista</p> Fica a dúvida.
    – David
    Commented 23/07/2014 às 22:05
  • Sim, classes podem ser usadas com qualquer elemento html. O spam e' apenas um elemento html. Commented 24/07/2014 às 8:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .