1. CSS – Organizado e simples
Cercomp – Equipe Web
Nícolas Lazarte - nicolaslazartekaqui@gmail.com

2. CSS – O nascimento
 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;
 As necessidades de "incrementar" visualmente os
documentos;
 O aparecimento de novas tags e atributos;
 O uso de tabelas;
 O "caos";
 O nascimento das CSS.
Mauricio Samy Silva - http://maujor.com/palestras/visaocss/visaocss.html

3. CSS – Apresentação
 Cascading Style Sheets (ou simplesmente CSS) é
uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma
linguagem de marcação, como HTML ou XML.

4. CSS – Vantagens
 Realiza a separação entre o formato e o conteúdo de
um documento.
 Controle da apresentação a partir de um único
arquivo.
 Redução do tempo de carga do documento.
 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...

5. CSS – Desvantagens
 Grande incompatibilidade com alguns navegadores.
 Os navegadores tem estilo de exibição diferenciado
entre eles, alguns mais elegantes outros mais
rústicos.

6. CSS – Padrões
 Não existe uma maneira padrão de desenvolver uma
folha de estilo para uma documento.
 A W3C criou uma padrão de desenvolvimento de
documentos denominado XHTML.

7. XHTML – eXtensible Hypertext Markup Language
 O XHTML é uma reformulação da linguagem de
marcação HTML, baseada em XML.
 Combina as tags de marcação HTML com regras da
XML.
 Sua intenção é melhorar a acessibilidade.
 Ou seja, determina que no documento HTML a
estilização das tags sejá feita toda atráves de folhas
de estilo, pondo em desuso os parametros de estilo
de algumas tags.
 O HTML5 já segue esse padrão.

8. XHTML – eXtensible Hypertext Markup Language
Página HTML fora do pradão XHTML

9. XHTML – eXtensible Hypertext Markup Language
Página HTML no pradão XHTML

10. CSS – Organizado e simples
 Por não existir um padrão de desenvolvimento de
folhas de estilo, o CSS de algumas páginas web e
totalmente desorganizado e confuso.
 Um CSS organizado e simples faz com que ele tenha
uma manutenção mais rápida e seja facilmente
modificado sem afetar outros elementos.

11. CSS – Organizado e simples
Desorganizado!

12. CSS – Organizado e simples
Resultado

13. CSS – Organizado e simples
Organizado!

14. CSS – Organizado e simples
Resultado

15. CSS – Organizando
 Para poder usar o CSS de maneira organizada
devemos antes de tudo saber quando usar o seletor
de ID e o seletor de CLASSES.
 No desenvolvimento do arquivo HTML é recomendado
usar o seletor ID em elementos que não tem um tipo
de uso específico como o <div> e em um elemento
que pode ter muitos tipos de uso como no caso do
<p> para dar assim uma identidado ao elemento.
 Já o seletor de CLASSES deve ser usado para atribuir
uma ou várias características a um ou mais
elementos.

16. CSS – Organizando
 É recomendado também que sempre que um estilo for
utilizado apenas por um elemento, este estilo seja
específico a ele, evitando assim um estilo genérico.

17. CSS – Organizando

18. CSS – Organizando

19. CSS – Organizando

20. CSS – Tableless
 Tableless é uma forma de desenvolvimento de sites
que não utiliza tabelas para disposição de conteúdo
na página sugerido pela W3C. Para a disposição da
página o recomendado seria usar CSS.
 A W3C também não desaprova o uso de tabelas,
desde que elas sejam utilizadas para tabular dados e
não para formatar layout. Muitos navegadores travam
ou exibem incorretamente formatações usando
tabelas.

21. CSS – Tableless
Site feito com tabela.

22. CSS – Tableless

23. CSS – Tableless
Site feito com tableless.

24. CSS – Tableless

25. CSS – Tableless vantagens
 Adotar este padrão de desenvolvimento também
facilita a separação da camada de apresentação da
aplicação para o arquivo de estilo (CSS).
 Diminuição de Banda. Os navegadores modernos
cacheam arquivos css e javascripts, se a maneira que
o site será visualizado é guardado em um css (padrão
tableless) então o arquivo será cacheado após o
primeiro acesso e todos os acessos seguintes não
carregarão este arquivo, carregarão apenas o
conteúdo (texto) do site.
 Manutenção.

26. CSS – Tableless, como?
 Para desenvolver um layout utilizando o modelo
tableless, devemos primeiramente começar a pensar
em blocos.
 Um layout é basicamente composto por varios blocos.
 Cada bloco terá se necessário vários blocos dentro
dele.
 Sempre irá existir ao menos um bloco, a página toda.

27. CSS – Tableless, como?
Toda a página (Bloco 1)

28. CSS – Tableless, como?
Bloco 2 (Header)

29. CSS – Tableless, como?
Bloco 2 (Header)
Bloco 3 (Main)

30. CSS – Tableless, como?
Bloco 2 (Header)
Bloco 3 (Main)
Bloco 4 (Footer)

31. CSS – Tableless, como?
Bloco 5 (Imagem de Topo)
Bloco 2 (Header)
Bloco 3 (Main)
Bloco 4 (Footer)

32. CSS – Tableless, como?
Bloco 5 (Imagem de Topo)
Bloco 2 (Header)
Bloco 6 (Menu superior)
Bloco 3 (Main)
Bloco 4 (Footer)

33. CSS – Tableless, como?
Bloco 5 (Imagem de Topo)
Bloco 2 (Header)
Bloco 6 (Menu superior)
Bloco 7
(Menu Bloco 3 (Main)
esquerdo)
Bloco 4 (Footer)

34. CSS – Tableless, como?
Bloco 5 (Imagem de Topo)
Bloco 2 (Header)
Bloco 6 (Menu superior)
Bloco 7 Bloco 8
(Menu Bloco 3 (Main) (Menu
esquerdo) direito)
Bloco 4 (Footer)

35. CSS – Tableless, como?
Bloco 5 (Imagem de Topo)
Bloco 2 (Header)
Bloco 6 (Menu superior)
Bloco 7 Bloco 8
Bloco 9
(Menu Bloco 3 (Main) (Menu
(Conteudo da página)
esquerdo) direito)
Bloco 4 (Footer)

36. CSS – Tableless, como?
 Desenvolver um layout pensando em blocos facilita na
hora de desenvolver o CSS da página.
 Cada bloco será uma área na página, dessa maneira
cada bloco pode ser representado no HTML como
uma <div>.
 No HTML5 já existem tags para esses blocos.
 Essa organização permite que o código se torne mais
facil de ser manuseado e mais fácil de ser trabalhado.

37. CSS – Tableless, como?
<div id=”tudo”>
<div id=”topo”>
<div id=”imagemtopo”>...</div>
<div id=”menutopo”>...</div>
</div>
<div id=”meio”>
<div id=”menuesquero”>...</div>
<div id=”conteudo”>...</div>
<div id=”menudireito”>...</div>
</div>
<div id=”rodape”>...</div>
</div>

38. CSS – E os problemas?
 O maior problema do CSS é a incompatibilidade dos
navegadores, mas esse pode ser resolvido com os
testes nos navegadores.
 É recomendado que quando se desenvolve um estilo,
ele seja testado nos navegadores IE6, Firefox e Opera
(se póssivel Google Chrome).
 Para evitar futuros problemas é recomendado
tambem desenvolver estilos expansiveis, ou seja
sempre pensando que vai existir mais conteúdo do
que já existe.

39. CSS – E os problemas?
 Outro problema são as dimensões, trabalhar com
porcentagens pode parecer uma boa idéia por ter
assim um estilo que sempre acompanhará o tamanho
da tela, MAS se o conteudo todo não for trabalhado
para esse tipo de redimensionamento, a boa idéia se
torna a pior de todas.
 Nesses cassos é sempre recomendado ter as
dimensões do layout estáticos.
 Sempre pensar no pior caso (1024x768).

40. CSS – Conclusão
 O CSS ao mesmo tempo que pode ser organizado
pode ser totalmente desorganizado.
 Com o CSS é possivel que todas as questões de
aparência sejam tratados sem ter que fazer isso no
documento HTML.
 Uma página estilizada por um CSS organizado, faz
com que seja de rápido acesso, deixando mais usavel
para o usuário e mais legível para o desenvolvedor.