Successfully reported this slideshow.

CSS

109 views

Published on

CSS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS

  1. 1. Arthur Emanuel de O. Carosia
  2. 2.  CSS ◦ Cascading Style Sheets ◦ Folhas de Estilo em Cascata  CSS define como elementos HTML devem ser exibidos  Adicionados ao HTML 4.0  Folhas de Estilo externas são armazenados em arquivos CSS
  3. 3.  HTML nunca foi destinado a conter tags para a formatação de um documento.  HTML destinava-se a definir o conteúdo de um documento, como: ◦ <h1> Este é um cabeçalho </ h1> ◦ <p> Este é um parágrafo. </ p>
  4. 4.  Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um problema para os desenvolvedores web. ◦ Desenvolvimento de grandes web sites, onde informações de fontes e cor foram adicionadas a cada página individual, tornou-se um processo longo e custoso.  Para resolver este problema, o World Wide Web Consortium (W3C) criou o CSS.  Em HTML 4.0 e 5.0, toda a formatação pode ser removido do documento HTML, e armazenado em um arquivo CSS separado.
  5. 5.  As definições de estilo são normalmente guardados em arquivos .css externos.  Com um arquivo de folha de estilo externa, é possível alterar a aparência de um site inteiro, alterando apenas um arquivo.
  6. 6.  Uma regra CSS consiste de um seletor e um bloco de declaração.  O seletor indica o elemento HTML que você quer aplicar o estilo.  O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.  Cada declaração inclui um nome de propriedade e um valor, separados por dois pontos.
  7. 7.  Todos os elementos <p> terão fonte vermelha e texto centralizado.
  8. 8.  Comentários são utilizados para explicar o código e são ignorados pelos navegadores.  Comentários em CSS são feitos com o uso de /* e */ e podem aparecer tanto em uma como em várias linhas.
  9. 9.  Seletores CSS permitem selecionar e manipular elementos HTML.  Seletores CSS são usados para encontrar elementos HTML com base em seu id, classe, tipo, atributo, etc.
  10. 10.  Seleciona elementos por meio do seu nome.  Pode ser aplicado para um elemento apenas ou um grupo de elementos.
  11. 11.  Elementos também podem ser selecionados com base no seu id  O id deve ser único para um elemento dentro da página <p id="para1">Hello World!</p>
  12. 12.  Elementos também podem ser selecionados com base na sua classe.  A classe pode ser aplicada a mais de um elemento dentro da mesma página. <h1 class="center">Cabeçalho vermelho e centralizado.</h1> <p class="center">Parágrafo Vermelho e Centralizado.</p>
  13. 13.  Elementos também podem ser selecionados com base na sua classe.  A classe pode ser aplicada a mais de um elemento dentro da mesma página. <h1 class="center">Cabeçalho vermelho e centralizado.</h1> <p class="center">Parágrafo Vermelho e Centralizado.</p> Se aplica a todos elementos com class center
  14. 14.  Elementos também podem ser selecionados com base na sua classe.  A classe pode ser aplicada a mais de um elemento dentro da mesma página. <h1 class="center">Cabeçalho vermelho e centralizado.</h1> <p class="center">Parágrafo Vermelho e Centralizado.</p> Se aplica somente à tag <p> com class center
  15. 15.  Há três maneiras de inserir uma folha de estilo: ◦ Folha de estilo externa ◦ Folha de estilo interna ◦ Inline
  16. 16.  Para usar estilos inline, adicione o atributo style para a marca relevante.  Não é recomendado utilizar estilos inline.  Exemplo <h1 style = "color: blue; margin-left: 30px;"> Cabeçalho </ h1>.
  17. 17.  Uma folha de estilo interna deve ser usada quando um único documento tem um estilo único.  Define-se estilos internos na seção <head> de uma página HTML, dentro da tag <style>.
  18. 18.  Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas.  Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro, alterando apenas um arquivo.  O arquivo de folha de estilo deve ser salvo com a extensão .css.
  19. 19.  Arquivo HTML fazendo referência ao arquivo CSS  Arquivo CSS
  20. 20.  Faça uma página principal de um portal de notícias esportivas que possua um arquivo css externo definindo o seu estilo.  A página deve possuir as seguintes seções: ◦ Cabeçalho:  título do portal com sua imagem  barra de links de navegação entre categorias de notícias (futebol, basquete, volei, etc.), ◦ Seção de notícias  Três notícias resumidas com suas respectivas imagens, links para notícias completas e vídeos relacionados ◦ Rodapé  Dados para contato do portal
  21. 21.  Background-image  Background-Color  background-position: ◦ Define a posição inicial de uma imagem de fundo  background-repeat ◦ Define como uma imagem de fundo será repetido
  22. 22.  Color: cor do texto  Text-Align: alinhamento  Text-decoration: “decoração”  Text-indent: indentação
  23. 23.  Font-family: nome da fonte  Font-style: estilo da fonte  Font-size: tamanho da fonte  Font-weight: especifica o peso (negrito) da fonte
  24. 24.  Pode-se utilizar qualquer propriedade CSS com links  Links podem ser estilizados diferentemente, dependendo do estado em que estão
  25. 25.  Diferentes marcadores de lista  Utilizar uma imagem como marcador de lista  Pode-se também utilizar as demais propriedades CSS
  26. 26.  Bordas  Colar as bordas  Tamanho da Tabela  Alinhamento do texto
  27. 27.  Espaço interno às bordas  Cor da letra e cor de fundo
  28. 28.  Use a página de notícias criada no exercício anterior e faça as seguintes alterações no arquivo CSS: ◦ Use fonte Arial de tamanho 15px e cor preta para as notícias ◦ Use uma imagem de fundo no cabeçalho ◦ Adicione diferentes efeitos aos eventos em cada um dos links ◦ Faça da barra de links uma lista não-ordenada e formate essa barra no arquivo CSS ◦ Insira uma tabela no texto contendo os resultados dos últimos jogos de futebol e formate essa tabela no arquivo CSS
  29. 29.  Todos elementos HTML podem ser considerados “caixas”.  Conteúdo - O conteúdo da caixa, em que o texto e as imagens aparecem  Padding - Área em torno do conteúdo.  Border – O limite em torno do conteúdo  Margin - Área fora dos limites
  30. 30.  Border: define as bordas dos elementos HTML  Border-Style: Estilo da borda. Pode assumir os valores a seguir:
  31. 31.  Border-Width: Largura da Borda. Determinada em pixels ou medidas thin, medium, ou thick  Border-Color: Cor da Borda. Pode ser determinada pelo nome da cor, valor em RGB ou Hexadecimal
  32. 32.  Margin: propriedade que define o espaço ao redor dos elementos. Pode ser definida automaticamente (auto), por um tamanho (pixels) determinado, ou em porcentagem.
  33. 33.  Padding: define o espaço entre a borda do elemento e o conteúdo do elemento. Pode ser usado um tamanho determinado ou porcentagem.
  34. 34.  Use a página de notícias criada no exercício anterior e faça as seguintes alterações no arquivo CSS: ◦ Insira bordas diferenciadas em cada uma das notícias e também em cada seção da página. ◦ Adicione margens e use a propriedade padding em cada uma das notícias e no cabeçalho.
  35. 35.  Display: especifica como um elemento é exibido.  Visibility: especifica se um elemento deve ser visível ou oculto.
  36. 36.  Elemento de bloco ◦ ocupa toda a largura disponível e tem uma quebra de linha antes e depois dele. ◦ <h1> ◦ <p> ◦ <li> ◦ <div>  Elemento inline ◦ ocupa apenas o máximo de largura, se necessário, e não força quebras de linha. ◦ <span> ◦ <a>
  37. 37.  Positioning: permite posicionar um elemento na página. Usa top, bottom, left, right. ◦ Fixo: posiciona o elemento relativo à janela do navegador ◦ Relativo: posiciona o elemento relativo à sua posição normal ◦ Absoluto: posiciona o elemento relativamente ao seu elemento “pai”
  38. 38.  Positioning: permite posicionar um elemento na página. Usa top, bottom, left, right. ◦ Fixo: posiciona o elemento relativo à janela do navegador ◦ Relativo: posiciona o elemento relativo à sua posição normal ◦ Absoluto: posiciona o elemento relativamente ao seu elemento “pai”
  39. 39.  Positioning: permite posicionar um elemento na página. Usa top, bottom, left, right. ◦ Fixo: posiciona o elemento relativo à janela do navegador ◦ Relativo: posiciona o elemento relativo à sua posição normal ◦ Absoluto: posiciona o elemento relativamente ao seu elemento “pai”
  40. 40.  Positioning: permite posicionar um elemento na página. Usa top, bottom, left, right. ◦ Fixo: posiciona o elemento relativo à janela do navegador ◦ Relativo: posiciona o elemento relativo à sua posição normal ◦ Absoluto: posiciona o elemento relativamente ao seu elemento “pai”
  41. 41.  Float: os elementos podem ser colocados à esquerda ou à direita  Clear: Especifica em quais lados de um elemento outros elementos flutuando não são permitidos.
  42. 42.  Alinhamento de elementos de bloco ◦ Pode ser feito com o uso de margens ou flutuações.
  43. 43.  Opacity: nível de opacidade em um elemento HTML.
  44. 44.  O uso de @media torna possível definir diferentes estilos para diferentes tipos de mídia na mesma folha de estilo  Handheld: ◦ usado para dispositivos pequenos ou portáteis  Print: ◦ usado para impressoras  Projection: ◦ usado para apresentações projetadas, como slides  Screen: ◦ usada para telas de computador  Tty: ◦ Usado para mídia usando uma grade de caracteres de passo fixo, como teletypes e terminais  Tv:  usado para dispositivos tipo televisão.
  45. 45.  Pesquisar e montar uma página web contendo os seguintes tópicos ◦ Navigation bar ◦ DropDown ◦ Transição ◦ Animação
  46. 46. Arthur Emanuel de O. Carosia

×