Css
- 1. CSS Desenvolvimento de Aplicações para Web Prof. MSc. André Costa - andre.costa@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
- 8. CSS • Inline
- 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>
- 23. CSS Mão na massa! Crie uma folha de estilo para o layout criado com HTML.
- 25. Prof. MSc. André Costa andre.costa@unifacs.br