1 / 32

Aplicativos para Internet Aula 04

Aplicativos para Internet Aula 04. CSS, div e span Prof. Danielle Martin Universidade de Mogi das Cruzes. 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.

orsin
Download Presentation

Aplicativos para Internet Aula 04

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related