Ads 468x60px

Entendendo CSS - Propriedades "#" & "." - Parte 1

Muitos blogueiros tem facilidades dificuldade de entender o HTML ou o CSS. Eu por exemplo tenho muita dificuldade de entender o CSS!
Por isso resolvi começar com essa série, falando e ensinando boa parte do CSS, vou falar sobre tudo que eu aprender sobre o CSS.

Neste episódio, falarei sobre aqueles Hashtags e pontos que tem no início de todo conteúdo CSS. Primeiro devo lembrar que o css está sempre ligado ao html, por exemplo, se você colocar um CSS com um nome que não tem no HTML, ele não vai mudar nada no seu template.
Grande parte do CSS está ligado à alguma div criada no template... Vamos aos exemplos:

Por quê usamos o "#" no CSS

Quando encontramos um template feito por um brasileiro, geralmente a parte do menu está identificada mais ou menos da seguinte forma no HTML:
<div id="menu" ></div>

Para personalizar o menu com CSS, deverá estar deste jeito:
#menu { conteúdo; conteúdo;}


O hashtag é usado sempre, para personalizar as div's, e personaliza somente a div e nada mais!

Por quê usamos o "." no CSS

Diferente do #, o ponto serve para personalizar alguma class, as propriedades 'class' é usada geralmente quando os links do menu é estruturado totalmente no código HTML, que por sua vez é construído da seguinte forma em maioria dos templates mundiais:
<a href="url-de-destino" class="links"> Home</a>


Quando encontrado este código no HTML, devemos personalizar da seguinte forma no CSS:
.links { conteúdo; conteúdo;}


Então, vimos agora que o ponto, personaliza apenas as propriedades class, se estiver class="seublog" - Para personalizar isso, devemos colocar no CSS .seublog para poder personalizar esta class!

A parte mais importante disso tudo!

A parte mais importante, que na verdade são duas é que:
1ª - Uma # serve para personalizar as div's do blog, e o . serve para personalizar as propriedades class's do blog.

2ª - Sempre devemos usar o mesmo nome da div/class nas propriedades CSS, como nos exemplos acima!

Bom, por hoje é só isso, espero que gostem da minha primeira série que eu estou construindo!

5 comentários:

Diego Martins disse...

Geralmente eu nem leio as postagens que falam de css mas eu sempre quis saber sobre "." e "#"... Achava que eram a mesma coisa...
Gostei muito desse post... Vou ficar ligado aqui, espero ler mais artigos sobre css aqui.
Qualquer coisa www.nerdvirgem2.blogspot.com

Denis Gomez disse...

@Diego Martins rsrsrs

Eu também pensava que era a mesma coisa! Obrigado pela visita e pelo comentário.

E pretendo fazer muitas partes dessa série ainda... Já estou escrevendo a parte 2.

tonyrson maia disse...

legal mesmo esse artigo sempre quiz saber o que queria dizer,apesar que ja tinha estudado muito sobre css, antes mais não entendie vou continuar ver agora e ver o que posso melhorar em meu blog

Unknown disse...

Solucionou Minha duvida.

Anônimo disse...

Oi Denis!

Muito bom, cara! Simples e direto. Tirei minha dúvida aqui com teu post.

Eu também estou estudando HTML e CSS, e venho organizando todo conteúdo numa ferramenta excelente para organização de tudo na web. Dá uma olhada:

www.clipping.cc

Link do meu perfil na comunidade com os assuntos que eu coleciono
http://www.clipping.cc/profile/22

Link da minha coleção FRONT-END, com html, css e um pouco de javascript
http://www.clipping.cc/collection/165

Fanpage no Facebook
https://www.facebook.com/pages/Clippingcc/351114978363710?fref=ts

Valeu!!

Postar um comentário