CSS
Transferir como PPTX, PDF0 gostou416 visualizações
O documento descreve as principais propriedades e conceitos de CSS, incluindo: 1) CSS é usado para definir a formatação e estilo de elementos HTML; 2) CSS permite separar a estrutura do conteúdo da página da sua apresentação visual; 3) As regras CSS são compostas por seletores e declarações que definem os estilos dos elementos selecionados.
CSS
- 1. Arthur Emanuel de O. Carosia
- 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. 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. 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. 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. 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. Todos os elementos <p> terão fonte vermelha e texto centralizado.
- 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. 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. Seleciona elementos por meio do seu nome. Pode ser aplicado para um elemento apenas ou um grupo de elementos.
- 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. 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. 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. 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. Há três maneiras de inserir uma folha de estilo: ◦ Folha de estilo externa ◦ Folha de estilo interna ◦ Inline
- 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. 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. 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. Arquivo HTML fazendo referência ao arquivo CSS Arquivo CSS
- 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. 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. Color: cor do texto Text-Align: alinhamento Text-decoration: “decoração” Text-indent: indentação
- 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. Pode-se utilizar qualquer propriedade CSS com links Links podem ser estilizados diferentemente, dependendo do estado em que estão
- 25. Diferentes marcadores de lista Utilizar uma imagem como marcador de lista Pode-se também utilizar as demais propriedades CSS
- 26. Bordas Colar as bordas Tamanho da Tabela Alinhamento do texto
- 27. Espaço interno às bordas Cor da letra e cor de fundo
- 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. 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
- 31. Border: define as bordas dos elementos HTML Border-Style: Estilo da borda. Pode assumir os valores a seguir:
- 32. 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
- 33. Margin: propriedade que define o espaço ao redor dos elementos. Pode ser definida automaticamente (auto), por um tamanho (pixels) determinado, ou em porcentagem.
- 34. Padding: define o espaço entre a borda do elemento e o conteúdo do elemento. Pode ser usado um tamanho determinado ou porcentagem.
- 35. 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.
- 36. Display: especifica como um elemento é exibido. Visibility: especifica se um elemento deve ser visível ou oculto.
- 37. 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>
- 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. 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. 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. 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”
- 42. 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.
- 43. Alinhamento de elementos de bloco ◦ Pode ser feito com o uso de margens ou flutuações.
- 44. Opacity: nível de opacidade em um elemento HTML.
- 45. 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.
- 47. Pesquisar e montar uma página web contendo os seguintes tópicos ◦ Navigation bar ◦ DropDown ◦ Transição ◦ Animação
- 48. Arthur Emanuel de O. Carosia