O documento resume a história da criação do CSS por Håkon Wium Lie em 1994 para separar a formatação visual do conteúdo em páginas web. O CSS evoluiu através das especificações CSS1, CSS2 e CSS3, adicionando novas propriedades e seletores. O documento também discute ferramentas como Sass que aumentam a produtividade na escrita de folhas de estilo CSS.

1. CSS´s Dinâmicos com SSAS
Modernizando a forma como escrevemos as folhas
de estilo para websites
André Paulovich

2. André Paulovich
paulovich@100loop.com
@andrepaulovich
www.raptors.com.br www.100loop.com

3. Era uma vez...
• A internet surgiu com objetivo de compartilhar textos
científicos .
• Quando o HTML foi criado, a intenção não era de forma
alguma, formatar informação.
12/27/2012

4. Era uma vez...
12/27/2012

5. Era uma vez...
12/27/2012

6. Era uma vez...
12/27/2012

7. Era uma vez...
Foi aí que ele propôs a criação do CSS ou Cascading
Style Sheets…
Isso lá em 1994.
Convidou, Bert Bos – que naquele tempo estava
trabalhando em um browser chamado Argo –
começou a trabalhar no projeto.
Os dois então, trabalharam juntamente no começo do
desenvolvimento do CSS.
Håkon Wium Lie 12/27/2012

8. Era uma vez...
Cascading HTML Style Sheets (proposta / CERN) - 1994
CSS 1 - 1996
CSS 2 - 1998
CSS 2.1 (revisão) - 2003 <<
CSS 3 - em desenvolvimento
Só a partir de 2001 começam a ser realmente usadas devido à falta de
suporte por parte dos browsers mais antigos.
12/27/2012

9. O que é CSS?
• Permite separar a formatação visual do conteúdo
• Podemos especificar a formatação para:
– Todos os elementos de um determinado tipo
– Para um elemento com um determinado id
– Todos os elementos com uma determinada classe
– E combinações destas três formas acima

10. Três formas de especificar o CSS
1) HTML Inline style
<div style=“color: red; font-size: 18px”>Texto</div>
2) Style dentro do Head
<style type=“text/css”>Configurações de CSS</style>
3) Usando a tag link
<link rel=“stylesheet” type=“text/css”
href=“arquivo.css”/>

11. Seletores
Nome do elemento
div, p, td, table {}
Definição por Id
#logo, #special {}
Nome de classes
.header, .title {}
Combinação dos 3 tipos
table #logo .special {}

12. Dois principais tópicos sobre CSS
Seletores
.info { Propriedades
background: #f3b500;
text-align: center;
border: solid 1px #f3b500;
}

13. Regras de escrita
Lista-de-Seletores {
Lista-de-Propriedades
}
Seletores
.header , .title {
color: #f3b500;
font-size: 10px;
Background: #FF0033;
}

14. Mas e o CSS3?

15. =

16. Exemplos de CSS3
Text shadow
Box shadow
Font face
Multi column
Transitions

17. Demo

18. Navegadores
Prefixos experimentais
-ms- para IE
-moz- para Firefox
-o- para Ópera
-webkit- para Safari, Chrome, iPhone, iOS, Android

19. Media Queries

20. Media Queries

21. Sass -Syntactically Awesome
Stylesheets

22. Quem programa em Ruby?

23. Para nossa alegria...
Precisamos apenas instalá-lo.
http://rubyinstaller.org

25. gem install sass
Passo final de instalação

26. Traz de volta a diversão de escrever CSS.
Acrescentando mais poder ao CSS.
É uma extensão do CSS3
Regras Variáveis
aninhadas
CSS
Herança de Combinações
seletores

27. Variáveis
Resultado

28. demo

29. “Aninhamento”
Resultado

30. demo

31. Combinações
Resultado

32. demo

33. Herança de seletores
Resultado

34. demo

35. Funções extras
lighten
background-color: lighten($navbar-color, 20%);}
darken
background-color: darken($navbar-color, 20%);}

36. Perguntas?

37. Obrigado!
12/05/12