Linda Martins, 18, Salvador. Livros (os que leio e os que escrevo), minimalismo, estudos aleatórios e comida definem minha vida. Em constante evolução. Se você for suficientemente observador, verá que esta bio é diferente da bio do ano passado.

ENTREVISTA
Rudson Xaulin

RESENHA
Um beijo inesquecível

AUTORAIS
Baed

6.7.16

Aprendendo html #07 - Tipos de seletores e suas "divs"

Pois bem, como é visível, o blog está de cara nova (again).
Eu consegui produzir dois novos templates para a página de escritos e o blog principal, templates esses nos quais, imagino eu, se mostram mais bem feitos que os últimos. Novas propriedades foram dominadas, propriedades que serão citadas assim que eu entender a parte "teórica" delas, e consideráveis avanços foram feitos nesse intervalo de tempo. Mas então, caro leitor, você deve estar se perguntando qual a ligação que esses sinais da imagem acima tem com o assunto deste post, e eu não vou demorar mais para sanar suas dúvidas.

Como citado em postagens antigas da sessão de html, os códigos do CSS, a folha de estilos, possuem um "formato"; apenas para refrescar sua memória, segue a forma:
seletor {propriedade:valor;}
O que até então não foi dito aqui é que estes sinais (. #) quase sempre aparecem antes do nome dado aos seletores e a diferença entre um e outro é algo que você precisa saber. Essa é a primeira vez num post que vou além do CSS e incluir tags típicas do "<body>", para facilitar a compreensão dos seletores e de como eles funcionam.

.item1 {background: #fff; color: #000;}
#item1 {background: #fff; color: #000;}
Não aparenta fazer a mínima diferença, certo? As mesmas propriedades e valores, o mesmo seletor, não é? Nas primeiras postagens sobre html, eu também disse que o <body> colocaria tudo o que você definiu no CSS em prática. É basicamente aqui, neste ponto, em que a diferença se faz notável.

<div class="item1">Este é o seletor . </div>
<div id="item1">Este é o seletor # </div>
Uma "div" é um elemento de bloco em html que serve para estruturar e organizar o que foi definido no CSS. Dentro destes "blocos", você pode inserir textos, imagens, links, dentro do estilo definido para aquele elemento. Por exemplo, no código CSS, eu defini que a cor de fundo do bloco seria branca e a cor das letras, preta. Na div, eu defino o que será escrito e exibido neste bloco.

Mas existe dois elementos em negrito no último código; CLASS e ID. Qual a diferença entre eles e por que estão aí?

São justamente esses termos que informam de qual seletor se trata, e de que tipo de seletor estamos falando. É através dos termos "class" e "id" que vamos linkar as informações do CSS ao HTML para que o conteúdo saia do modo como foi projetado.

  • Um seletor # é um elemento id em html
  • Um seletor . é um elemento class em html

Teoricamente, uma ID deve ser usada apenas uma vez num elemento de página, enquanto uma CLASS pode ser usada várias vezes num único elemento. Na prática, não há diferenças visíveis entre um e outro, mas essas diferenças existem e a teoria deve ser levada em conta, para que não haja problemas futuros no seu código.

Um exemplo:

<div id="elementotodo">
<div class="parte1desseelemento">CIMA</div>
<div class="parte2desseelemento">BAIXO</div>
<div class="parte3desseelemento">DIREITA</div>
<div class="parte4desseelemento">ESQUERDA</div>
</div>

Uma análise mais detalhada das diferenças entre IDs e CLASSES