Minicurso de CSS oferecido aos alunos da FATEC.

1. Minicurso CSS
Instrutor: Wilker Iceri

2. O que é CSS?
• Folha de estilo em cascata (Cascading Style Sheets)
• Define o estilo do conteúdo HTML.

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. 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 pseudo-
seletores CSS1, CSS2 e os novos seletores CSS3.

5. Seletores CSS
Acessar o exemplo

6. Seletores CSS Compostos
Acessar o exemplo
• 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.

7. Seletores CSS Compostos
Acessar o exemplo

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. Pseudo Classes
Acessar o exemplo

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. 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. 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. 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. 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. Posicionamento - Fixo
Acessar o exemplo

16. Posicionamento - Absoluto
Acessar o exemplo

17. Posicionamento - Relativo
Acessar o exemplo

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. Elementos flutuantes
Acessar o exemplo

20. Tableless
Acessar o exemplo

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. 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. 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. 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. Background

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. 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. 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. 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. Projeto Final
• Façam a estilização do projeto final que nós começamos a fazer no mini curso de HTML.
Bom trabalho!