Horário de aula

Tutorial básico CSS

• Tutorial de CSS
• Introdução ao CSS
• Sintaxe do CSS
• Seletor do CSS
• Uso do CSS
• Comentários do CSS
• Cores do CSS
• Cores RGB do CSS
• Cores HEX do CSS
• Cores HSL do CSS
• Fundo do CSS
• Imagem de Fundo do CSS
• Repetição de Fundo do CSS
• Atrito de Fundo do CSS
• Propriedade de Fundo Abreviada do CSS
• Borda do CSS
• Largura da Borda do CSS
• Cor da Borda do CSS
• Borda de Todos os Lados do CSS
• Propriedade de Borda Abreviada do CSS
• Borda Arredondada do CSS
• Margem do CSS
• Fusão de Margem do CSS
• Preenchimento do CSS
• Altura/Largura CSS
• Modelo de Caixa do CSS
• Contorno do CSS
• Largura do Contorno do CSS
• Cor do Contorno do CSS
• Propriedade de Contorno Abreviada do CSS
• Deslocamento do Contorno do CSS
• Texto do CSS
• Alinhamento do Texto do CSS
• Decoração do Texto do CSS
• Transformação do Texto do CSS
• Espaçamento do Texto do CSS
• Sombra do Texto do CSS
• Fonte do CSS
• Estilo da Fonte do CSS
• Tamanho da Fonte do CSS
• Fonte do Google do CSS
• Propriedade de Fonte Abreviada do CSS
• Ícone do CSS
• Link do CSS
• Lista do CSS
• Tabela do CSS

Tutorial intermediário CSS

• Display CSS
• max-width CSS
• Posicionamento CSS
• z-index CSS
• Transbordamento CSS
• Flutuamento CSS
• Remoção de flutuamento CSS
• Exemplo de Flutuante do CSS
• inline-block CSS
• Alinhamento CSS
• Combinador CSS
• Pseudo-classe do CSS
• Pseudo-elemento do CSS
• Opacidade do CSS
• Barra de Navegação do CSS
• Barra de Navegação Vertical do CSS
• Barra de Navegação Horizontal do CSS
• Menu Suspensível do CSS
• Biblioteca de Imagens do CSS
• Sprite de Imagem do CSS
• Seletor de Propriedade do CSS
• Formulário do CSS
• Contador do CSS
• Layout do Site do CSS
• Unidade do CSS
• Especificidade do CSS
• CSS !important
• Função Matemática do CSS

Tutorial avançado CSS3

• Cantos Arredondados do CSS
• Imagem da Borda do CSS
• Fundo do CSS
• Cores do CSS
• Palavra-Chave de Cor do CSS
• Gradiente do CSS
• Gradiente Radial do CSS
• Sombra do CSS
• box-shadow do CSS
• Efeito de Texto do CSS
• Fonte de rede CSS
• Transformações 2D CSS
• Transformações 3D CSS
• Transições CSS
• Animações CSS
• Dicas de ferramenta CSS
• Estilo de imagem CSS
• Propriedade object-fit CSS
• object-position CSS
• Máscara CSS
• Botão CSS
• Páginação CSS
• Colunas CSS
• Interface do usuário CSS
• Variáveis CSS
• Variáveis cobertas CSS
• Variáveis CSS - JavaScript
• Variáveis CSS - consultas de mídia
• CSS @property
• Box Sizing CSS
• Flexbox CSS
• Consultas de mídia CSS
• Exemplo de consulta de mídia CSS

Design responsivo CSS

• Introdução RWD
• Porta RWD
• Visão de grade RWD
• Consultas de mídia RWD
• Imagens RWD
• Vídeos RWD

Tutorial de grade CSS

• Módulo de layout de grade CSS
• Container de grade CSS
• Item de grade CSS

Exemplo CSS

• Exemplo CSS

Teste CSS

• Teste CSS

Manual de referência CSS

• Manual de referência CSS
• Suporte do navegador CSS
• Seletor do CSS
• Função CSS
• Unidade do CSS
• Auditivo CSS
• Fonte de segurança de rede CSS
• Animação CSS
• Unidade do CSS
• Cores do CSS
• Valor de cor CSS
• Valor padrão CSS
• Entidade CSS

Cursos optativos

Recomendação de curso:

• Bauhaus CodeW3C.com

Substituir variável global com variável local

Da página anterior, aprendemos que podemos acessar/usar variáveis globais em todo o documento, enquanto as variáveis locais podem ser usadas apenas no seletor onde foram declaradas.

Veja o exemplo na página anterior:

Exemplo

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Experimente você mesmo

À vezes, queremos que a variável seja alterada apenas em partes específicas da página.

Suponhamos que queremos que o elemento button use uma cor azul diferente. Então, podemos redeclarar a variável --blue dentro do seletor button. Quando usarmos var(--blue) neste seletor, ele usará o valor da variável --blue local declarada aqui.

Vemos que a variável local --blue cobre a variável global --blue do elemento button:

Exemplo

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Experimente você mesmo

Adicionar uma nova variável local

Se usarmos uma variável apenas em um lugar, também podemos declarar uma nova variável local, assim:

Exemplo

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px sólido var(--button-blue);
  padding: 5px;
}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Função var() CSS

Caixa de ferramentas

Manual de referência CSS

Exemplo CSS

Teste CSS

Livro de exames CSS

Link de patrocinador