CSS

1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
CSS e JavaScript
andre.costa@pro.unifacs.br

2. CSS
• CSS - Cascading Style Sheets
• É uma linguagem de estilo utilizada para
definir a apresentação de documentos
escritos em uma linguagem de marcação,
como HTML ou XML. Seu principal benefício
é prover a separação entre o formato e o
conteúdo de um documento.

3. CSS
• “Folha de estilo em cascata é um
mecanismo simples para adicionar estilos
(p.ex., fontes, cores, espaçamentos) aos
documentos Web.”
Maujor (o dinossauro da CSS)
http://www.maujor.com/

4. CSS
• Tipos de CSS
• Linkadas ou Importadas
• Incorporadas
• Inline

5. CSS
• Linkadas ou Importadas

6. CSS
• Linkadas ou Importadas

7. CSS
• Incorporadas

8. CSS
• Inline

9. CSS
• Exemplo

10. CSS
• Sintaxe
seletor { propriedade: valor; }
seletor_2
{
propriedade_1: valor;
propriedade_2: valor;
}

11. CSS
• Seletores (principais)
tag {}
• Ex.:
table
{
background-color: #cdcdcd;
text-align: center;
}

12. CSS
• Seletores (principais)
#id {}
• Ex.:
#id_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table id=“id_tabela”></table>

13. CSS
• Seletores (principais)
.classe {}
• Ex.:
.classe_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table class=“classe_tabela”></table>

14. CSS
• Seletores (principais)
tag_pai tag_filho {}
• Ex.:
table tr td { color: #FF0000; }
• <table>
<tr>
<td>Texto modificado</td>
</tr>
<tr>
<td>Texto modificado</td>
</tr>
</table>

15. CSS
• Seletores (principais)
tag_pai tag_filho.classe {}
• Ex.:
table tr td.textoVermelho { color: #FF0000; }
• <table>
<tr>
<td>Texto</td>
</tr>
<tr>
<td class=“textoVermelho”>Texto modificado</td>
</tr>
</table>

16. CSS
• Propriedades
• Font

17. CSS
• Propriedades
• Text

18. CSS
• Propriedades
• Margin

19. CSS
• Propriedades
• Border

20. CSS
• Propriedades
• Padding

21. CSS
• Propriedades
• Background

22. CSS
• Propriedades
• List

23. CSS
Mão na massa!
Crie uma folha de es/lo para o layout criado
com HTML.

24. CSS
Mão na massa!
Pra/que!! Agora que tem o conhecimento de
HTML e CSS, desenvola o seu próprio site.