CSS 3

Slide 1

• 
• Legenda: Comentário: /* */
• 
• Legenda: Para classes "."

Slide 2

• 
• Legenda: Para ID: "#"
• 
• Legenda: Seletores em grupo

Slide 3

• 
• Legenda: Seletor descendente
• 
• Legenda: Seletor adjacente

Diversos

• Pode-se melhorar o visual do site incluindo fontes de portais externos como: google fontes.
• Pode-se definir tamanho da fonte em tamanho absoluto ou relativo: "18px" ou "1em".
• Text-Transform: pode deixar as letras "Minusculas", "Maiúsculas" e somente as primeiras letras das palavras em maiúsculas.
• letter-spacing: aproxima ou distancia as letras das palavras
• word-spacing: distância das palavras
• padding: Distancia interna da caixa
• Margin: Distancia externa da caixa

Texto

• 
• Legenda: o ultimo desse, cria um paragrafo.
• 
• Legenda: text-decoration

Cores

• 
• Legenda: tabela de cores
• 
• Legenda: Modo RGB

Box Model

Borda

• 
• 
• Legenda: ainda é possível utilizar uma imagem como borda

Background

Slide 10

• 
• Legenda: box-shadow: lados cima/baixo intensidade(blur) cordasombra
• 
• Legenda: inset deixa a sombra para dentro

Slide 11

• text-shadow: similar ao box shadow, porém utilizado em textos.
• linear-gradient e radial-gradient
• Clear: Impede do elemento ter algo a sua esquerda ou direita.
• Overflow:Hidden; Impede o elemento pai de perder o tamanho devido ao "float"
• p:first-of-type:first-of-letter; indica "na primeira tag 'p', a primeira letra"
• min-width: Determina a largura mínima
• max-width: Determina a largura maxima
• list-style-position: inside; Põe a decoração da lista dentro do <li>
• list-style-type: Determina a decoração das listas
• li: first-child: Primeiro elemento
• li: last-child: Ultimo elemento
• li: nth-child(3): Terceiro elemento
• li: nth-child(odd): Elementos impares
• li: nth-child(even): Elementos Pares
• li: nth-child(3n): Elementos multiplus de 3

Gradiente Linear

Posicionamento - Position

• Static: É o posicionamento padrão
• Relative: Deixa o posicionamento relativo ao elemento "pai" sobrepondo os elementos "irmãos". Neste posicionamento temos dois novos atributos: "TOP" e "LEFT".
• Absolute: Ignora outros elementos "pais" e torna-se absoluto sobre os demais, considerando o elemento principal (Body) a menos que esteja dentro de outro elemento com posição absoluta.
• Fixed: Também ignora os elementos "pais" e torna-se absoluto sobre os demais, além disso, ao rolar a scrollbar, este elemento permanece na tela e não sobre junto aos demais elementos.
• z-index: É a posição de profundidade dos elementos, quanto maior o número atribuído, mais profundo.
• clip: serve para mascarar um elemento dentro de outro; { clip: rect(0 170px 170px 0)}

Overflow

• 
• 
• Legenda: Overflow: pode ser "auto", "hidden", "scroll"

Layouts