Aplicativos para Internet Aula 04

1. Aplicativos para InternetAula 04 CSS, div e span Prof. Danielle Martin Universidade de Mogi das Cruzes

2. O que é CSS? • CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem para estilos que define a formatação de páginas HTML. • Enquanto o HTML serve para demarcar o conteúdo de uma página web, o CSS controla a apresentação desse conteúdo. • Ex. formatar cores, planos de fundo, fontes, disposição, alinhamento, bordas de elementos do HTML

3. Vantagens do CSS • Centralização do layout de várias páginas de uma aplicação em uma de uma única folha de estilo; • Maior precisão no controle do layout; • Aplicação de diferentes layouts para diferentes mídias; • Otimiza manutenção de códigos fontes do front end (separação de responsabilidades).

4. Web standards • Seguindo os padrões de desenvolvimento web do W3C, deve-se separar as responsabilidades do HTML e CSS, ou seja, utilizar apenas o CSS para apresentação, eliminando qualquer formatação de conteúdo do HTML.

5. Web standards

6. Inserindo CSS em um documento HTML • Existem 3 maneiras de se injetar CSS em um documento HTML: • CSS inline • CSS incorporado • CSS externo

7. CSS inline • É vinculado diretamente ao elemento que será formatado, através do atributo style de qualquer tag HTML. O estilo será usado apenas uma vez.

8. CSS incorporado • É incorporado ao documento HTML dentro da tag <style>, inserida no cabeçalho da página (head) • O CSS incorporado não permite reutilização entre diferentes páginas.

9. CSS externo • O CSS é definido em um arquivo externo • O arquivo é referenciado no cabeçalho de uma ou mais páginas com a tag <link> • O estilo é aplicado em todas as páginas com a referência do arquivo .css.

10. Prioridade de CSS • Caso mais de um CSS seja utilizado em uma página e haja conflito de estilos, a seguinte ordem de prioridade será adotada: Menor prioridade Maior prioridade

11. Sintaxe CSS

12. Seletores • Um seletor CSS é um padrão criado para ser aplicado ao elemento(s) desejado(s) no HTML. • Iremos utilizar os seguintes seletores: • Para todos os elementos (seletor universal) • Para um elemento específico (seletor tipo) • Para um grupo de elementos (seletores agrupados) • Para uma classe (seletor de classe) • Para um ID (seletor de id)

13. Para todos os elementos

14. Para todos os elementos

15. Para um elemento especifico

16. Para um elemento especifico

17. Para um grupo de elementos

18. Para um grupo de elementos

19. Seletor de Classe

20. Seletor de Classe

21. Seletor de Classe

22. Seletor ID

23. Seletor ID

24. Span e DIV • Span e DIV são tags HTML sem valor semântico, ou seja, não acrescentam nenhum significado ao seu conteúdo. • Por padrão, não alteram em nada a apresentação do seu conteúdo. • Seu propósito é essencialmente permitir agrupar conteúdo da pagina em blocos para formatação com CSS. • A tag span pode ser usada dentro de parágrafos para formatar trechos de texto (por exemplo: formatar citações) • A tag div formata blocos com qualquer conteúdo (por exemplo: caixa de diálogo, caixas de conteúdo dentro da pagina, barras laterais)

25. Exemplo span e div span.erro { color: #f00; font-weight: bold; } span.sucesso { color: #0a0; font-weight: bold; } span.aviso { color: #da5; font-weight: bold; } div.erro { background: url('icon_error.png') 10px no-repeat #fee; border: 2px dotted #f00; margin: 10px; padding: 10px 10px 10px 50px; } div.sucesso { background: url('icon_success.png') 10px no-repeat #efe; border: 2px dotted #0a0; margin: 10px; padding: 10px 10px 10px 50px; } div.aviso { background: url('icon_warning.png') 10px no-repeat #ffd; border: 2px dotted #da5; margin: 10px; padding: 10px 10px 10px 50px; } <h1>SPAN</h1> <p><span class="erro">ERRO:</span> Houve um erro no carregamento da pagina. Por favor, tente novamente.</p> <p><span class="sucesso">SUCESSO:</span> Os dados foram carregados corretamente.</p> <p><span class="aviso">AVISO:</span> Cuidado, seus dados somente serao salvos apos clicar em Salvar.</p> <h1>DIV</h1> <div class="erro"><p><span class="erro">ERRO:</span> Houve um erro no carregamento da pagina. Por favor, tente novamente.</p></div> <div class="sucesso"><p><span class="sucesso">SUCESSO:</span> Os dados foram carregados corretamente.</p></div> <div class="aviso"><p><span class="aviso">AVISO:</span> Cuidado, seus dados somente serao salvos apos clicar em Salvar.</p></div>

26. Exemplo span e div <h1>SPAN</h1> <p><span class="erro">ERRO:</span> Houve um erro no carregamento da pagina. Por favor, tente novamente.</p> <p><span class="sucesso">SUCESSO:</span> Os dados foram carregados corretamente.</p> <p><span class="aviso">AVISO:</span> Cuidado, seus dados somente serao salvos apos clicar em Salvar.</p> <h1>DIV</h1> <div class="erro"><p><span class="erro">ERRO:</span> Houve um erro no carregamento da pagina. Por favor, tente novamente.</p></div> <div class="sucesso"><p><span class="sucesso">SUCESSO:</span> Os dados foram carregados corretamente.</p></div> <div class="aviso"><p><span class="aviso">AVISO:</span> Cuidado, seus dados somente serao salvos apos clicar em Salvar.</p></div>

27. Propriedades CSS para Formatar Texto

28. Propriedades CSS para Formatar Parágrafos • Os comandos para parágrafos só funcionam nas tags que limitam parágrafos <p>.

29. Propriedades CSS para formatar Backgrounds

30. Propriedades CSS para formatar Bordas

31. Exercício • Replique o conteúdo da seguinte página de tabela de preços. • Formate a página com CSS externo. • Obs: o link na palavra “Assine!” deve redirecionar para a página registrar.html