Mini-tutorial de CSS (P1) - Id ou class
Não é a única forma de criar um CSS, mas é a que eu uso e cá estou eu ensinando para vocês. Se esse tutorial te ajudar, se você usar, etc... Credite! Não reblogue, não disponibilize em outro lugar. Algumas coisinhas básicas para vocês ^^
A diferença, além de o id usar # e o class usar um pontinho (.), é que o id é um identificar único no código, já o class, pode ser usado diversas vezes. Para criar no CSS é muito fácil.
.class {estilo da class; estilo da class; }
#id {estilo da id; estilo da id; }
Caso queira criar uma nova id ou class, que só possa ser usada dentro de uma outra determinada class ou id, é simples:
.class .class2 {estilo da class2; estilo da class2; }
#id #id2 {estilo da id2; estilo da id2; }
.class #id2 {estilo da id2; estilo da id2; }
#id .class2 {estilo da class2; estilo da class2; }
No exemplo acima, dá ainda pra misturar uma id com uma class e vice-versa, criando uma determinada que funcione apenas dentro da outra, idependente se é id ou class. Na hora de usá-las, ficaria da seguinte forma:
<div class="class"> <div class="class2"> CONTEÚDO DA CLASS/CLASS2 </div></div>
<div id="id"> <div id="id2"> CONTEÚDO DA ID/ID2 </div></div>
<div class="class"> <div id="id2"> CONTEÚDO DA CLASS/ID2 </div></div>
<div id="id"> <div class="class2"> CONTEÚDO DA ID/CLASS2 </div></div>
Não é difícil, não é fácil. Mas com o tempo, começamos à entender. Então, as segundas classes ou ids que vocês criaram dentro de outra, não funcionarão fora da id ou class a qual elas permanecem. É bem simples!
Agora vamos à uma nova parte, pouco usada, mas é que útil e fácil. Todos nós sabemos que é possível criar uma class ou id para dar um estilo para um link ou span, que é normalmente usado no falso i-frame. Dessa forma, colocamos as tags class="nomedaclass" ou id="nomedaid" dentro do código de um link ou do botão do falso i-frame.
Uma forma útil de não ter que ficar colocando essa tag em cada link ou botão, é criar uma class ou id onde todos os links ou spans dentro dessa class ou id, tenham um determinado estilo.
É praticamente criar uma id ou class dentro de uma já existente, como fora explicado acima. Só que nesse caso, invés da id ou class "interna", criamos um a (correspondente à link) ou span.
Suponhamos que o nome da class ou id seja menu. Dessa forma, primeiro criamos o "menu" no CSS:
.menu {width: 300px; }
#menu {width: 300px; }
Você não precisa criar as duas, apenas optar por uma delas. Mas a que escolher, será a reutilizada na hora de criar o estilo do a (link) ou span. O "300px" corresponde à sidebar onde ficará o menu. É o tamanho limite que cada link ou span poderá ocupar, podendo ser modificado de acordo com a caixa ou divisória onde ficará o seu menu. Se não tiver um limite, não precisa nem criar a tag. Mas é bom caso queira definir mais algo, como onde ficará, distância do topo, alinhamento, etc...
Agora, vamos criar o estilo do link ou span. É fácil ^^
.menu a {estilo do link; estilo do link; }
.menu span {estilo do span; estilo do span; }
#menu a {estilo do link; estilo do link; }
#menu span {estilo do span; estilo do span; }
Pronto! À essa altura, já ficou claro que no CSS, para criar uma id, usamos o sustenido # antes do nome. Pronto, id criada! Para uma class, o ponto, como já foi explicado acima.
Agora você já conhece a id e a class do seu CSS. Essa é a primeira parte apenas do mini-tutorial de CSS.