COMO POSSO USAR?

INCLUSÃO

ENTÃO USO VIA FUMAÇA?

EXTERNAL STYLE

<!-- HTML file -->
<link rel="stylesheet" href="css/style.css">

/* CSS file */
h1 {
    font-size: 24px;
    border: 1px red solid;
}
p {
    padding: 20px 0;
    line-height: 20px;
    color: #fff;
    background-color: blue;
}

E AÍ, O QUE SÃO ESSES CÓDIGOS LOUCOS?

SINTAXE

SELETORES

• ID

• Class

SELETORES

ORDEM DE DECLARAÇÃO

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;

  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

http://i.imgur.com/yjMv7cg.png

http://dontpad.com/pablo/treinamento/css

ESTRUTURA HTML

RESULTADO

TIPOGRAFIA

FONT-PROPERTIES

• font: Declarar todas as propriedades de uma vez

• font-family: Especifica a família da fonte

• font-size: Especifica o tamanho da fonte

• font-style: Especifica o estilo da fonte

• font-weight: Define o quão negrito será a fonte

• @font-face: Utilizar fontes fora do padrão do sistema

TEXT-PROPERTIES

• text-align: Especifica o alinhamento horizontal do texto

• text-transform: Define a capitalização do texto

• text-decoration: Especifica a decoração do texto

• vertical-align: Especifica o alinhamento vertical do texto

• word-spacing: Especifica o espaço entre as palavras

• line-height: Define a altura da linha

UNIDADES DE MEDIDA

• em

• rem

BOX MODEL 

BOX-MODEL

BOX-SIZING: BORDER BOX

PADDING

MARGIN

AND

DISPLAY

• Define a maneira que o elemento será renderizado na página

• display: block

• display: inline

• display: none

BLOCK

INLINE

X

DISPLAY: NONE

• Faz com que o elemento e seu espaço não seja exibido

DISPLAY

VISIBILITY

AND

OVERFLOW

• Especifica quando o conteúdo de um elemento deve ser exibido, cortado ou transborda do elemento

BORDER-PROPERTIES

• Pode ser definido de forma separara ou tudo junto

• Por default, a cor da borda não é exibida pois o border-style é none

• Bordas arredondadas

RESET

CSS RESET

NORMALIZE

X

• Apaga todas as propriedades predefinidas

• Normaliza as propriedades entre os browsers

• Deve criar tudo de novo

• Os browsers possuem propriedades diferentes

POSICIONAMENTO

POSICIONAMENTO

• top, right, bottom e left são propriedades usadas para posicionamento, mas dependem de outra propriedade para funcionar, a position

• position: relative;

• position: absolute;

• position: fixed;

POSITION: STATIC

• Valor padrão de todos os elementos

• Se for passado propriedades de coordenadas, elas não serão respeitadas (top, left....)

• Permanece sempre em seu local original.

POSITION: RELATIVE

• Por padrão é renderizado da mesma forma que static

• Se for passado propriedades de coordenadas, elas serão aceitas (top, left....)

• O seu tamanho é levado em conta na hora de calcular o tamanho do elemento pai, mas não levaria em conta o posicionamento

POSITION: ABSOLUTE

• É obrigatório posicionamento vertical e/ou horizontal

• O elemento é renderizado na posição indicada, mas relativa ao primeiro elemento pai diferente de position static

• Caso não exista um elemento pai diferente de static, será relativo a página

• Seu tamanho não conta para calcular o tamanho do elemento pai

POSITION: FIXED

• É obrigatório posicionamento vertical e/ou horizontal

• O elemento é renderizado na posição indicada e ficará fixo mesmo com rolagem de página

• Seu tamanho não conta para calcular o tamanho do elemento pai

.relative1

.relative2

FLOAT

• Faz o elemento flutuar/deslocar-se em relação ao conteúdo

• Mais usados com left, right e none

CLEAR

• Usado para controlar o comportamento de elementos que se seguem ao float.

• Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado

• Valores mais utilizados são:

.class {
    clear: left;
}

CLEARFIX

• .clearfix é uma classe usada para que um elemento tenha, ele próprio, a propriedade clear, sem que seja usado código extra

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

• Dessa forma, todo elemento que possui elementos flutuantes, deve ter essa classe

Z-INDEX

• CSS usa espaço 3D

• profundidade

• Usado para colocar elementos em camadas, sobrepondo um ao outro

VISUAL

BACKGROUND-PROPERTIES

• background-color

• background-image

• background-position

IMAGE-PROPERTIES

• filter: Aplicar filtros em imagens

• filter: brightness()

• filter: sepia()

• filter: invert()

SHADOW PROPERTIES

SELETOR UNIVERSAL

UNIVERSAL

• Aplica as regras recebidas para todos os elementos da página

PSEUDO-CLASS

PSEUDO-CLASS

• Usado para referenciar o estado ou posição de um elemento em uma coleção

• :hover

• :checked

• :first-child

• :last-child

• :nth-child()

:HOVER

• Altera o elemento ao passar o mouse por cima

:FOCUS

• Altera o elemento ao ganhar foco

• Exemplificando, ao clicar em um campo de texto, o elemento está ganhando foco 

:CHECKED

• Altera o elemento quando ele está marcado

:FIRST-CHILD

• Altera o primeiro filho de um elemento

:LAST-CHILD

• Altera o último filho de um elemento

:NTH-CHILD()

• Altera o índice n de um elemento

• Também pode ser passado expressões aritméticas

PSEUDO-ELEMENT

PSEUDO-ELEMENT

• Permite acessar conteúdo inacessível e a possibilidade de referenciar conteúdo que não existe

• Quero colocar todas as primeiras letras do meu texto igual de jornal

• ::first-letter

• ::after

• ::before

::FIRST-LETTER

• Permite estilizar apenas a primeira letra da primeira palavra de um texto

::BEFORE

• Permite inserir elemento no início de outro elemento

::AFTER

• Insere elemento no final de um elemento

PSEUDOCLASS

PSEUDOELEMENT

X

• Selecionar elementos que são expressados através de classes, ids....

• Selecionar elementos "imaginários" e emular como reais

• Ex: Alterar primeiro ou último elemento

• Ex: Inserir conteúdo antes de um elemento

COMBINATORS

COMBINATORS

• Seletores que possuem a combinação de dois elementos

A ~ B

• Seletor de Irmãos - Sibling

• Seleciona todos os irmãos seguidos de A dentro do pai

A + B

• Seletor de Irmãos Adjacentes - Adjacent Sibling

• Seleciona apenas o irmão seguinte de A dentro do pai

A > B

• Seletor de Filho Direto - Child Selector

• Seleciona apenas o primeiro filho de A

CSS TRANSITION

CSS TRANSITION

• Propriedade autoexplicativa

• Usado para animar o processo de mudança de algum valor CSS

SINTAXE

SUAVIDADE

• linear: velocidade constante na animação

• ease: redução gradual na velocidade da animação

• ease-in: aumento gradual na velocidade da animação

• ease-out: redução gradual no fim da animação

• ease-in-out: aumento gradual, depois redução gradual na velocidade da animação

MAIS EXEMPLOS

a {
    color: blue;
    background-color: red;
    transition: color 1s ease, background-color .8s ease-out;
}

a:hover {
    color: red;
    background-color: blue;
    transition: .5s ease;
}

MAAAAAS......

• Não é suportado pelo nosso grande amigo IE 8 e 9

CSS TRANSFORM

CSS TRANSFORM

• Usado para alterar as propriedades visuais do elemento

• translate();

• rotate();

• skew();

• scale();

• Exemplificando, podemos escalonar, alterar o ângulo, a posição de um elemento, entre outros

TRANSLATE()

• Moverá o elemento no eixo X e Y

• Somente no eixo X

• Somente no eixo Y

• Move o elemento nos dois eixos

• Não leva em conta float, position, margin, etc

ROTATE()

• Rotaciona um elemento em torno do seu ponto de origem

SCALE()

• Modificará as dimensões de um elemento levando em conta seu tamanho original

• Somente no eixo X

• Somente no eixo Y

• Escala no total

• Valor padrão = 1 (100%)

SKEW()

• Modificará os ângulos de um elemento

• Somente no eixo X

• Somente no eixo Y

• Escala no total

UM POUCO MAIS DE TRANSFORM

• Podemos usar todas essas transformações juntas

DICAS E LINKS ÚTEIS

DÚVIDAS???