Baixado 28 vezes
Carregado porArthur Emanuel
CSS
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.
Mais conteúdo relacionado
Mais de Arthur Emanuel
CSS
- 1. Arthur Emanuel deO. Carosia
- 2. CSS ◦ CascadingStyle 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 nuncafoi 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 tagscomo <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çõesde 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 regraCSS 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 oselementos <p> terão fonte vermelha e texto centralizado.
- 8. Comentários sãoutilizados 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 CSSpermitem 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 elementospor meio do seu nome. Pode ser aplicado para um elemento apenas ou um grupo de elementos.
- 11. Elementos tambémpodem 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émpodem 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émpodem 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émpodem 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êsmaneiras de inserir uma folha de estilo: ◦ Folha de estilo externa ◦ Folha de estilo interna ◦ Inline
- 16. Para usarestilos 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 folhade 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 folhade 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 HTMLfazendo referência ao arquivo CSS Arquivo CSS
- 20. Faça umapá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: cordo texto Text-Align: alinhamento Text-decoration: “decoração” Text-indent: indentação
- 23. Font-family: nomeda fonte Font-style: estilo da fonte Font-size: tamanho da fonte Font-weight: especifica o peso (negrito) da fonte
- 24. Pode-se utilizarqualquer propriedade CSS com links Links podem ser estilizados diferentemente, dependendo do estado em que estão
- 25. Diferentes marcadoresde lista Utilizar uma imagem como marcador de lista Pode-se também utilizar as demais propriedades CSS
- 26. Bordas Colaras bordas Tamanho da Tabela Alinhamento do texto
- 27. Espaço internoàs bordas Cor da letra e cor de fundo
- 28. Use apá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 HTMLpodem 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: defineas bordas dos elementos HTML Border-Style: Estilo da borda. Pode assumir os valores a seguir:
- 32. Border-Width: Largurada 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: propriedadeque define o espaço ao redor dos elementos. Pode ser definida automaticamente (auto), por um tamanho (pixels) determinado, ou em porcentagem.
- 34. Padding: defineo espaço entre a borda do elemento e o conteúdo do elemento. Pode ser usado um tamanho determinado ou porcentagem.
- 35. Use apá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: especificacomo um elemento é exibido. Visibility: especifica se um elemento deve ser visível ou oculto.
- 37. Elemento debloco ◦ 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: permiteposicionar 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: permiteposicionar 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: permiteposicionar 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: permiteposicionar 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: oselementos podem ser colocados à esquerda ou à direita Clear: Especifica em quais lados de um elemento outros elementos flutuando não são permitidos.
- 43. Alinhamento deelementos de bloco ◦ Pode ser feito com o uso de margens ou flutuações.
- 44. Opacity: nívelde opacidade em um elemento HTML.
- 45. O usode @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 emontar uma página web contendo os seguintes tópicos ◦ Navigation bar ◦ DropDown ◦ Transição ◦ Animação
- 48. Arthur Emanuel deO. Carosia