Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS

126 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

×