"id" ou "class"

[fsphp 0]

Oi pessoal, estou com outra dúvida sobre a utilização dos identificadores "id" e "class" para referenciar um estilo de css num arquivo externo.Quando eu uso "id" e quando uso o "class"? Eles cumprem a mesma função?Valeu pessoal. ;)

[pa_bruno 0]

id = identificadores

class = classes

 

id: só podem ser usados em uma página uma única vez

class: podem ser usados quantas vezes for necessário

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fsphp 0]

Aí Bruno, valeu. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Por exemplo, "id" eu posso usar para identificar uma variável sendo passada por um form, eu podendo definir um estilo para esse id, certo? Pois nesse caso, a variável será unica.

 

O "class" vai servir mais como um elemento de diagramação, de layout, onde vou utilizar esse mesmo estilo em várias páginas e, nestas, várias vezes, né?

 

B)

[pa_bruno 0]

tipo, um ID num form tem um significado diferente levando em conta as linguagens dinâmicas, pois eles são enviados pelo post ou get... Sendo que geralmente o name já faz isso, pelo menos no PHP é assim, não sei em relação as outras linguagens...

 

mas o ID em divs, etc, servem como diagramação também, assim como classes. A diferença é a utilização, classes podem ser usadas mais vezes, como cores e identificares são feitos para div, estruturação de layouts, etc... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

você pode chamar num input uma classe:

<input type="text" id="formNome" name="formNome" class="textbox" /><input type="text" id="formEmail" name="formEmail" class="textbox" />

Ae você me pergunta "Tá tudo bem, mas pq você tah me dizendo isso?"

 

Simples, imagina você ter q criar em cada campo no css, pra "decorar" os campos:

#formNome {font: 1.0em Verdana;background: #CCCCCC;border: 1px solid #666666;}#formEmail {font: 1.0em Verdana;background: #CCCCCC;border: 1px solid #666666;}

e se teu formulário possuir 50 campos? Chato criar 50 identificadores certo? Por isso existem as classes, que ae você soh precisa de um código:

.textbox {font: 1.0em Verdana;background: #CCCCCC;border: 1px solid #666666;}

depois é só referenciar em qualquer elemento que quiser:

<input type="text" id="formNome" name="formNome" class="textbox" /><input type="text" id="formEmail" name="formEmail" class="textbox" />

deu pra pegar ae direitim? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fsphp 0]

Na mosca Bruno!!!!!!!!!Estou fazendo um form e eu estava usando uma classe para cada campo. :) Agora vou seguir sua dica e usar um geral. Sorte que é um form de contato, somente 3 campos. :) Por exemplo, num dos campos eu fiz assim:<p>Nome:   <input type="text" name="nome" size="35"></p>Como eu faço para dar espaço entre a palavra "Nome:" e o campo de texto? Usei o non-breaking, mas parece que o w3c não aconselha usar muito isso, né? E então, qual pode ser a saída?

[pa_bruno 0]

margin:left: 20px; na classe do campo de texto... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fsphp 0]

Ah, então eu tenho que usar uma classe para o campo de texto.... Vou verificar. ;)

 

Acho que o mesmo eu consigo configurar para que o campo de texto seja mais largo (width:...), que era outra dúvida que eu tinha, e acabei usando o size=.... Mas parece que também não é recomendado desta forma.

 

Vou fazer as modificações depois eu posto o resultado. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[pa_bruno 0]

eh soh você adicionar na mesma classe q você chama para todos os campos... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

te mostrei essa aki:

.textbox {font: 1.0em Verdana;background: #CCCCCC;border: 1px solid #666666;}

utilize essa mesmo, mas adicione as 2 ultimas linhas:

.textbox {font: 1.0em Verdana;background: #CCCCCC;border: 1px solid #666666;margin-left: 10px;width: 150px;}

ae vai ter tudo q você quer ae http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif O atributo size foi depreciado, ae você utiliza o css mesmo http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif