#tutorial de css

¿Cómo lograr colores transparentes con CSS3?

Tutorial de HTML/CSS: ¿Cómo poner una imagen como bullet point con CSS?

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 ^^

Id ou class?

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.