Cascading Style Sheets

Level 3

Introdução

• As Cascading Style Sheets começaram a ser desenvolvidas em 1994, pela necessidade de se formatar a informação do HTML;

• Em 1996 apareceu a especificação das Cascading Style Sheets Level 1 (CSS 1) e, em 1998, das CSS Level 2;

• CSS 3 ainda está em desenvolvimento, porém deve demorar menos que seus antecessores para ser implantado, devido ao suporte dos novos navegadores;

• A especificação do CSS 3 foi dividida em módulos, tornando mais rápida a aprovação e implementação dos elementos. A lista dos módulos pode ser vista aqui.

Compatibilidade

• Em CSS 3, cada motor de renderização é declarado de uma forma diferente:

• Webkit (Safari / Chrome):-webkit-atributo

Gecko (Firefox / Flock):-moz-atributo

Trident (Internet Explorer):atributo

Bordas

• border-color

– utiliza uma cor para cada 1px de borda

• Exemplo de border-color

– http://www.css3.info/preview/colored-border/

• border-image

– permite o uso de imagens na borda

• Exemplo de border-image

– http://www.css3.info/preview/border-image/

• border-radius

– controle de curvatura da borda

• Exemplo de border-radius

– http://www.css3.info/preview/rounded-border/

• box-shadow

– cria uma sombra no elemento HTML

• Exemplo de box-shadow

– http://www.css3.info/preview/box-shadow/

Backgrounds

• background-origin

– determina qual o ponto inicial de onde o background-position é calculado

• background-clip

– indica se o background aplica-se também na área da borda ou não

• background-size

– determina o tamanho da imagem de background

• múltiplos backgrounds

– agora é possível adicionar diversas imagens de background em um único elemento HTML

• Exemplo de múltiplos backgrounds

– http://www.css3.info/preview/multiple-backgrounds/

Texto

• text-shadow

– determina uma sombra para um texto

• Exemplo de text-shadow

– http://www.css3.info/preview/text-shadow/

• text-overflow

– maneira de demonstrar quando o texto ultrapassar a largura do elemento que o envolve

– existem dois valores: ellipsis e clip

• Exemplo de text-overflow

– http://www.css3.info/preview/text-overflow/

Outras novas propriedades

• resize– http://www.css3.info/preview/resize/

• outline– http://www.css3.info/preview/outline/

• font-face– http://www.css3.info/preview/web-fonts-with-font-face/

• múltiplas colunas– http://www.tableless.com.br/css3-columns

• recursos de voz– http://www.css3.info/preview/speech/

Seletores

• seletores CSS nos permitem manipular um ou vários elementos HTML sem a necessidade de IDs ou classes.

Seletores de Substring

• E[att^=“val”]

– Representa um elemento com o atributo att que começa com o prefixo “val”

• E[att$=“val”]

– Representa um elemento com o atributo att que termina com o sufixo “val”

• E[att*=“val”]

– Representa um elemento com o atributo att que contém ao menos uma instância do da substring“val”

Pseudo classes estruturais

• E:nth-child(n)– O valor (n) representa o enésimo filho do elemento pai

• E:first-child– Representa o primeiro filho do elemento pai

• E:last-child– Representa o último filho do elemento pai

• E:first-line– Refere-se a primeira linha do elemento

• E:first-letter– Refere-se a primeira letra do elemento

• Outros seletores

– http://maujor.com/tutorial/seletores-css3.php

– http://www.mateussouza.com/css/iniciando-com-css3

CSS Transformation eCSS Animation

• CSS Transformation permite a transformação de elementos HTML, como escala, rotação e translação.

• CSS Animation permite movimentar elementos HTML com a ação do usuário (click, hover, focus, etc).

• Exemplos de CSS Transformation e CSS Animation

– http://www.the-art-of-web.com/css/css-animation/

Gostaram? Agora imaginemas possibilidades comHTML 5 + CSS 3...

Obrigado :)Alexandre Romero Rodrigues