#tutorial de css

[regardis]

¿Cómo lograr colores transparentes con CSS3?

Con CSS3, ahora podemos fácilmente definir transparencias con los colores. Es decir, podemos bajar la opacidad de los colores de manera sencilla. Sigue leyendo para aprender cómo aplicar esto utilizando CSS3.

[regardis]

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

En este tutorial de HTML/CSS te enseñaremos cómo colocar una imagen como bullet point (viñeta). Esto quiere decir que podrás personalizar tus listas con pequeñas imagenes pixel y más. Leer más.

[onemoredream-blog]

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

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.

Tutorial: Marissa