Horário de aula

Tutorial básico do CSS

• Tutorial de CSS
• Introdução ao CSS
• Sintaxe do CSS
• Seletor do CSS
• Uso do CSS
• Comentário do CSS
• Cor do CSS
• Cor RGB do CSS
• Cor HEX do CSS
• Cor HSL do CSS
• Fundo do CSS
• Imagem de Fundo do CSS
• Repetição do Fundo do CSS
• Atrito do Fundo do CSS
• Atributo Abreviado de Fundo do CSS
• Borda do CSS
• Largura da Borda do CSS
• Cor da Borda do CSS
• Borda de Cada Lado do CSS
• Atributo Abreviado da Borda do CSS
• Borda Arredondada do CSS
• Margem do CSS
• Merging da Margem do CSS
• Preenchimento Interno do CSS
• Altura/Largura CSS
• Modelo de Caixa do CSS
• Contorno do CSS
• Largura do Contorno do CSS
• Cor do Contorno do CSS
• Atributo Abreviado do Contorno 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 de Letras 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
• Atributo Abreviado da Fonte do CSS
• Ícone do CSS
• Link do CSS
• Lista do CSS
• Tabela do CSS

Tutorial intermediário do CSS

• Display CSS
• max-width do CSS
• Posicionamento CSS
• z-index do CSS
• Sobrepuxo CSS
• Flutuamento CSS
• Remoção de flutuamento CSS
• Exemplo de Flutuante do CSS
• inline-block do 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 Desdobrá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
• important do CSS
• Função Matemática do CSS

Tutorial avançado do CSS3

• Canto Arredondado do CSS
• Imagem da Borda do CSS
• Fundo do CSS
• Cor do CSS
• Palavra-Chave da 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 ferramentas CSS
• Estilos de imagem CSS
• Propriedade object-fit CSS
• object-position do CSS
• Máscaras CSS
• Botões 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 - Consulta 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
• Visão RWD
• Visão em 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ções CSS
• Unidade do CSS
• Audível CSS
• Fonte de segurança de rede CSS
• Produção animável CSS
• Unidade do CSS
• Cor do CSS
• Valores de cor CSS
• Valores padrão CSS
• Entidades CSS

Cursos optativos

Recomendação de curso:

• Bauhaus CodeW3C.com

Valores HSL

No CSS, pode-se usar tom, saturação e luminosidade (HSL) para especificar cores, no formato a seguir:

hsla(tonalidade, saturação, luminosidade)

Tom (tonalidade）é o número de graus de 0 a 360 no círculo das cores. 0 é vermelho, 120 é verde, e 240 é azul.

Saturação (saturação）é um valor percentual, 0% representa sombra de cinza e 100% é cor completa.

Luminosidade (luminosidade）também é uma porcentagem, 0% é preto, 50% é nem brilhante nem escuro, e 100% é branco.

Experimente misturando os seguintes valores HSL:

Exemplo

Experimente você mesmo

Saturação

A saturação pode ser descrita como a intensidade da cor.

100% é cor pura, sem sombras de cinza

50% é cinza 50%, mas você ainda pode ver a cor.

0% é completamente cinza, você não pode ver a cor.

Exemplo

Experimente você mesmo

Luminosidade

A luminosidade da cor pode ser descrita como quanta luz é atribuída à cor, onde 0% representa não brilhante (preto), 50% representa 50% de brilho (nem escuro nem brilhante), e 100% representa brilhante completo (branco).

Exemplo

Experimente você mesmo

Normalmente, para definir sombras de cinza, é definido o tom e a saturação como 0 e ajusta-se a luminosidade de 0% a 100% para obter sombras mais profundas/menos profundas:

Exemplo

Experimente você mesmo

Valores HSLA

O valor da cor HSLA é uma extensão do valor da cor HSL com canal Alpha - ele especifica a opacidade da cor.

O valor da cor HSLA é especificado como:

hsla(tonalidade, saturação, luminosidade, alpha)

alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco):

Experimente misturando os seguintes valores HSLA:

Exemplo

Experimente você mesmo

Caixa de ferramentas

Manual de referência CSS

Exemplo CSS

Teste CSS

Livros complementares CSS

Links de patrocinadores