Sintaxe Básica CSS

[Fkarol 0]

Olá, boa noite

Estou aprendendo css

Será que alguém pode me ajudar,

Qual e a finalidade deste símbolo: # ?

 

Exemplo:

div#menu {

 

}

 

Desde já agradeço.

 

Duvida http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Dúvida com seletor ID

[brcontainer 16]

Em primeiro lugar não use tópicos com titulo "duvida"

explique o que você deseja tipo assim

"Duvida quanto a # no CSS"

 

De uma lida nas regras do forum ...

 

o # serve para IDs

 

tipo

<style>#minhaid{}</style><div ID="minhaid"></div>

ids são usadas muito em JS ID(identidade) só pode haver uma ID com determinado nome na página

 

exemplo você não pode repetir assim

<div id="ID">1</div><div id="ID">2</div>

isso é errado beleza

 

falow

[Fkarol 0]

ok, desculpa-memais uma vz obrigada. porem se possivel esclareça-me, porque sempre acrescentace a tagpor exemplo:body#home {...}oubody#home div#topo {...}?

[inforsis 1]

Olá FKarol, acredito que você possa ser nova no fórum.

Então antes de responder sua dúvida irei te dar algumas sugestões que irão faciliar sua convivência aqui no fórum.

 

Regras do Fórum iMasters

 

Busca do Fórum Imasters

 

Como criar um tópico para o seu problema.

 

Agora vamos a sua dúvida, o esclarecimento é exatamente pelo caminho que o silverfox colocou acima, porém irei adicionar algo para seu conhecimento.

 

Qual e a finalidade deste símbolo: # ?

este simbolo representa um seletor ID. Tem por finalidade, permitir que você dê um nome para identificar o elemento html que será aplicado as regras css.

 

Mais conhecimentos uteis:

 

Toda e qualquer regra css para ser aplicada necessita de um seletor.

 

seletor - nada mais é do que o elemento html identificado

por sua tag;

ou por sua ID identificado por # (jogo da velha);

ou classe identificado por um . (ponto).

 

um seletor de ID é aplicado a um unico elemento HTML no documento. Permite que você defina um nome para identificar um elemento html que será aplicado a regra css dentro do documento, é importante que para este nome você evite usar números ou caracteres especiais, assim como palavras de uso marcado (tais como "esquerdo", "direito", "baixo", etc...).

 

Ps: De inicio posso te acrescentar isso, porém caso queira estudar mais um pouco pode consultar o link abaixo.

http://forum.imasters.com.br/index.php?showforum=140

 

existem muitos tópicos que podem ajudar.

 

Qualquer outra dúvida post novamente, que estaremos a sua disposição para ajudar. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Boa Sorte nos estudos.

[Fkarol 0]

Sim, compreendo!!! porém desculpa-me pela insistência o que eu não compreendo e o motivo de se colocar a tag antes do #

 

Por exemplo:

body#home {...}

 

ou

body#home div#topo {...}

 

?

 

já que de acordo com o livro que tenho e as respostas postadas por vocês à finalidade do #

e definir um id como seletor

 

Desta formar:

 

#id {...}

 

Mas uma vez obrigada pela ajuda, e desciulpa-me por qualquer coisa.

[inforsis 1]

Boa Tarde Fkarol, vou explicar usando seu exemplo.

 

body#home {...}

 

ou

body#home div#topo {...}

no exemplo acima o body é o elemento HTML cujo é identificado pela id home, isso é notado pelo uso do # que antecede a palavra home. Essa explicação vale para os outros exemplos que você citou da mesma forma.

div - elemento HTML.

topo - id que identifica o elemento div.

 

seletor - nada mais é do que o elemento html identificado

por sua tag;

ou por sua ID identificado por # (jogo da velha);

ou classe identificado por um . (ponto).

Acredito que isso esclarece sua dúvida, porém caso isso não aconteça post novamente. Ou se surgirem novas dúvidas post, não esquecendo de antes observar a busca do fórum. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[FelipeMorais 0]

Olá Fkarol,

As regras CSS declaradas podem ser aplicadas em vários elementos no mesmo documento. Quando queremos atingir a uma determinada área em que o elemento se encontra, aumentamos a especificidade da regra, ou seja, deixando-a mais específica.

 

Exemplo: Imagine que o elemento "p" possui a cor vermelha em todo documento exceto dentro da div com ID rodape, onde deve ser azul. A regra seria:

p{color:red;} /*para todos os "p" */#rodape p{color:blue;} /* para o "p" dentro da div rodape */

Agora imagine que seu documento css possui centenas de linhas e por algum motivo é inviável procurar pela regra que ja colore o elemento p dentro da div rodape.

 

pBasta aumentarmos a especificidade da regra criada acima:

 

div#rodape p{color:blue;} /* aqui eu especifico que o elemento que recebe o ID rodape é uma DIV */

ou ainda:

body div#rodape p{color:blue;} /* aqui eu especifico que o elemento que recebe o ID rodape é uma DIV e que essa div está dentro do elemento BODY */

e assim por diante.

 

Um método para saber qual regra é mais específica consiste em atribuir pontos para os seletores, prevalecerá o de maior valor.

 

Como calcular?

Conte a quantidade de ID no seletor. Depois a quantidade de classes e por ultimo a quantidade de tags HTML.

Depois escreva os números obtidos da esquerda para a direita e na ordem que foram calculados ( ID, classe e tag).

O numero obtido é o valor da especificidade.

 

Exemplo:

 

div#rodape p{color:blue;} /* IDs = 1; Classes = 0; Tags = 2; ou seja, o valor é 102 */#rodape p{color:green;} /* IDs = 1; Classes = 0; Tags = 1; valor 101 */

Como notamos acima, apesar de ter sido declarada depois ( tentando um efeito cascata ), a segunda regra é mais fraca que a primeira, portando, não será considerada. Ou melhor, será sobreposta pela primeira regra.

 

 

Então entendemos que:

body#home div#topo {...}

só é diferente de:

#home #topo {...}

por uma questão de especificidade.

 

Espero que eu não tenha sido detalhista demais hehe

 

Abraço

[Fkarol 0]

Olá obrigada a todosAgora compreendi a coisa, rsrsrs.Meu objetivo e melhora a qualidade dos websites feitos por mim.Usando as tais tableless css etc.Estou no caminho certo? RsrsAbraço a todos e mas um vez obrigada!!!

[Giovani 104]

A lista de links que vou lhe passar é leitura recomendadíssima!

http://forum.imasters.com.br/index.php?s=&...st&p=536888

 

Qualquer dúvida volte a postar!

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif