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.
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
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;
}
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
As duas primeiras não são encorajadas, pois aumentam a transferência de dados.Faça somente a terceira opçãoEles são processados na ordem que é mostrada.