The Wayback Machine - https://web.archive.org/web/20101125195300/http://maujor.com/palestras/visaocss/visaocss.html
CSS - Uma visão geral
Maurício Samy Silva
Objetivo
- Definir, descrever e posicionar as CSS, bem como demonstrar a versatilidade deste poderoso mecanismo para construção de web sites.
[any material that should appear in print but not on the slide]
1-Sumário...
- O nascimento das CSS;
- Definindo e entendendo as CSS;
- HTML + TABLE;
- XHTML + CSS;
- Vantagens do projeto CSS;
[any material that should appear in print but not on the slide]
...-Sumário
- A sintaxe da regra CSS;
- Aplicando CSS
- Box Model;
- Exemplos práticos;
- Conclusão
[any material that should appear in print but not on the slide]
1-O nascimento da CSS
- Surge o HTML para troca de informações científicas;
- O HTML difunde-se entre grupos de não cientistas;
- Os documentos web assumem um caráter geral e diversificado;
- As necessidades de "incrementar" visualmente os documentos;
- O aparecimento de novas tags e atributos;
[any material that should appear in print but not on the slide]
1/1-O nascimento da CSS
- O uso de tabelas;
- As implementações proprietárias;
- O "caos";
- O nascimento das CSS.
[any material that should appear in print but not on the slide]
2-Definindo e entendendo as CSS
- CSS - Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) a documentos web; http://w3.org/Style/CSS/
- Estruturação por XHTML e formatação por CSS.
[any material that should appear in print but not on the slide]
3-HTML + TABLE
- O conceito de montagem de páginas web com HTML e tabelas;
- As tabelas aninhadas;
- O uso de tabelas em projetos CSS;
[any material that should appear in print but not on the slide]
3/1-Site com tabelas
[any material that should appear in print but not on the slide]
3/2-O uso da tag font
[any material that should appear in print but not on the slide]
3/3-A poluição do código
[any material that should appear in print but not on the slide]
3/4-A estrutura com tabelas
[any material that should appear in print but not on the slide]
3/5-Desvantagens do uso de tabelas
- A geração de código HTML por softwares gráficos;
- As imagens spacer.gif;
- Layouts fluídos;
- A manutenção;
- A renderização das tabelas;
- A acessibilidade a tabelas;
[any material that should appear in print but not on the slide]
3/6-Site sem tabelas
[any material that should appear in print but not on the slide]
3/7-Código 'limpo'
[any material that should appear in print but not on the slide]
4-XHTML + CSS
- XHTML, uma evolução do HTML;
- Marcação semântica e estruturada;
- Código enxuto, claro e de fácil entendimento;
- O uso de tabelas em projetos CSS;
[any material that should appear in print but not on the slide]
4/1-HTML ======> XHTML
- XHTML 1.0 XHTML 1.1 XHTML 2.0
[any material that should appear in print but not on the slide]
4/2-Conversão HTML==>XHTML
[any material that should appear in print but not on the slide]
5-Vantagens das CSS
- Controle da apresentação a partir de um único arquivo;
- Redução do tempo de carga do documento;
- Versões para diferentes mídias com uma só marcação;
- Simplificação do trabalho de manutenção;
- Amigável aos softwares de busca e indexação;
- Facilitação ao cumprimento dos itens de acessibilidade;
- E, muito mais...
[any material that should appear in print but not on the slide]
6-Sintaxe da regra CSS
- seletor {propriedade:valor;}
- seletor: tag's, classes, ID's; pseudo-seletores;
- agrupamento de seletores;
[any material that should appear in print but not on the slide]
7-Aplicando CSS
- Folhas importadas;
- Folhas 'lincadas';
- Folhas incorporadas;
- Estilos 'inline;
[any material that should appear in print but not on the slide]
7/1-Sintaxe de aplicação
<style type="text/css" media="screen">
@import url("/estilos/main.css");
</style>
<link rel="stylesheet" type="text/css"
media="print" href="/estilos/print.css" />
[any material that should appear in print but not on the slide]
7/2-Sintaxe de aplicação
<style type="text/css">
h1 {font-size:150%; color:#036;}
</style>
<p style="background-color:#f00;">
texto do parágrafo
</p>
[any material that should appear in print but not on the slide]
8-O Box Model
O Box Model (Modelo de Caixas) foi definido pelo W3C nas Recomendações para CSS1 publicadas em 1996.
- Browsers conforme as web standards;
- Browsers não conformes as web standards;
- Conteúdo + paddings + borders;
[any material that should appear in print but not on the slide]
8/1-O Box Model
[any material that should appear in print but not on the slide]
8/2-O Box Model
[any material that should appear in print but not on the slide]
9-Exemplos
Sites CSS mundialmente reconhecidos
[any material that should appear in print but not on the slide]
10-Conclusão
Nesta palestra tivemos uma visão geral das CSS.
Uma tecnologia revolucionária para montagem de Web Sites.
Focada em portabilidade, Web Standards, facilidade de manutenção e sobretudo flexibilidade.
Espero ter motivado vocês para conhecer um pouco mais de CSS.
[any material that should appear in print but not on the slide]
