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 cascading style sheet

444 views

Published on

Apresentação de CSS criada para ministrar em uma aula para crianças e adolescentes entre 8 e 18 anos.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Css cascading style sheet

  1. 1. CSSCascading Style Sheet
  2. 2. CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata
  3. 3. é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet
  4. 4. O que eu posso fazer com CSS?
  5. 5. Sendo uma linguagem para estilos que define o layout de documentos HTML, é possível com CSS controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamento e muito mais.
  6. 6. Qual é a diferença entre CSS e HTML?
  7. 7. HTML é usado para estruturar conteúdos.
  8. 8. CSS é usado para formatar conteúdos estruturados.
  9. 9. Por que o CSS foi criado?
  10. 10. Com a evolução dos recursos de programação as páginas da internet estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a função de estruturar o conteúdo quanto de estiliza-lo.
  11. 11. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas.
  12. 12. A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout.
  13. 13. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, bem como permitindo que as mesmas marcações de uma página sejam apresentadas em diferentes estilos
  14. 14. Como funciona CSS?
  15. 15. A regra CSS e sua sintaxe Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha de Estilos.
  16. 16. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo: seletor { propriedade: valor; }
  17. 17. seletor { propriedade: valor; } genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...). é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
  18. 18. Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.
  19. 19. No entanto é de boa técnica usar- se sempre o ponto-e-vírgula após cada regra para uma propriedade.
  20. 20. Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor —, como mostrado a seguir.
  21. 21. Agrupamento de Seletores Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.
  22. 22. Inserindo CSS Existe 3 métodos que podemos usar para inserir estilos CSS em uma página.
  23. 23. Método 1: Atributo style Utilizando o atributo style, podemos aplicar estilos a um elemento específico. Exemplo: Este é o método que deve ser menos utilizado, pois mistura o código CSS com o HTML e dificulta a manutenção do site e por ir contra a divisão de um página em camadas.
  24. 24. Método 2: TAG style Com este método, aplicamos estilos apenas na página onde o elemento está inserido. Para isso, utiliza-se a tag style. Exemplo: Todos os elementos style devem ficar dentro do elemento head de uma página. Os estilos em uma tag style tem precedência sobre os estilos em um arquivo externo.
  25. 25. Método 3: Arquivo externo CSS Este é o método que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas páginas desejarmos, desta forma deixando a manutenção de um site muito mais fácil (apenas um arquivo CSS pode controlar o visual de um site inteiro). Para este método, utilizamos o elemento link, da seguinte forma:
  26. 26. A tag link é uma tag que auto-fecha, assim como br e meta. O atributo href indica o endereço do arquivo CSS (hiper-referência), neste exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relação deste "link" com a página, aqui sendo stylesheet ou folha de estilos. Se estivéssemos utilizando a sintaxe XHTML, também é necessário o atributo type com o valor text/css.
  27. 27. Classes e IDs Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags.
  28. 28. Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página.
  29. 29. Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento).
  30. 30. Ao escolher nomes para classes não use nomes que lembrem a apresentação. Prefira nomes que lembrem a estrutura. Para o exemplo mostrado nomear as classes .cor-preta e .cor-azul é uma péssima escolha. Se no futuro você resolver alterar a cor dos elementos azuis para verde vai ficar com uma regra CSS sem sentido.
  31. 31. Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. O comentário introduzido no código, será ignorado pelo navegador. Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo:
  32. 32. Divs e Spans Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id.
  33. 33. Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. O elemento div é um container nível de bloco e span é um elemento inline. Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span com o propósito de fornecer uma referência para estilização por CSS ou captura por um script.
  34. 34. O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.
  35. 35. Enquanto <span> é usado dentro de um elemento nível de bloco, <div> é usado para agrupar um ou mais elementos nível de bloco.
  36. 36. Conclusão Como tudo na vida, aprender bem HTML e CSS vem de prática, ou seja, quanto mais praticar, melhor você vai ficando e ganhando conhecimentos sobre as linguagens. Há vários sites e tutoriais que podem auxiliar e te ajudar com exemplos e dicas, tudo depende de você. Então agora é mãos na massa e praticar! =)
  37. 37. Bibliografia e referências Tecmundo - O que é CSS? HTML.net - Tutorial CSS Maujor - A regra CSS e sua sintaxe, Div Mania HTML e CSS na prática - Inserindo CSS, Sintaxe e Seletores CSS

×