1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Diferença entre classe e ID (css)

Discussão em 'Web Development' iniciada por vjoe, 9 de Abril de 2007. (Respostas: 15; Visualizações: 2779)

  1. vjoe

    vjoe Power Member

    Ando agora a aprender CSS e surgiu-me uma dúvida. Qual a diferença entre uma classe e um ID?

    Isto é, qual a diferença entre os dois "bocados" de código seguintes?

    Código:
    .menu
    {
    font-family: arial
    }
    
    [...]
    
    <div class="menu">código</div>
    e

    Código:
    #menu
    {
    font-family: arial
    }
    
    [...]
    
    <div id="menu">código</div>
    E já agora, vejo muitos selectores como "div#menu" ou "p.centro". Assim, o ID e a classe só podem ser utilizados com a tag div e p respectivamente, certo?
     
  2. msdevweb

    msdevweb Power Member

    uma class pode ser usada em muitas coisas como <table class=.... ou <font... ou <p ou <span ou <div... etc etc etc... NO exemplo, tens p.centro, ou seja, podes ter mais variações do p.
    exemplo
    p { font-size: 13px }

    p.big { font-size: 25px }

    p.small { font-size: 6px }

    ou seja, podes definir as tuas caracteriesticas diferentes para o p., a vantagem principal é a organização de código. Mas podes ver mais informações em:

    http://www.w3schools.com/css/css_pseudo_elements.asp
    http://www.tizag.com/cssT/cssid.php (selector, class & id)

    Um abraço.
     
  3. HecKel

    HecKel The WORM

    Com class, podes usar a mesma classe nas vários tags que bem te apetecer, com id só podes usar numa, pois o id é único.

    abraços, HecKel
     
  4. vjoe

    vjoe Power Member

    Sim, estou a perceber. Mas na prática, quando são utilizados os IDs? Parece-me ser mais fácil utilizar só classes.
    E em relação à minha segunda pergunta? :P
     
  5. HecKel

    HecKel The WORM

    A tua segunda pergunta foi respondida implicitamente tanto por mim como pelo msdevweb, podes usar em todas as tags.

    Sobre o ID e a class..., é pá, depende sempre de muita coisa. Se tens muitas divs e sabes que vão ter todas o mesmo aspecto, usa classes (IDs não dá mesmo), se queres garantir unicidade então IDs é o mais adequado, apesar de também dar com class..., mas assim podes enganar-te e repetires o que não queres que seja repetido (entre outras coisas).

    abraços, HecKel
     
  6. msdevweb

    msdevweb Power Member



    http://www.tizag.com/cssT/cssid.php
    Answer: Classes vs Id's:
    Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

    Vou dar-te um exemplo, queres separer o estilo da tua pagina em 3styles.
    Tipo, main_style.
    div#main_style_topo { background-color: blue; ... }
    div#main_style_meio { text-transform: lowercase; ... }
    div#main_style_fundo {text-transform: uppercase; font-size: 6px; }

    Alem de atribuires, e saberes que essas são os estilos fixos para o style das devidas secções, acabas também por ao olhares para o código e veres as div's que imediatamente identificam as diferentes secções da pagina. Uma mais facil localização e identificação.

    Eu pessoalmente não uso ID's.
    Mas vê um exemplo, que em alguns casos pode simplificar:
    a pagina: http://www.tizag.com/cssT/liveExampleCss
    e o css: http://www.tizag.com/cssT/liveExampleCss/1style.css
    :]

    Um abraço.
     
  7. vjoe

    vjoe Power Member

    Acho que vocês não perceberam o que eu quis dizer. :P Se eu tiver um selector "p.center" só posso atribuir a classe "center" à tag <p>, ou não? Se não, porque se põe "p.center" e não só ".center"?

    msdevweb, na página que me indicaste, o bloco de código seguinte só afecta as tags <h3> dentro das tags <div> com ID "content", certo?

    Código:
    div#content h3{
    	background-color: #A3F4A3;
    	text-align: right;
    	letter-spacing: -1px;
    	color: #386938;
    	padding: 2px;
    	border-bottom: 1px solid black;
    }
    Posso atribuir um ID e uma classe a uma tag, não posso? Por exemplo:

    Código:
    <div id="menu" class="esquerdo">...</div>
     
  8. HecKel

    HecKel The WORM

    Se fazes p.center, é somente para a tag <p>, se fizeres apenas .center é para qualquer tag.

    Sobre o ID e a classe numa tag sinceramente não sei responder a isso..., mas provavelmente vais ter conflitos :S

    abraços, HecKel
     
  9. shello

    shello Moderador
    Staff Member

    Nope, pelo menos em XHTML é válido.
    Em css definia-se, para um div, div.foo#bar ou div#foo.bar como desse mais jeito.
     
  10. msdevweb

    msdevweb Power Member

    Por passos, quanto ao p.center só o "deves" atribuir à tag <p>. Não se costuma usar só .center, porque é uma maneira de simplificar os css. imagina que queres centrar 20 tag's. Terias que fazer 20x .centerX e cada vez que o usavas andar à procura do centerX correcto.
    Ao usar p.center ou a.fontBig ou a.centerSmall ou p.etc.... Simplificas o teu código, embora possas sempre usar da maneira que quiseres. como p.xxx ou .xxx1 .xxx2 .... etc....

    Quanto ao div#content h3 { } é obvio que se está a usar um identificador, mas atribuindo também caracteristicas especificas a um tag(id) h3 {}. Sim, pode-se dizer que só afecta o h3 dentro da div com id="content".
    Como deves ter visto também: div#content a:link, a:visited{ } ou até div#content a:hover{}.

    Se podes atribuir um id e uma class a uma tag? sim, penso que sim, embora eu acho estranho usar isso se podes ter tudo numa .class, só acho que seria razoavel isso se quisesses identificar a tag, por exemplo como <div id="menu"> unicamente por questões de poderes usar subdefinições de tag's nesse id. : div#menu h3 {} e div#menu h4 {} e até mesmo para isso usavas só Id's e não precisavas de .class's. Não acho grande vantagem usar as duas definições numa só <tag>.
     
  11. vjoe

    vjoe Power Member

    Mas se eu tiver um selector p.center{text-align: center;} vou ter na mesma que fazer <p class="center">.
    Porque não ter um selector .center{text-align: center;} que posso usar em todas as tags (<p>, <div>, etc)?
     
  12. ruimoura

    ruimoura Power Member

    Dude, claro que tens que fazer o <p class=center>, para chamar o style ... ele não adivinha.

    Mas se fizeres como dizes na segunda hipótese, vais ter na mesma que chamar a class, só que podes usar a nível geral, como disses-te ... Podes fazer isso, perfeitamente. Só não deves usar o nome "center" para a class, porque "center" é um atributo html/css e não se devem usar nomes de atributos para outras coisas, porque vai dar maravilha. Chama-lhe outra coisa qualquer, tipo ... meio ... ;)

    Para clarificar ainda mais quando deves usar um div ou um class, divs usam-se para estruturar blocos grandes, regra geral (por ex. header, corpo, footer) ou sub blocos importantes. Os classes usam-se mais para estruturar partes individuais e específicas, como parágrafos e coisas assim.

    Exemplo:

    Tens um bloco chamado sidebar (tipo um bloco com os menus e links e assim). Para definir o bloco em si, usas #sidebar, onde defines width e tudo o resto. Depois por exemplo para definires o estilo de uma lista dentro do sidebar já usas class, como por exemplo #sidebar .list {list-style: none;}. São métodos de organização de código ...
     
  13. msdevweb

    msdevweb Power Member

    Tens sempre que identificar o style que vais usar, seja class ou id, mas por exemplo se queres um p.center somente para centrar os paragrafos e definir a font-size em todos os paragrafos como 9px, e imagina que usas o .center para centrares as tuas tabelas ou textos em geral, e com a font-size em 12px?? é mais facil definires p.center e .center, e basta olhares para o código e percebes/encontras facilmente o que queres, agora se tivesses que fazer .centerMAIN e depois .centerP ou ainda .centerText, .centerAlink...
    Trata-se apenas de uma questao de organizaçao... para mim claro.
    Mas para ver se termino com as minhas reply's a este post, uma observaçao final:

    A maior diferença entre as classes e os id's é a liberdade! Liberdade de escolheres o que queres usar,
    ID's = UTILIZAÇAO UNICA. (vantagem de definir sub-atributos a varias <tag's> dentro desse id.)
    CLASSES = MULTI-UTILIZAÇAO. (com enorme variedade de utilizaçoes e com alguns sub-atributos a tag's)
    Agora tu é que decides o que usar. Eu pessoalmente uso quase sempre .classes e nem me chateio muito com definiçoes ID's...
    Agora tu é que sabes!
    It's in your hands! (code)

    Abraço.
     
  14. o "id" nas tags indentifica determinada tag ou seja fica com um nome, no meu caso uso bastante por causa do dhtml ou seja se precisar de alterar o bgcolor em javascript chamo pelo ID se preciso de alterar o conteudo da mesma chamo pelo id

    Agora claro que as CLASS tanto pode afectar uma so tag como podes afectar todas as tags, como uso os 2 "ID" e "CLASS" mas com propositos distintos, o ID para identificar uma table ou td ou p ou div e usa as class para defenir a fonte cor etc...

    espero ter ajudado
     
  15. vjoe

    vjoe Power Member

    Obrigado pelas repostas, já estou esclarecido.

    De resto, o melhor é eu continuar a praticar. Só assim é que percebo realmente como funcionam as coisas e o que é ou não melhor. :)
     
  16. msdevweb

    msdevweb Power Member

    Ora aí está uma boa "noção".
    Keep coding... :)

    um abraço.
     

Partilhar esta Página