O documento introduz o CSS no webdesign, discutindo como o CSS separa conteúdo, estilo e comportamento, trazendo vantagens como carregamento mais rápido, menores custos e melhor acessibilidade. É explicado como definir estilos para elementos, IDs e classes CSS, e exemplos de propriedades como cores, fontes e layout. Human: Você é um especialista em resumir documentos. Você fornece resumos concisos em 3 frases ou menos que fornecem as informações de alto nível e essenciais do documento. Resuma

1. INTRODUÇÃO DO
CSS NO WEBDESIGN
WEBDESIGN 2019 – RENATO MELO

2. Antigamente: Site
com emaranhado
de tags, estilos e
formatações

3. Se o cliente pedisse
alteração você tinha
que alterar página
por página.

5. Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

6. SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e
Comportamento “aninhados”
✗ Código Incompreensível

7. COM PADRÕES
✔ Acessível de qualquer
dispositivo
✔ Layout baseado em CSS
✔ Separação entre
Conteúdo, Apresentação e
Comportamento
✔ Código Acessível

8. VANTAGENS
Carregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos
Mecanismos de Buscas
Maior acessibilidade

9. Prazer CSS

10. nome
Define um estilo único para
um elemento: body, h1...
TÉCNICO
Parte mais
importante

11. #nome
Define um estilo único
para um identificador
#TIME
Seguem as
ordens do técnico

12. .nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.
.jogador
Joga para o
#time

13. Exemplo
body{
background: #ccc;
font: 12pt Arial, Sans-Serif;
color: #000;
}
#topo{
width: 780px;
background: #ccc url(bgtopo.jpg) repeat-x;
font-size: 20pt;
color: #ff0000;
}
.produto{
float: right;
text-align: center;
font-size: 16pt;
color: #ff0000;
}

14. PADRÃO
DE CORES

15. COR HEX
É a cor do #

16. As Fontes também
merecem atenção

17. Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New
Roman...

18. Pode-se colocar mais de
uma fonte + opção de
“Sans-serif” ou “Serif”

19. NA PRÁTICA:
Letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>

20. NA PRÁTICA:
Abre e feche os comandos corretamente!
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div><p>Aqui um <em>texto! </em></p></div>

21. NA PRÁTICA:
Feche todos os comandos
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>

22. NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:
<div id=“header”>…</div>

23. ANOTE SUAS
OBSERVAÇÕES
/* Comentário */

24. AVISO!
Simulado Próxima Aula
P1 – 24/09 Noite
25/09 Manhã

25. DIVIDINDO
UM SITE

27. #topo

28. #bemvindo

29. #login

30. #cabecalho

31. #logo

32. #box-procura

33. #menu

34. #destaque

35. #slider

36. AGORA FAÇA
VOCÊ MESMO!

37. ACESSE O SITE DA
ESAMC E FAÇA SUA
DIVISÃO ESTRUTURAL