Minicurso CSS

384 views
291 views

Published on

Minicurso de CSS oferecido aos alunos da FATEC.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
384
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Minicurso CSS

  1. 1. Minicurso CSS Instrutor: Wilker Iceri
  2. 2. O que é CSS? • Folha de estilo em cascata (Cascading Style Sheets) • Define o estilo do conteúdo HTML.
  3. 3. Aonde colocar? • Existem 3 formas de inserir uma folha de estilo na sua página Web: • CSS Inline • CSS Interno • CSS Externo (melhor reutilização das folhas de estilo) Acessar o exemplo
  4. 4. Seletores CSS • Os seletores são padrões utilizados para selecionar os elementos que você deseja estilizar. • Os principais seletores são: • * - seleciona todos os elementos da sua página HTML. • #id - seleciona o elemento cujo com o id especificado. • .class – seleciona todos os elementos com a classe informada. • elemento – seleciona todos os elementos que seja igual o elemento especificado. • Atualmente existem cerca de 40 seletores CSS, incluindo seletores e pseudoseletores CSS1, CSS2 e os novos seletores CSS3.
  5. 5. Seletores CSS Acessar o exemplo
  6. 6. Seletores CSS Compostos • Os seletores compostos são formados por um ou mais seletores CSS. • São utilizados para acessar elementos mais específicos. • São eles: • element1, element2 – aplica o estilo para ambos os elementos separados por vírgula. • element1 element2 – aplica o estilo para todos os elements2 que estejam dentro de element1. • element1 > element2 – aplica o estilo para todos os elements2 que estejam exatamente um nível abaixo do element1. • element1 + element2 – aplica o estilo para todos os elements2 são irmãos de element1. • Você pode usar vários seletores para chegar em um elemento bem específico, como por exemplo: • .topo > .left img.logotipo – aplica o estilo para todas as tags <img> que tenham a classe logotipo e que estejam dentro de um elemento com a classe .left, que seja filho de .topo. Acessar o exemplo
  7. 7. Seletores CSS Compostos Acessar o exemplo
  8. 8. Pseudo Classes • Adiciona efeitos especiais aos seletores. • Complementa os seletores simples e compostos. • Acessa elementos que não acessíveis através da hierarquia. • Os principais são: • :link – seleciona os links não visitados. • :visited – seleciona os links visitados. • :hover – seleciona o elemento quando ele está com o status hover (quando o mouse está em cima do elemento). • :active – seleciona o elemento quando ele está ativo, como por exemplo quando você clica em um elemento e não solta o clique) • :focus – seleciona o elemento quando ele estiver com foco. • :first-child – seleciona o primeiro elemento. • :last-child – seleciona o último elemento. (CSS3)
  9. 9. Pseudo Classes Acessar o exemplo
  10. 10. Medidas • No CSS você pode definir as dimensões dos elementos utilizando as seguintes medidas: • pixel – Exemplo: width: 100px. (A mais utilizada) • pontos – Exemplo: width: 10pt. • centímetros – Exemplo: width: 10cm. • porcentagem – Exemplos: width: 100%. Acessar o exemplo
  11. 11. Dimensões • No CSS você pode definir a largura e altura através das propriedades width e height respectivamente. • Tanto com width quanto com height você pode definir uma largura e altura mínima e máxima. Acessar o exemplo
  12. 12. Margin • A propriedade margin define a distancia de um elemento aos elementos que estão em torno dele. • A margem pode ser definida com uma única propriedade ou com várias, como mostrado nos exemplos abaixo: • margin: 5px 10px 15px 20px; - define a margem do topo, direita, abaixo e esquerda respectivamente (sentido horário). • margin: 5px 10px; - define a margem do topo e abaixo como 5px e a margem da esquerda e direita como 10px; • margin: 5px; - define a margem dos 4 lados como 5px; • margin-top: 5px; - define a margem do topo. • margin-right: 10px; – define a margem da direita. • margin-bottom: 15px; – define a margem de baixo. • margin-left: 20px; – define a margem da esquerda. Acessar o exemplo
  13. 13. Padding • A propriedade padding define a distancia dos elementos que estão dentro de um elemento até a borda. • O padding assim como o margin pode ser definido com uma única propriedade ou com várias, como mostrado nos exemplos abaixo: • padding: 5px 10px 15px 20px; - define o padding do topo, direita, abaixo e esquerda respectivamente (sentido horário). • padding: 5px 10px; - define o padding do topo e abaixo como 5px e o padding da esquerda e direita como 10px. • padding: 5px; - define o padding dos 4 lados como 5px. • padding-top: 5px; - define o padding do topo. • padding-right: 10px; – define o padding da direita. • padding-bottom: 15px; – define o padding de baixo. • padding-left: 20px – define o padding da esquerda. Acessar o exemplo
  14. 14. Posicionamento • Você pode posicionar um elemento na página de 4 formas, são elas: • estática (static) – o elemento é posicionado de acordo com o fluxo normal da página (padrão). • fixo (fixed) – o elemento é posiciona em relação ao browser. • absoluto (absolute) – é posicionado em relação ao primeiro elemento pai que não seja um elemento estático. • relative (relativo) – o elemento é posicionado em relação a si mesmo, com base no ponto superior esquerdo.
  15. 15. Posicionamento - Fixo Acessar o exemplo
  16. 16. Posicionamento - Absoluto Acessar o exemplo
  17. 17. Posicionamento - Relativo Acessar o exemplo
  18. 18. Elementos flutuantes • Os elementos podem flutuar para a esquerda e para a direita. • A propriedade float é muito usada para estruturar um layout. • Os elementos que vem após o elemento flutuante irá se encaixar em volta dele. • Os elementos que vem antes do elemento flutuante não serão afetados. • A propriedade clear pode ser usada no elemento que vem após o elemento flutuante para bloquear o efeito.
  19. 19. Elementos flutuantes Acessar o exemplo
  20. 20. Tableless Acessar o exemplo
  21. 21. Display • Lembram dos elementos em bloco e dos elementos em linha? • A propriedade display altera a forma de como o elemento se comporta. • Com o display por exemplo podemos tornar uma <div> inline e um <span> em um elemento em bloco. Acessar o exemplo
  22. 22. Bordas • Podemos definir bordas para os elementos utilizando a propriedade border. • Podemos definir bordas de diferentes estilos, como solida, tracejada, etc. • Sintaxe da propriedade border: tamanho estilo cor. Ex: border: 1px solid red; Acessar o exemplo
  23. 23. Fontes • Com o CSS podemos definir o tamanho, família, estilo e a grossura da fonte com as seguintes propriedades: • font-size – define o tamanho da fonte. Ex: font-size: 13px; • font-family – define as fontes. Ex: font-family: Verdana, ‘Time news roman’, sans-serif; • font-style – define o estilo da fonte. Ex: font-style: italic. • font-weight – define a grossura da fonte. Ex: font-weight: 600; • Podemos definir todos os estilos em uma única propriedade (font): • font: style weight size family. Acessar o exemplo
  24. 24. Background • Com o CSS nós podemos definir cores e imagens para nossos fundos. • Podemos repetir uma imagem horizontalmente ou verticalmente para que ela preencha todo o fundo. • Podemos também definir a posição da imagem no fundo do elemento. • Exemplos: • background-color: #ddd; - define um cinza como cor de fundo. • background-image: url(img/css.png) – define a imagem localizada em img/css.png como fundo. • background-repeat: no-repeat – diz ao browser que a imagem não irá se repetir para preencher todo o espaço disponível. • background-position: 0px 0px; - define a posição da imagem como sendo no topo esquerdo. • background: #ddd url(img/css.png) no-repeat 0px 0px; - igual as definições acima, porém utilizando somente uma propriedade (background). Acessar o exemplo
  25. 25. Background
  26. 26. • Novos seletores • Box model • Backgrounds e Bordas • Efeitos de texto • Transformações 2D/3D • Animações • Layout de Múltiplas Colunas • Interface do usuário
  27. 27. Bordas arredondadas • Antes as bordas arredondadas eram feitam com a utilização de imagens. • Com o CSS3 basta utilizarmos a propriedade border-radius. • Exemplo: • border-radius: 3px; Acessar o exemplo
  28. 28. Sombras • Com o CSS3 podemos definir sombras para nossos elementos utilizando a propriedade box-shadow. • sintaxe: • box-shadow: horizontal vertical blur spread color inset; Acessar o exemplo
  29. 29. Sombras em textos • Assim como fizemos para os elementos, podemos definir sombras também para os textos com o uso da propriedade text-shadow. • sintaxe: • text-shadow: horizontal vertical blur color; Acessar o exemplo
  30. 30. Projeto Final • Façam a estilização do projeto final que nós começamos a fazer no mini curso de HTML. Bom trabalho!

×