Iniciando com CSS3

Criado por Mateus Souza em 31 de agosto de 2009 às 14:35

imgcss3 Iniciando com CSS3

Já faz algum tempo que o CSS3 foi lançando e eu ainda não falei nada sobre ele. Pois bem, vamos dar uma introdução ao CSS3. Antes de mais nada quero deixar bem claro que nem todos os navegadores tem suporte ao CSS3, não preciso nem citar o IE6 né . Aqui vale apenas citar os que possuem suporte: Firefox 3+, Safari 4+ e Opera 9.5+. Vamos iniciar com a história do CSS:

A História do CSS

O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C. Desde então, apenas esboços foram apresentados como módulos em Junho de 1999(CSS3).

Com essa pequena intro, já percebe-se que o CSS3 vem sendo planejado a muito tempo. Chega de “papo furado” e vamos prosseguir.

Novidade do CCS3

Novidades são muitas…o melhor delas é que são úteis, hehe . Veja a lista das principais propriedades que são novidades, com o surgimento do CSS3:

Bordas

border-color
border-image
border-radius
box-shadow

Fundos

background-origin
background-clip
background-size
fazer camadas com múltiplas imagens de fundo

Cor

cores HSL
cores HSLA
cores RGBA
Opacidade

Texto

text-shadow
text-overflow
Ruptura de palavras longas

Interface

box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Seletores

Seletores por atributos

Modelo de caixa básico

overflow-x, overflow-y

Outros

media queries
criação de múltiplas colunas de texto
propriedades orientadas a discurso ou leitura automática de páginas web
Web Fonts

Em futuros posts falarei sobre estas propriedades e também farei tutoriais (o que não pode faltar ^^). Por ordem de importância, vamos falar hoje sobre os seletores do CSS3.

Seletores CSS3

No geral, os seletores do CSS3 são estes (obs. E - letra E – é o seletor. Ex: p[atributo*="string"]):

E[atributo*="string"]
E[atributo$="string"]
E[atributo^="string"]
E~F
:root
:last-child
nly-child
:not ( )
:empty
:target
:enabled
:disabled
:checked

Quem conhece bem o jQuery, perceberá que ele tem alguns seletores igualzinho ao CSS3, isto ocorre porque o jQuery utiliza os seletores do CSS3 também.

**E[atributo*="string"]**

Funciona da seguinte maneira, imagine que eu tenho uma div alinhada a esquerda:

<div align='left'></div>

Podemos estilizar esta div apenas acessando a sua propriedade, que neste caso é align=”left”. Observe que o valor é exatamente igual – left = left.

div[align*=left] {
}

Veja o exemplo

Semelhantemente os seletores E[atributo$="string"] e E[atributo^="string"], funcionam da mesma forma, mais a diferença entre eles é, se tiver o $(cifrão) deverá terminar com o valor especificado e se tiver o ^(acento circunflexo) deverá iniciar com o valor especificado.

E~F

Este seletor faz uma combinação de dois seletores para a estilização. Exemplo, um h1 e p:

<h1></h1>
<p></p>

e o css:

h1 ~ p {
}

Neste caso o que será estilizado com css é o p. O segredo para o domínio desta seleção é a ordem dos elementos, se neste exemplo o h1 fosse depois do p o css não resultaria em nada. Observe o que estou dizendo:

<p></p>
<h1></h1>

Veja o exemplo

:root

Como o próprio nome diz, ele irá pegar o 1º elemento da página, a tag <html>. Podemos usar um css mais avançado e criar CSSs da seguinte maneira:

:root div{
}

Veja o exemplo

:last-child, nly-child e :not()

Para não cansar a leitura, vamos a uma explicação rápida. :last-child irá pegar somente o último elemento de uma lista por exemplo (<li>):

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2</li>
    	<li>Texto 3</li>
    	<li>Eu sou o ultimo texto desta lista</li>
</ul>

CSS

li:last-child{
    	background: #ddd;
    	display: block;
}

Veja o exemplo

nly-child, como o própio nome já diz, (only = único) irá buscar o elemento que é único, para exemplificar usei mais uma vez uma lista:

HTML

<ul>
    	<li>Texto 1</li>
    	<li>Texto 2
    	    	<ul>
    	    	    	<li>Só tem um LI</li>
    	    	</ul>
    	</li>
    	<li>Texto 3</li>
    	<li>Texto 4</li>
 </ul>

CSS

li:only-child {
    	background: #ddd;
    	display: block;
}

Veja o exemplo

:not, irá “bloquear” a estilização com CSS ao elemento que tiver uma certa #id ou .classe . Neste exemplo abaixo, “bloquearemos” a classe .vermelho:

HTML

<ul id="dois">
    		<li>Texto 1</li>
		<li class="vermelho">Texto 2</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li>Texto 3</li>
		<li>Texto 4</li>
		<li class="vermelho">Texto 3</li>
		<li>Texto 4</li>
</ul>

CSS

    	li:not(.vermelho){
    	background: #ddd;
}

Veja o exemplo

:empty

É útil para indicar div que estão em branco (empty = em branco), ou então esconde-las, como no código abaixo:

div.box:empty {
    	display: none;
}

:target

essa eu axei interressante…imagine que você tenha links que puxar o id(#) de uma parte do site, por exemplo este link http://www.mateussouza.com/novidades/novas-funcoesfunctions-do-wordpress-2-8#comments você percebe que no final dele existe #comments e é usando esse atributo que vamos estilizá-lo:

h2:target {
    	background:#F2EBD6;
}

:enabled, :disabled e :checked

Só se aplica a elementos do html que tenham a opção de abrir(enabled) e fechar(disabled) ou checar(checkbox), como por exemplo formulários. Podemos estilizar como destaque alguns radios que estão desabilidatos.

<input type="text" disabled="true" />

O css seria:

input:disabled {
    	border:1px dotted #999;
    	background:#F2F2F2;
 }

o mesmo se aplica ao enabled, mais temos que somente alterar :disabled por :enabled. Ex:

input:enabled {
    	border:1px dotted #999;
    	background: #F2F2F2;
 }

E para finalizar, com o atributo :checked podemos colocar os checkbox’s que estão checados mais a frente:

<input type="checkbox" checked="checked" />

CSS:

input:checked {
    	margin-left: 20px;
}

Veja o exemplo

Depois leia também o post do Smashing Magazine que está mais amplo…
Taming Advanced CSS Selectors

Outros Post Desta Série

Prosseguindo com CSS3 – Bordas e Sombras

Até a próxima.

Postado em CSS

Feed Comentários - RSS 2.0 | Trackback

Gostou? Então compartilhe já:

Ir para homeMateus Souza – Webdesigner