Embed Size (px)
DESCRIPTION
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
Citation preview
CSS´s Dinâmicos com SSAS
André Paulovich
Modernizando a forma como escrevemos as folhas de estilo para websites
04/12/2023
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.
04/12/2023
Era uma vez...
04/12/2023
Era uma vez...
04/12/2023
Era uma vez...
04/12/2023
Era uma vez...
Håkon Wium Lie
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.
04/12/2023
Era uma vez...
Cascading HTML Style Sheets (proposta / CERN) - 1994CSS 1 - 1996CSS 2 - 1998CSS 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.
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
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”/>
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 {}
Seletores
Dois principais tópicos sobre CSS
.info { background: #f3b500; text-align: center; border: solid 1px #f3b500;}
PropriedadesSeletores
.header , .title { color: #f3b500;font-size: 10px;Background: #FF0033;
}
Regras de escrita
Lista-de-Seletores { Lista-de-Propriedades}
Seletores
Mas e o CSS3?
=
Text shadowBox shadowFont faceMulti columnTransitions
Exemplos de CSS3
Demo
Prefixos experimentais
-ms- para IE-moz- para Firefox-o- para Ópera-webkit- para Safari, Chrome, iPhone, iOS, Android
Navegadores
Media Queries
Media Queries
Sass -Syntactically Awesome Stylesheets
Quem programa em Ruby?
Para nossa alegria... Precisamos apenas instalá-lo.
http://rubyinstaller.org
Passo final de instalação
gem install sass
É uma extensão do CSS3
Traz de volta a diversão de escrever CSS.Acrescentando mais poder ao CSS.
CSS
Regras aninhad
as
Variáveis
Combinações
Herança de
seletores
Variáveis
Resultado
demo
“Aninhamento”
Resultado
demo
Combinações
Resultado
demo
Herança de seletores
Resultado
demo
Funções extras
background-color: lighten($navbar-color, 20%);}
lighten
background-color: darken($navbar-color, 20%);}
darken
Perguntas?
Obrigado!
12/05/12
