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.

Minicurso CSS

458 views

Published on

Minicurso de CSS oferecido aos alunos da FATEC.

Published in: Technology
  • Be the first to comment

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!

×