Baixado 23 vezes
Carregado porAndré Paulovich
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
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.
Mais conteúdo relacionado
Semelhante a CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
![[DevDay2018] Arquitetura de Software num cenário de incertezas - Arquitetura ...](https://cdn.slidesharecdn.com/ss_thumbnails/devday2018-paulovich1-180901143034-thumbnail.jpg?width=640&height=640&fit=bounds)
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
- 1. CSS´s Dinâmicos comSSAS 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... CascadingHTML 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 deespecificar 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ópicossobre 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 Textshadow Box shadow Font face Multi column Transitions
- 17.
- 18. Navegadores Prefixos experimentais -ms- paraIE -moz- para Firefox -o- para Ópera -webkit- para Safari, Chrome, iPhone, iOS, Android
- 19.
- 20.
- 21. Sass -Syntactically Awesome Stylesheets
- 22. Quem programa emRuby?
- 23. Para nossa alegria... Precisamosapenas instalá-lo. http://rubyinstaller.org
- 25. gem install sass Passo final de instalação
- 26. Traz de voltaa 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.
- 29. “Aninhamento” Resultado
- 30.
- 31. Combinações Resultado
- 32.
- 33. Herança de seletores Resultado
- 34.
- 35. Funções extras lighten background-color: lighten($navbar-color,20%);} darken background-color: darken($navbar-color, 20%);}
- 36.
- 37. Obrigado! 12/05/12