Revisão de CSS

Revise os conceitos abaixo para se preparar para o próximo exame.

Noções básicas de CSS

O que é CSS?: Cascading Style Sheets (CSS) é uma linguagem de marcação usada para aplicar estilos aos elementos HTML. CSS é usado para cores, imagens de fundo, layouts e mais.
Anatomia Básica de uma Regra CSS: Uma regra CSS é composta por duas partes principais: um seletor e um bloco de declaração. Um seletor é um padrão usado em CSS para identificar e direcionar elementos HTML específicos para estilização. Um bloco de declaração aplica um conjunto de estilos para um dado seletor ou seletores.
Elemento meta name="viewport": Este elemento meta fornece ao navegador instruções sobre como controlar as dimensões da página e o escalonamento em diferentes dispositivos, particularmente em telefones celulares e tablets.
Estilos Padrão do Navegador: Cada elemento HTML terá estilos padrão do navegador aplicados a ele. Isso geralmente inclui itens como margens e espaçamentos padrão.

CSS Inline, Interno e Externo

CSS Inline: Esses estilos são escritos diretamente dentro de um elemento HTML usando o atributo style. Na maioria das vezes você não usará CSS inline devido à separação de responsabilidades.
CSS Interno: Esses estilos são escritos dentro das tags <style> na seção head de um documento HTML. Isso pode ser útil para criar exemplos de código curtos, mas geralmente você não usará CSS interno.
CSS Externo: Esses estilos são escritos em um arquivo CSS separado e vinculados ao documento HTML usando o elemento link na seção head. Para a maioria dos projetos, você usará um arquivo CSS externo em vez de CSS interno ou inline.

Trabalhando com as propriedades `width` e `height`

Propriedade width: Esta propriedade especifica a largura de um elemento. Se você não especificar uma largura, o padrão será definido como auto. Isso permite que o navegador determine a largura do elemento com base no seu conteúdo, pai e tipo de exibição.
Propriedade min-width: Esta propriedade especifica a largura mínima para um elemento.
Propriedade max-width: Esta propriedade especifica a largura máxima para um elemento.
Propriedade height: Esta propriedade especifica a altura de um elemento. Da mesma forma, a altura é auto por padrão, o que significa que ela se ajustará ao conteúdo interno.
Propriedade min-height: Esta propriedade especifica a altura mínima para um elemento.
Propriedade max-height: Esta propriedade especifica a altura máxima para um elemento.

Diferentes Tipos de Combinadores CSS

Combinador Descendente ( ) \*um único espaço entre seletores: Este combinador é usado para direcionar elementos que são descendentes de um elemento pai especificado.
Combinador Filho (>): Este combinador é usado para selecionar elementos que são filhos diretos de um elemento pai especificado.
Combinador de próximo-irmão (+): Este combinador seleciona um elemento que segue imediatamente um elemento irmão especificado.
Combinador de Irmão Seguinte (~): Este combinador seleciona todos os irmãos de um elemento especificado que vêm depois dele.

Elementos em Nível Inline, Block e Inline-Block

Inline Level Elements: Inline elements only take up as much width as they need and do not start on a new line. Esses elementos fluem dentro do conteúdo, permitindo que texto e outros elementos inline apareçam ao lado deles. Elementos inline comuns são os elementos span, anchor e img.
Elementos de Nível de Bloco: Elementos de nível de bloco ocupam toda a largura disponível por padrão, estendendo-se pela largura do seu contêiner. Alguns elementos comuns de nível de bloco são os elementos div, p e section.
Elementos de Nível Inline-Block: Você pode definir um elemento como inline-block usando a propriedade display. Esses elementos se comportam como elementos inline mas podem ter width e height definidos como elementos de nível bloco.

Margem e Preenchimento

Propriedade margin: Esta propriedade é usada para aplicar espaço fora do elemento, entre a borda do elemento e os elementos ao redor.
Abreviação de margin: Você pode especificar de 1 a 4 valores para definir os lados da margem. Um valor se aplica aos quatro lados; dois valores definem top e bottom e depois right e left; três valores definem top, horizontal (right e left) e depois bottom; quatro valores definem top, right, bottom, left.
Propriedade padding: Esta propriedade é usada para aplicar espaço dentro do elemento, entre o conteúdo e sua borda.
Atalho de padding: Você pode especificar de 1 a 4 valores para definir os lados do padding. Um valor se aplica aos quatro lados; dois valores definem top e bottom e depois right e left; três valores definem top, horizontal (right e left) e depois bottom; quatro valores definem top, right, bottom, left.

Especificidade do CSS

Especificidade do CSS Inline: O CSS inline tem a especificidade mais alta porque é aplicado diretamente ao elemento. Ele substitui qualquer CSS interno ou externo. O valor de especificidade para estilos inline é (1, 0, 0, 0).
Especificidade do CSS Interno: O CSS interno é definido dentro de um style elemento na head seção do documento HTML. Ele tem especificidade menor do que estilos inline. Tanto o CSS interno quanto o externo compartilham o mesmo nível de especificidade, que é determinado pelos seus seletores, não pela sua localização.
Especificidade do CSS Externo: O CSS externo é vinculado via um elemento link na seção head e é escrito em arquivos .css separados. Assim como o CSS interno, sua especificidade é determinada pelos seletores usados. Quando duas regras têm especificidade igual, a ordem de origem determina o vencedor — a regra que aparece mais tarde no documento tem precedência. O CSS externo oferece a melhor manutenção para projetos maiores.
Universal Selector (*): This is a special type of CSS selector that matches any element in the document. É frequentemente usado para aplicar um estilo a todos os elementos na página, o que pode ser útil para redefinir ou normalizar estilos entre diferentes navegadores. O seletor universal tem o menor valor de especificidade de qualquer seletor. It contributes 0 to all parts of the specificity value (0, 0, 0, 0).
Seletores de Tipo: Esses seletores têm como alvo elementos com base no nome da tag. Seletores de tipo têm uma especificidade relativamente baixa em comparação com outros seletores. O valor de especificidade para um seletor de tipo é (0, 0, 0, 1).
Seletores de Classe: Esses seletores são definidos por um ponto (.) seguido pelo nome da classe. O valor de especificidade para um seletor de classe é (0, 0, 1, 0). Isso significa que seletores de classe podem substituir seletores de tipo, mas podem ser substituídos por seletores de ID e estilos inline.
Seletores de ID: Seletores de ID são definidos por um símbolo de cerquilha (#) seguido pelo nome do ID. Seletores de ID têm uma especificidade muito alta, maior do que seletores de tipo e seletores de classe, mas menor do que estilos inline. O valor de especificidade para um seletor de ID é (0, 1, 0, 0).
Palavra-chave !important: usada para dar a uma regra de estilo a mais alta prioridade, permitindo que ela substitua quaisquer outras declarações para uma propriedade. Quando usada, força o navegador a aplicar o estilo especificado, independentemente da especificidade de outros seletores. Você deve ter cautela ao usar !important porque isso pode tornar seu CSS mais difícil de manter e depurar.
Algoritmo de Cascata: Um algoritmo usado para decidir quais regras CSS aplicar quando há múltiplos estilos direcionados ao mesmo elemento. Ele garante que os estilos mais apropriados sejam usados, com base em um conjunto de regras bem definidas.
Herança CSS: O processo pelo qual estilos são passados de elementos pai para seus filhos. A herança permite que você defina estilos em um nível superior na árvore do documento e os aplique a múltiplos elementos sem especificá-los explicitamente para cada elemento.

Terminologia de Design

Layout: É assim que os elementos visuais são organizados em uma página ou tela para comunicar uma mensagem. Esses elementos podem incluir texto, imagens e espaço em branco.
Alinhamento: É assim que os elementos são posicionados em relação uns aos outros. Usar o alinhamento corretamente é útil para fazer o design parecer limpo e organizado.
Composição: Este é o ato de organizar elementos para criar um design harmonioso. Ele determina como elementos como imagens, texto e formas se relacionam entre si e contribuem para o design de uma maneira artística.
Balance: É assim que o peso visual é distribuído dentro de uma composição. Designers buscam criar um equilíbrio por meio de arranjos simétricos ou assimétricos.
Escala: Isso se refere a comparar as dimensões ou o tamanho de um elemento com o de outro.
Hierarquia: Isso estabelece a ordem de importância dos elementos em um design. Trata-se de garantir que a informação mais importante seja notada primeiro.
Contrast: This is the process of creating clear distinctions between the elements. Você pode fazer isso por meio de variações em cor, tamanho, forma, textura ou qualquer outra característica visual. Um forte contraste também é útil para melhorar a legibilidade.
Espaço em Branco (Espaço Negativo): Este é o espaço vazio em um design. É a área ao redor dos elementos.
UI (User Interface): UI inclui os elementos visuais e interativos que os usuários podem ver em suas telas, como ícones, imagens, texto, menus, links e botões.
UX (User Experience): UX é sobre como os usuários se sentem ao usar um produto ou serviço. Um aplicativo com uma experiência do usuário bem projetada é intuitivo, fácil de usar, eficiente, acessível e agradável.
Resumo do Projeto: Este é um documento que descreve os objetivos, metas e requisitos de um projeto. É um roteiro que orienta o processo de design e garante que o produto final atenda às necessidades do cliente.
Design Baseado em Vetores: Isso envolve criar arte digital usando fórmulas matemáticas para definir linhas, formas e cores.
Prototipagem: Isso se refere ao processo de criar um modelo interativo de um produto ou interface do usuário.

Fundamentos do Design de UI

Bom Contraste para Cores de Fundo e Primeiro Plano: É importante garantir que as cores de fundo e primeiro plano tenham bom contraste para tornar o texto legível. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma razão mínima de contraste de 4.5:1 para texto normal e 3:1 para texto grande.
Boa Hierarquia Visual no Design: Uma hierarquia visual forte pode fornecer um caminho claro para o olho seguir, garantindo que a informação que você transmite seja consumida na ordem que você pretende.
Imagens Responsivas: Imagens responsivas são imagens que se ajustam para caber no tamanho da tela em que estão sendo visualizadas. Isso é importante porque garante que suas imagens fiquem boas em todos os dispositivos, de desktops a telefones móveis.
Aprimoramento Progressivo: Esta é uma abordagem de design que garante que todos os usuários, independentemente do navegador ou dispositivo, possam acessar o conteúdo essencial e a funcionalidade de uma aplicação.
Design centrado no usuário: Esta é uma abordagem que prioriza o usuário final, desde suas necessidades até suas preferências e limitações. O objetivo do design centrado no usuário é criar uma página web que seja intuitiva, eficiente de usar e agradável para seus usuários interagirem.
Pesquisa de Usuário: Este é o estudo sistemático das pessoas que usam seu produto. O objetivo é medir as necessidades, comportamentos e pontos problemáticos dos usuários.
Teste de Usuário: Isso se refere à prática de capturar dados dos usuários enquanto eles interagem com sua aplicação.
A/B Testing: Este é o processo de lançar uma nova funcionalidade para um subconjunto selecionado aleatoriamente da sua base de usuários. Você pode então usar dados analíticos para determinar se a funcionalidade é benéfica.
Requisitos do Usuário: Isso se refere às histórias ou critérios que sua aplicação precisa seguir. Os requisitos do usuário podem ser definidos por pesquisa com usuários ou por padrões da indústria. Eles podem até ser definidos pela contribuição das partes interessadas.
Divulgação Progressiva: Este é um padrão de design usado para mostrar aos usuários apenas o conteúdo relevante com base em sua atividade atual e ocultar o restante. Isso é feito para reduzir a carga cognitiva e tornar a experiência do usuário mais intuitiva.
Registro Adiado/Preguiçoso: Este é um padrão de design de interface que permite aos usuários navegar e interagir com sua aplicação sem precisar se registrar.

Melhores Práticas de Design

Modo Escuro: Esta é uma funcionalidade especial em aplicações web onde você pode alterar o esquema de cores claro padrão para um esquema de cores escuro. Você deve usar cores dessaturadas no modo escuro. Cores dessaturadas são cores que são menos intensas e têm um nível de saturação mais baixo.
Breadcrumbs: Este é um recurso de navegação que mostra ao usuário onde ele está na hierarquia do site. É melhor colocar os breadcrumbs no topo da página para que os usuários possam encontrá-los facilmente. Além disso, você deve garantir que os breadcrumbs sejam grandes o suficiente para serem facilmente lidos, mas não tão grandes a ponto de ocuparem muito espaço na página.
Componente Card: Seu componente card deve ser simples no design, não visualmente poluído nem exibir muita informação. Para mídia, certifique-se de escolher imagens e vídeos de alta qualidade para melhorar a experiência do usuário.
Infinite Scroll: Este é um padrão de design que carrega mais conteúdo conforme o usuário rola a página para baixo. Você deve considerar usar um botão de carregar mais porque ele dá ao usuário o controle sobre quando eles querem ver mais conteúdo. Você também pode adicionar um botão de voltar para que os usuários tenham a capacidade de retornar à página anterior sem precisar rolar toda a página para cima.
Modal Dialog: Este é um tipo de pop-up que será exibido sobre o conteúdo existente da página. Normalmente o conteúdo de fundo terá uma sobreposição de cor escura para ajudar o usuário a focar melhor no conteúdo do modal. Além disso, é sempre uma boa ideia permitir que o usuário clique fora do modal para fechá-lo. Quando você usa o elemento HTML dialog, você terá muitas das funcionalidades e benefícios de acessibilidade incorporados.
Indicação de Progresso para Registro de Formulário: Esta é uma forma de mostrar aos usuários o quão avançados eles estão em um processo. Pode ser usado em formulários, registros e processos de configuração. Seu design deve ser simples, fácil de encontrar e possibilitar o retorno aos passos anteriores.
Carrinho de Compras: Carrinhos são um local para o usuário ver quais itens ele já selecionou em uma plataforma de comércio eletrônico. Seus carrinhos devem estar sempre visíveis para o usuário, usar um ícone comum como um carrinho, bolsa ou cesta, e ter um botão de chamada para ação claro para os usuários prosseguirem para o checkout.

Ferramentas Comuns de Design

Figma: Esta ferramenta baseada na nuvem é especializada em design de Interface do Usuário e Experiência do Usuário (UI / UX). Ela permite que equipes de design e desenvolvimento colaborem de qualquer lugar, oferecendo recursos integrados incluindo design baseado em vetor, layout automático, um sistema de comentários e feedback e mais.
Sketch: Esta é uma ferramenta de design popular usada por sua interface intuitiva e simplicidade, tornando-a ideal para desenvolvedores que querem criar protótipos rapidamente. Também é amplamente usada por designers para tarefas como criar UIs, ícones e layouts web.
Adobe XD: Esta é uma ferramenta de design e prototipagem baseada em vetor para design de UI/UX, conhecida por sua integração perfeita com outros aplicativos Adobe como Photoshop, Illustrator e After Effects.
Canva: Esta ferramenta permite que você crie uma ampla variedade de conteúdo visual, incluindo cartazes, fotos de capa, apresentações, vídeos curtos e mais. Seu design simples e fácil de usar a torna ideal para iniciantes.

Unidades Absolutas

px (Pixels): Esta unidade absoluta é uma unidade de medida de tamanho fixo em CSS, proporcionando controle preciso sobre as dimensões. Isso significa que 1px é sempre igual a 1/96 de polegada.
in (Inch): Esta unidade absoluta é igual a 96px.
cm (Centímetros): Esta unidade absoluta é igual a 25.2/64 de uma polegada.
mm (Milímetros): Esta unidade absoluta é igual a 1/10 de um centímetro.
q (Quarter-Millimeters): Esta unidade absoluta é igual a 1/40 de um centímetro.
pc (Picas): Esta unidade absoluta é igual a 1/6 de polegada.
pt (Points): Esta unidade absoluta é igual a 1/72 de polegada.

Unidades Relativas

Porcentagens: Essas unidades relativas permitem que você defina tamanhos, dimensões e outras propriedades como uma proporção do elemento pai. Por exemplo, se você definir width: 50%; em um elemento, ele ocupará metade da largura do seu contêiner pai.
Unidade em: Essas unidades são relativas ao tamanho da fonte do elemento. Se você estiver usando ems para a propriedade font-size, o tamanho do texto será relativo ao tamanho da fonte do elemento pai.
Unidade rem: Essas unidades são relativas ao tamanho da fonte do elemento raiz, que é o elemento html.
Unidade vh: vh significa "viewport height" e 1vh é igual a 1% da altura da viewport.
Unidade vw: vw significa "viewport width" e 1vw é igual a 1% da largura da viewport.

Função `calc`

Função calc(): Com a função calc(), você pode realizar cálculos diretamente dentro das suas folhas de estilo para determinar valores de propriedades de forma dinâmica. Isso significa que você pode criar interfaces de usuário flexíveis e responsivas calculando dimensões com base no tamanho da viewport ou em outros elementos.

Pseudo-classes de Ação do Usuário

Definição de Pseudo-classes: Estes são palavras-chave especiais do CSS que permitem selecionar um elemento com base em seu estado ou posição específicos.
Pseudo-classes de Ação do Usuário: Estes são palavras-chave especiais que permitem alterar a aparência dos elementos com base nas interações do usuário, melhorando a experiência geral do usuário.
Pseudo-classe :active: Esta pseudo-classe permite selecionar o estado ativo de um elemento, como ao clicar em um botão.
Pseudo-classe :hover: Esta pseudo-classe define o estado de hover de um elemento.
Pseudo-classe :focus: Esta pseudo-classe aplica estilos quando um elemento ganha foco, tipicamente através da navegação por teclado ou quando um usuário clica em um campo de formulário.
Pseudo-classe :focus-within: Esta pseudo-classe é usada para aplicar estilos a um elemento quando ele ou qualquer um de seus descendentes está com foco.

Pseudo-classes de Entrada

Pseudo-classes de Input: Essas pseudo-classes são usadas para direcionar elementos HTML input com base no estado em que eles estão antes e depois da interação do usuário.
:enabled Pseudo-class: Esta pseudo-classe é usada para selecionar botões de formulário ou outros elementos que estão atualmente habilitados.
:disabled Pseudo-class: Esta pseudo-classe permite que você estilize um elemento interativo no modo desabilitado.
Pseudo-classe :checked: Esta pseudo-classe é usada para indicar ao usuário que está marcado.
Pseudo-classe :valid: Esta pseudo-classe seleciona os campos de entrada que atendem aos critérios de validação.
Pseudo-classe :invalid: Esta pseudo-classe seleciona os campos de entrada que não atendem aos critérios de validação.
Pseudo-classes :in-range e :out-of-range: Essas pseudo-classes aplicam estilos a elementos com base em se seus valores estão dentro ou fora dos limites de intervalo especificados.
Pseudo-classe :required: Esta pseudo-classe seleciona elementos input que possuem o atributo required. Ela indica ao usuário que ele deve preencher o campo para enviar o formulário.
:optional Pseudo-class: Esta pseudo-classe aplica estilos a elementos de entrada que não são obrigatórios e podem ser deixados vazios.
:autofill Pseudo-class: Esta pseudo-classe aplica estilos aos campos de entrada que o navegador preenche automaticamente com dados salvos.

Pseudo-classes de Localização

Pseudo-classes de Localização: Essas pseudo-classes são usadas para estilizar links e elementos que são alvo dentro do documento atual.
Pseudo-classe :any-link: Esta pseudo-classe é uma combinação das pseudo-classes :link e :visited. Portanto, ela corresponde a qualquer elemento anchor com um atributo href, independentemente de ter sido visitado ou não.
:link Pseudo-class: Esta pseudo-classe permite que você selecione todos os links não visitados em uma página da web. Você pode usá-la para estilizar os links de forma diferente antes que o usuário clique neles.
Pseudo-classe :local-link: Esta pseudo-classe seleciona links que apontam para o mesmo documento. Pode ser útil quando você quer diferenciar links internos de externos.
Pseudo-classe :visited: Esta pseudo-classe seleciona um link que o usuário já visitou.
Pseudo-classe :target: Esta pseudo-classe é usada para aplicar estilos a um elemento que é o alvo de um fragmento de URL.

Pseudo-classes Pseudo-estruturais de Árvore

Pseudo-classes Pseudo-estruturais de Árvore: Essas pseudo-classes permitem que você selecione e estilize elementos com base em sua posição dentro da árvore do documento.
Pseudo-classe :root: Esta pseudo-classe geralmente é o elemento raiz html. Ela ajuda você a direcionar o nível mais alto no documento para que possa aplicar um estilo comum a todo o documento.
Pseudo-classe :empty: Elementos vazios, ou seja, elementos sem filhos além de espaços em branco, também estão incluídos na árvore do documento. Por isso existe a pseudo-classe :empty para selecionar elementos vazios.
:nth-child(n) Pseudo-class: Esta pseudo-classe permite que você selecione elementos com base em sua posição dentro de um elemento pai.
Pseudo-classe :nth-last-child(n): Esta pseudo-classe permite que você selecione elementos contando a partir do final.
Pseudo-classe :first-child: Esta pseudo-classe seleciona o primeiro elemento dentro de um elemento pai ou do documento.
Pseudo-classe :last-child: Esta pseudo-classe seleciona o último elemento em um elemento pai ou no documento.
:only-child Pseudo-class: Esta pseudo-classe seleciona o único elemento em um elemento pai ou no documento.
Pseudo-classe :first-of-type: Esta pseudo-classe seleciona a primeira ocorrência de um tipo específico de elemento dentro de seu pai.
Pseudo-classe :last-of-type: Esta pseudo-classe seleciona a última ocorrência de um tipo específico de elemento dentro de seu pai.
Pseudo-classe :nth-of-type(n): Esta pseudo-classe permite selecionar um elemento específico dentro de seu pai com base em sua posição entre irmãos do mesmo tipo.
:only-of-type Pseudo-classe: Esta pseudo-classe seleciona um elemento se ele for o único do seu tipo dentro do seu elemento pai.

Pseudo-classes Funcionais

Pseudo-classes Funcionais: Pseudo-classes funcionais permitem que você selecione elementos com base em condições ou relacionamentos mais complexos. Diferente das pseudo-classes regulares que têm como alvo elementos com base em um estado (por exemplo, :hover, :focus), pseudo-classes funcionais aceitam argumentos.
Pseudo-classe :is(): Esta pseudo-classe recebe uma lista de seletores (ex. ol, ul) e seleciona um elemento que corresponda a um dos seletores na lista.
Pseudo-classe :where(): Esta pseudo-classe recebe uma lista de seletores (ex. ol, ul) e seleciona um elemento que corresponda a um dos seletores na lista. A diferença entre :is e :where é que esta última terá uma especificidade de 0.
Pseudo-classe :has(): Esta pseudo-classe é frequentemente chamada de seletor "parent" porque permite estilizar elementos que contêm elementos filhos especificados na lista de seletores.

Pseudo-elementos

Pseudo-elemento ::before: Este pseudo-elemento usa a propriedade content para inserir conteúdo cosmético como ícones logo antes do elemento.
Pseudo-elemento ::after: Este pseudo-elemento usa a propriedade content para inserir conteúdo cosmético como ícones logo após o elemento.
Pseudo-elemento ::first-letter: Este pseudo-elemento seleciona a primeira letra do conteúdo de um elemento, permitindo que você a estilize.
Pseudo-elemento ::marker: Este pseudo-elemento permite que você selecione o marcador (bullet ou numeração) dos itens da lista para estilização.

Teoria das Cores

Definição de Teoria das Cores: Este é o estudo de como as cores interagem entre si e como elas afetam nossa percepção. Abrange relacionamentos de cores, harmonia de cores e o impacto psicológico da cor.
Cores Primárias: Essas cores que são amarelo, azul e vermelho, são os tons fundamentais dos quais todas as outras cores são derivadas.
Cores Secundárias: Essas cores resultam da mistura de quantidades iguais de duas cores primárias. Verde, laranja e roxo são exemplos de cores secundárias.
Cores Terciárias: Essas cores resultam da combinação de uma cor primária com uma cor secundária vizinha. Yellow-Green, Blue-Green e Blue-Violet são exemplos de cores terciárias.
Cores Quentes: Essas cores que incluem vermelhos, laranjas e amarelos, evocam sensações de conforto, calor e aconchego.
Cores Frias: Essas cores que incluem azuis, verdes e roxos, evocam sentimentos de calma, serenidade e profissionalismo.
Roda de Cores: A roda de cores é um diagrama circular que mostra como as cores se relacionam entre si. É uma ferramenta essencial para designers porque os ajuda a selecionar combinações de cores.
Esquemas de Cores Análogas: Esses esquemas de cores criam experiências coesas e tranquilizadoras. Eles possuem cores análogas, que são adjacentes umas às outras no círculo cromático.
Esquemas de Cores Complementares: Esses esquemas de cores criam alto contraste e impacto visual. Suas cores estão localizadas em extremos opostos do círculo cromático, em relação umas às outras.
Triadic Color Scheme: This color scheme has vibrant colors. Eles são feitos de cores que estão aproximadamente equidistantes umas das outras. Se eles estiverem conectados, formam um triângulo equilátero na roda de cores.
Esquema de Cores Monocromático: Para este esquema de cores, todas as cores são derivadas da mesma cor base ajustando seu brilho, escuridão e saturação. Isso evoca uma sensação de unidade e harmonia ao mesmo tempo que cria contraste.

Diferentes Formas de Trabalhar com Cores em CSS

Cores Nomeadas: Essas cores são nomes de cores predefinidos reconhecidos pelos navegadores. Exemplos incluem blue, darkred e lightgreen.
Função rgb(): RGB significa Vermelho, Verde e Azul — as cores primárias da luz. Essas três cores são combinadas em diferentes intensidades para criar uma ampla gama de cores. A função rgb() permite que você defina cores usando o modelo de cores RGB.
Função rgba(): Esta função adiciona um quarto valor —alpha— que controla a transparência da cor.
Função hsl(): HSL significa Hue, Saturation e Lightness — três componentes principais que definem uma cor.
Função hsla(): Esta função adiciona um quarto valor — alpha — que controla a opacidade da cor.
Hexadecimal: Um código hexadecimal (abreviação de código hexadecimal) é uma string de seis caracteres usada para representar cores no modelo de cores RGB. O "hex" refere-se ao sistema de numeração base 16, que usa os dígitos 0 a 9 e as letras A a F.

Propriedade `box-shadow`

Definição: A propriedade box-shadow aplica uma ou mais sombras ao redor de um elemento.
Valores de Offset: Você deve especificar valores horizontais (offset-x) e verticais (offset-y). Valores positivos de offset-x movem a sombra para a direita, enquanto valores negativos a movem para a esquerda. Valores positivos de offset-y movem a sombra para baixo, enquanto valores negativos a movem para cima. Se um valor for 0, não é necessário incluir uma unidade.
Raio de Desfoque: Este valor opcional controla o quão borrada a sombra aparece. Se não for incluído, o padrão é 0, que cria bordas nítidas. Quanto maior o valor, mais suave a sombra.
Spread Radius: Este valor opcional controla o quanto a sombra se expande ou encolhe. Se não for incluído, o padrão é 0.
Cor da Sombra: Você pode especificar a cor usando cores nomeadas, valores hexadecimais, funções rgb(), rgba(), hsl() ou hsla().
Palavra-chave inset: Adicionar a palavra-chave inset coloca a sombra dentro do elemento em vez de fora.
Aplicando Múltiplas Sombras de Caixa: Você pode aplicar múltiplas sombras separando-as por vírgulas. As sombras são empilhadas da frente para trás.

Sintaxe

box-shadow: offset-x offset-y blur-radius spread-radius color;

<div class="shadow-box">Shadow Example</div>

<style>
.shadow-box {
  width: 200px;
  padding: 20px;
  margin: 20px;
  background-color: lightblue;
  text-align: center;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
}
</style>

Gradientes Lineares e Radiais

Gradientes Lineares: Esses gradientes criam uma mistura gradual entre cores ao longo de uma linha reta. Você pode controlar a direção dessa linha e as cores usadas.
Gradientes Radiais: Esses gradientes criam gradientes circulares ou elípticos que irradiam de um ponto central.

Melhores Práticas para Estilizar Inputs

Estilizando Inputs: Como em todos os elementos de texto, você precisa garantir que os estilos aplicados aos inputs de texto sejam acessíveis. Isso significa que a fonte precisa ter um tamanho adequado e a cor precisa ter contraste suficiente com o fundo. Elementos de input também podem receber foco. Quando você estiver editando seus estilos, deve tomar cuidado para preservar um indicador visível quando o elemento estiver com foco, como uma borda em negrito.

Usando `appearance: none` para Inputs

appearance: none: Os navegadores aplicam estilos padrão a muitos elementos. A propriedade CSS appearance: none dá controle total sobre o estilo, mas traz algumas ressalvas. Ao criar estilos personalizados para elementos de entrada, você precisará garantir que os indicadores de foco e erro ainda estejam presentes.

Problemas Comuns ao Estilizar as Propriedades `datetime-local` e `color`

Problemas Comuns: Esses tipos especiais de entradas dependem de pseudo-elementos complexos para criar coisas como os seletores de data e cor. Isso apresenta um desafio significativo para estilizar essas entradas. Um desafio é que a estilização padrão depende inteiramente do navegador, então o CSS que você escreve para fazer o seletor parecer do jeito que você deseja pode ser totalmente diferente em outro navegador.

Propriedade CSS Overflow

Definição: Overflow refere-se à forma como os elementos lidam com conteúdo que excede, ou "transborda", o tamanho do elemento contêiner. Overflow é bidimensional.
overflow-x: O eixo x determina o transbordamento horizontal.
overflow-y: O eixo y determina o transbordamento vertical.

Propriedade CSS Transform

Definição: Esta propriedade permite que você aplique várias transformações aos elementos, como rotacionar, escalar, inclinar ou transladar (mover) eles no espaço 2D ou 3D.
Função translate(): Esta função é usada para mover um elemento de sua posição atual.
Função scale(): Esta função permite que você altere o tamanho de um elemento.
Transformações e Acessibilidade: Se você estiver usando transform para ocultar ou revelar conteúdo, certifique-se de que o conteúdo ainda seja acessível para leitores de tela e navegação por teclado. O conteúdo oculto deve estar realmente oculto, como ao usar display: none ou visibility: hidden, em vez de simplesmente ser movido visualmente para fora da tela.

O Modelo de Caixa

Definição: No modelo de caixa do CSS, todo elemento é cercado por uma caixa. Essa caixa consiste em quatro componentes: a área de conteúdo, padding, border e margin.
Área de Conteúdo: A área de conteúdo é a parte mais interna da caixa. É o espaço que contém o conteúdo real de um elemento, como texto ou imagens.
padding: O padding é a área imediatamente após a área de conteúdo. É o espaço entre a área de conteúdo e a borda de um elemento.
border: A borda é a borda externa ou contorno de um elemento no modelo de caixa CSS. É o limite visual do elemento.
margin: A margem é o espaço fora da borda de um elemento. Ela determina a distância entre um elemento e outros elementos ao seu redor.

Colapso de Margem

Definição: Esse comportamento ocorre quando as margens verticais de elementos adjacentes se sobrepõem, resultando em uma única margem igual à maior das duas. Esse comportamento se aplica apenas às margens verticais (superior e inferior), não às margens horizontais (esquerda e direita).

Os Valores da Propriedade `content-box` e `border-box`

Propriedade box-sizing: Esta propriedade é usada para determinar como o width e o height finais são calculados para um elemento HTML.
Valor content-box: No modelo content-box, o width e o height que você define para um elemento determinam as dimensões da área de conteúdo, mas eles não incluem o padding, border ou margin.
Valor border-box: Com border-box, a width e a height de um elemento incluem a área de conteúdo, o padding e o border, mas não incluem o margin.

Reset de CSS

Definição: Um reset de CSS é uma folha de estilo que remove toda ou parte da formatação padrão que os navegadores aplicam aos elementos HTML. Opções de terceiros para resets de CSS incluem sanitize.css e normalize.css.

Propriedade CSS Filter

Definição: Esta propriedade pode ser usada para criar vários efeitos como desfoque, mudança de cor e ajuste de contraste.
Função blur(): Esta função aplica um desfoque Gaussiano ao elemento. A quantidade é definida em pixels e representa o raio do desfoque.
Função brightness(): Esta função ajusta o brilho do elemento. Um valor de 0% deixará o elemento completamente preto, enquanto valores acima de 100% aumentarão o brilho.
Função grayscale(): Esta função converte o elemento para escala de cinza. A quantidade é definida como uma porcentagem, onde 100% é completamente em escala de cinza e 0% deixa a imagem inalterada.
Função sepia(): Esta função aplica um tom sépia ao elemento. Como o grayscale, ela usa um valor percentual.
Função hue-rotate(): Esta função aplica uma rotação de matiz ao elemento. O valor é definido em graus e representa uma rotação ao redor do círculo de cores.

Introdução ao CSS Flexbox e ao Modelo Flexível

Definição: CSS flexbox é um modelo de layout unidimensional que permite organizar elementos em linhas e colunas dentro de um contêiner.
Modelo Flex: Este modelo define como os itens flex são organizados dentro de um contêiner flex. Todo contêiner flex possui dois eixos: o eixo principal e o eixo transversal.

A Propriedade `flex-direction`

Definição: Esta propriedade define a direção do eixo principal. O valor padrão de flex-direction é row, que posiciona todos os itens flex na mesma linha, na direção do idioma padrão do seu navegador (da esquerda para a direita ou da direita para a esquerda).
flex-direction: row-reverse;: Isso inverte os itens na linha.
flex-direction: column;: Isso alinhará os itens flex verticalmente em vez de horizontalmente.
flex-direction: column-reverse;: Isso inverte a ordem dos itens flex na vertical.

A Propriedade `flex-wrap`

Definição: Esta propriedade determina como os itens flexíveis são quebrados dentro de um contêiner flexível para se ajustarem ao espaço disponível. flex-wrap pode assumir três valores possíveis: nowrap, wrap e wrap-reverse.
flex-wrap: nowrap;: Este é o valor padrão. Os itens flex não serão quebrados em uma nova linha, mesmo se sua largura exceder a largura do contêiner.
flex-wrap: wrap;: Esta propriedade irá quebrar os itens quando eles excederem a largura do seu contêiner.
flex-wrap: wrap-reverse;: Esta propriedade irá envolver os itens flex em ordem reversa.
Propriedade flex-flow: Esta propriedade é uma propriedade abreviada para flex-direction e flex-wrap.

A Propriedade `justify-content`

Definição: Esta propriedade alinha os elementos filhos ao longo do eixo principal do contêiner flexível.
justify-content: flex-start;: Neste caso, os itens flex serão alinhados ao início do eixo principal. Isso pode ser horizontal ou vertical.
justify-content: flex-end;: Neste caso, os itens flex são alinhados ao final do eixo principal, horizontalmente ou verticalmente.
justify-content: center;: Isso centraliza os itens flex ao longo do eixo principal.
justify-content: space-between;: Isso distribuirá os elementos uniformemente ao longo do eixo principal.
justify-content: space-around;: Isso distribuirá os itens flex de forma uniforme dentro do eixo principal, adicionando um espaço antes do primeiro item e depois do último item.
justify-content: space-evenly;: Isso distribui os itens uniformemente ao longo do eixo principal.

A Propriedade `align-items`

Definição: Esta propriedade é usada para distribuir itens ao longo do eixo cruzado. Lembre-se que o eixo cruzado é perpendicular ao eixo principal.
align-items: center;: Isso é usado para centralizar os itens ao longo do eixo cruzado.
align-items: flex-start;: Isso alinha os itens ao início do eixo cruzado.
align-items: stretch;: Isso é usado para esticar os itens flex ao longo do eixo cruzado.

Introdução à Tipografia

Definição: Tipografia é a arte de escolher as fontes e o formato certos para tornar o texto visualmente atraente e fácil de ler. "Type" refere-se a como os caracteres individuais são projetados e organizados.
Definição de Typeface: Um typeface é o design e estilo geral de um conjunto de caracteres, números e símbolos. É como um projeto para uma família de fontes.
Definição de Fonte: Uma fonte é uma variação específica de uma família tipográfica com características específicas, como tamanho, peso, estilo e largura.
Fonte Serifada: Esta fonte tem um estilo clássico com pequenas linhas no final dos caracteres. Fontes serifadas são comumente usadas para materiais impressos como livros.
Sans Serif Typeface: This typeface has a more modern look, without the small lines at the end of characters. As fontes Sans Serif são comumente usadas em design digital porque são fáceis de ler na tela. Alguns exemplos incluem Helvetica, Arial e Roboto.
Espessura da Fonte: Esta é a espessura dos caracteres, incluindo light, regular, bold e black.
Estilo da Fonte: Esta é a inclinação e orientação dos caracteres, como italic e oblique.
Largura da Fonte: Este é o espaço horizontal ocupado pelos caracteres, como condensado e expandido.
Baseline: Esta é a linha imaginária sobre a qual a maioria dos caracteres repousa.
Altura da Maiúscula: Esta é a altura das letras maiúsculas, medida da linha de base até o topo.
X-height: Esta é a altura média das letras minúsculas, excluindo ascendentes e descendentes.
Ascenders: Estas são as partes das letras minúsculas que se estendem acima da altura-x, como o topo das letras 'h', 'b', 'd' e 'f'.
Descenders: Estas são as partes das letras minúsculas que se estendem abaixo da linha de base, como as caudas de 'y', 'g', 'p' e 'q'.
Kerning: É assim que o espaço é ajustado entre pares específicos de caracteres para melhorar sua legibilidade e estética. Por exemplo, reduzir o espaço entre as letras A e V.
Tracking: This is how space is adjusted between all characters in a block of text. É essencialmente a distância entre os caracteres. Isso afeta quão denso e espaçado o texto será.
Leading: Este é o espaço vertical entre linhas de texto. É medido da linha de base de uma linha até a linha de base da próxima linha.
Best Practices with Typography: You should choose clear and simple fonts to make your designs easy to understand. Isso é particularmente importante para o texto principal do seu site. Os usuários têm mais probabilidade de interagir com seu conteúdo se a fonte for fácil de ler. Você deve usar no máximo duas ou três fontes para criar uma consistência visual. Using too many fonts can make the text more difficult to read and weaken your brand's identity. Isso também pode impactar a experiência do usuário ao aumentar o tempo de carregamento do site. Você pode usar o tamanho da fonte para criar uma hierarquia visual para títulos, subtítulos, parágrafos e outros elementos. Por exemplo, o título principal em uma página da web deve ter uma fonte maior, seguido por subtítulos com tamanhos de fonte menores. Isso dará a cada elemento na hierarquia um tamanho de fonte específico que ajuda os usuários a navegar pela estrutura visualmente.

Propriedade CSS `font-family`

Definition: A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface but they also have variations in their style, weight, and width. Você pode especificar múltiplas famílias de fontes em ordem de prioridade, da mais alta para a mais baixa, separando-as por vírgulas. Essas fontes alternativas funcionarão como opções de fallback. Você deve sempre incluir uma família de fontes genérica no final da lista de font-family.
Famílias de Fontes Comuns: Aqui estão algumas famílias de fontes comuns usadas em CSS: serif, sans-serif, monospace, cursive e fantasy

Fontes Seguras para Web

Definition: These fonts are a subset of fonts that are very likely to be installed on a computer or device. Quando o navegador precisa renderizar uma fonte, ele tenta encontrar o arquivo da fonte no sistema do usuário. Mas se a fonte não for encontrada, geralmente será usada uma fonte padrão do sistema.
Fontes Web Safe:
Fontes sans-serif são comumente usadas para desenvolvimento web porque elas não têm pequenas "pés" ou linhas no final dos caracteres, então são fáceis de ler na tela. Alguns exemplos de fontes sans-serif seguras para web são: Arial, Verdana e Trebuchet MS.
Em contraste, fontes serifadas têm pequenos "pés" no final dos caracteres, então elas são comumente usadas para impressão tradicional. Fontes serifadas seguras para web incluem: Times New Roman e Georgia.

At-rules e o at-rule `@font-face`

Definição: At-rules são declarações que fornecem instruções para o navegador. Você pode usá-las para definir vários aspectos da folha de estilo, como media queries, keyframes, font faces e mais.
@font-face: Isso permite que você defina uma fonte personalizada especificando o arquivo da fonte, o formato e outras propriedades importantes, como peso e estilo. Para que a regra @font-face seja válida, você também precisa especificar a propriedade src. Essa propriedade contém referências aos recursos da fonte.
Font Formats: For each font resource, you can also specify the format. Isto é opcional. É uma dica para o navegador sobre o formato da fonte. Se o formato for omitido, o recurso será baixado e o formato será detectado após o download. Se o formato for inválido, o recurso não será baixado. Os formatos de fonte possíveis incluem collection, embedded-opentype, opentype, svg, truetype, woff e woff2.
woff e woff2: woff significa "Web Open Font Format." É um formato de fonte amplamente utilizado desenvolvido pela Mozilla em colaboração com Type Supply, LettError e outras organizações. A diferença entre woff e woff2 é o algoritmo usado para comprimir os dados.
OpenType: Este é um formato para fontes de computador escaláveis desenvolvido pela Microsoft e Adobe que permite aos usuários acessar recursos adicionais em uma fonte. É amplamente utilizado nos principais sistemas operacionais.
tech(): Isso é usado para especificar a tecnologia do recurso de fonte. Isso é opcional.

Trabalhando com Fontes Externas

Definição: Uma fonte externa é um arquivo de fonte que não está incluído diretamente nos arquivos do seu projeto. Eles geralmente são hospedados em um servidor separado. To include these external fonts inside your project, you can use a link element or @import statement inside your CSS.
Google Fonts: Este é um serviço do Google que oferece uma coleção de fontes, muitas das quais são projetadas especificamente para desenvolvimento web.
Font Squirrel: Este é outro recurso popular que você pode usar para adicionar fontes externas personalizadas aos seus projetos.

Propriedade `text-shadow`

Definição: Esta propriedade é usada para aplicar sombras ao texto. Você precisa especificar o deslocamento X e Y, que representam a distância horizontal e vertical da sombra em relação ao texto, respectivamente. Esses valores são obrigatórios. Valores positivos do deslocamento X e deslocamento Y moverão a sombra para a direita e para baixo, respectivamente, enquanto valores negativos moverão a sombra para a esquerda e para cima.
Cor da Sombra: Você também pode personalizar a cor da sombra especificando este valor antes ou depois do deslocamento. Se a cor não for especificada, o navegador determinará a cor automaticamente, então geralmente é melhor defini-la explicitamente.
Blur Radius: The blur radius is optional but will make the shadow look a lot smoother and more subtle. O valor padrão do radius blur é zero. Quanto maior o valor, maior o desfoque, o que significa que a sombra fica mais clara.
Aplicando Múltiplas Sombras de Texto: O texto pode ter mais de uma sombra. As sombras serão aplicadas em camadas, da frente para trás, com a primeira sombra no topo.

Ferramentas de Contraste de Cor

WebAIM's Color Contrast Checker: Esta ferramenta online permite que você insira as cores de primeiro plano e plano de fundo do seu design e veja instantaneamente se elas atendem aos padrões do Web Content Accessibility Guidelines (WCAG).
TPGi Colour Contrast Analyzer: Esta é uma ferramenta gratuita de verificação de contraste de cores que permite checar se seus sites e aplicativos atendem aos padrões das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Esta ferramenta também inclui um recurso de Simulador de Daltonismo que permite ver como seu site ou aplicativo aparece para pessoas com problemas de visão de cores.

Árvore de Acessibilidade

A árvore de acessibilidade é uma estrutura usada por tecnologias assistivas, como leitores de tela, para interpretar e interagir com o conteúdo em uma página da web.

Função `max()`

A função max() retorna o maior de um conjunto de valores separados por vírgula:

img {
  width: max(250px, 25vw);
}

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels (since 250px is greater than 25% of that viewport width). Se a largura da viewport for maior que 1000 pixels, a largura da imagem será de 25vw. Isto porque 25vw é igual a 25% da largura da viewport.

Melhores Práticas com CSS e Acessibilidade

display: none;: Usar display: none; significa que leitores de tela e outras tecnologias assistivas não poderão acessar este conteúdo, pois ele não está incluído na árvore de acessibilidade. Portanto, é importante usar este método apenas quando você quiser remover completamente o conteúdo tanto da apresentação visual quanto da acessibilidade.
visibility: hidden;: Esta propriedade e valor ocultam o conteúdo visualmente mas o mantêm no fluxo do documento, significando que ele ainda ocupa espaço na página. Esses elementos também não serão mais lidos por leitores de tela porque terão sido removidos da árvore de acessibilidade.
Classe CSS .sr-only: Esta é uma técnica comum usada para esconder visualmente o conteúdo mantendo-o acessível para leitores de tela.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

scroll-behavior: smooth;: Esta propriedade e valor habilitam um comportamento de rolagem suave.
Recurso prefers-reduced-motion: Este é um recurso de mídia que pode ser usado para detectar a preferência de animação do usuário.

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

No exemplo acima, a rolagem suave é ativada se o usuário não tiver preferência de animação configurada em seu dispositivo.

Ocultando Conteúdo com Atributos HTML

Atributo aria-hidden: Usado para ocultar um elemento de pessoas que utilizam tecnologia assistiva como leitores de tela. Por exemplo, isso pode ser usado para ocultar imagens decorativas que não fornecem nenhum conteúdo significativo.
Atributo hidden: Este atributo é suportado pela maioria dos navegadores modernos e oculta o conteúdo tanto visualmente quanto da árvore de acessibilidade. Ele pode ser facilmente alternado com JavaScript.

<p aria-hidden>This paragraph is visible for sighted users, but is hidden from assistive technology.</p>
<p hidden>This paragraph is hidden from both sighted users and assistive technology.</p>

Problema de Acessibilidade do Atributo `placeholder`

Usar texto de espaço reservado não é bom para acessibilidade. Muitas vezes, os usuários confundem o texto de espaço reservado com um valor real de entrada - eles pensam que já há um valor no input.

Trabalhando com Diferentes Seletores de Atributos e Links

Definição: O seletor attribute permite que você direcione elementos HTML com base em seus atributos como os atributos href ou title.
Atributo title: Este atributo fornece informações adicionais sobre um elemento.

Segmentando Elementos com o Atributo `lang` e `data-lang`

Atributo lang: Este atributo é usado em HTML para especificar o idioma do conteúdo dentro de um elemento. Você pode querer estilizar elementos de forma diferente com base no idioma em que estão escritos, especialmente em um site multilíngue.
Atributo data-lang: Atributos de dados personalizados como o atributo data-lang são comumente usados para armazenar informações adicionais em elementos, como especificar o idioma usado dentro de uma seção específica de texto.

Trabalhando com o Seletor de Atributo, Elementos de Lista Ordenada e o Atributo `type`

Atributo type: Ao trabalhar com listas ordenadas em HTML, o atributo type permite especificar o estilo de numeração usado, como numérico, alfabético ou números romanos.

Trabalhando com Floats

Definição: Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo à esquerda ou à direita do seu contêiner. Quando isso acontece, o texto irá contornar esse conteúdo flutuante.
Limpando Floats: A propriedade clear é usada para determinar se um elemento precisa ser movido para baixo do conteúdo flutuante. Quando você tem múltiplos elementos flutuantes empilhados lado a lado, pode haver problemas de sobreposição e colapso nos layouts. Então um hack clearfix foi criado para corrigir esse problema.

Posicionamento Estático, Relativo e Absoluto

Posicionamento Estático: Este é o fluxo normal para o documento. Os elementos são posicionados de cima para baixo e da esquerda para a direita um após o outro.
Posicionamento Relativo: Isso permite que você use as propriedades top, left, right e bottom para posicionar o elemento dentro do fluxo normal do documento. Você também pode usar o posicionamento relativo para fazer com que elementos se sobreponham a outros elementos na página.
Posicionamento Absoluto: Isso permite que você retire um elemento do fluxo normal do documento, fazendo com que ele se comporte de forma independente dos outros elementos.

Posicionamento Fixo e Fixo Adesivo

Posicionamento Fixo: Quando um elemento é posicionado com position: fixed, ele é removido do fluxo normal do documento e colocado em relação à viewport, o que significa que permanece na mesma posição mesmo quando o usuário rola a página. Isso é frequentemente usado para elementos como cabeçalhos ou barras de navegação que precisam permanecer visíveis o tempo todo.
Sticky Positioning: This type of positioning will act as a hybrid between relative and fixed positioning. Inicialmente, o elemento se comporta como se estivesse posicionado relativamente, permanecendo dentro do fluxo do documento. No entanto, uma vez que o usuário rola o elemento além de um determinado ponto, ele "gruda" na viewport (geralmente no topo) e se comporta como se estivesse fixo. Isso é ótimo para criar elementos como barras de navegação fixas, que só se tornam fixas quando o usuário rola até uma determinada posição.

Trabalhando com a propriedade `z-index`

Definição: A propriedade z-index no CSS é usada para controlar a ordem de empilhamento vertical de elementos posicionados que se sobrepõem na página.

Design Responsivo para Web

Definição: O princípio central do design responsivo é a adaptabilidade – a capacidade de um site ajustar seu layout e conteúdo com base no tamanho da tela e nas capacidades do dispositivo em que está sendo visualizado.
Grades fluidas: Elas usam unidades relativas como porcentagens em vez de unidades fixas como pixels, permitindo que o conteúdo redimensione e se reorganize com base no tamanho da tela.
Imagens flexíveis: Elas são configuradas para redimensionar dentro de seus elementos contêineres, garantindo que não ultrapassem seus contêineres em telas menores.

Consultas de Mídia

Definição: Isso permite que os desenvolvedores apliquem estilos diferentes com base nas características do dispositivo, principalmente na largura do viewport.
Tipo de Mídia all: Isso é adequado para todos os dispositivos. Este é o padrão se nenhum tipo de mídia for especificado.
print Media Types: Isso é destinado a material paginado e documentos visualizados em uma tela no modo de visualização de impressão.
Tipos de Mídia screen: Isto é destinado principalmente para telas.
aspect-ratio: Isso descreve a proporção entre a largura e a altura da viewport.
orientation: Isso é usado para indicar se o dispositivo está em orientação landscape ou portrait.
resolution: Isso é usado para descrever a resolução do dispositivo de saída em pontos por polegada (dpi) ou pontos por centímetro (dpcm).
hover: Isso é usado para testar se o mecanismo de entrada primário pode pairar sobre elementos.
prefers-color-scheme: Isso é usado para detectar se o usuário solicitou um tema de cor claro ou escuro.
Media Queries e Operadores Lógicos: O operador and é usado para combinar múltiplas características de mídia, enquanto not e only podem ser usados para negar ou isolar media queries.

Pontos de Interrupção Comuns de Mídia

Definição: Pontos de interrupção de mídia são pontos específicos no design de um site onde o layout e o conteúdo se ajustam para acomodar diferentes tamanhos de tela. Existem alguns pontos de interrupção gerais que você pode usar para direcionar telefones, tablets e telas de desktop. Mas não é aconselhável tentar cobrir todos os tamanhos de tela possíveis para diferentes dispositivos.
Dispositivos Pequenos (smartphones): até 640px
Dispositivos Médios (tablets): 641px a 1024px
Dispositivos Grandes (desktops): 1025px e maiores

Abordagem mobile first

Definição: A abordagem mobile-first é uma filosofia de design e uma estratégia de desenvolvimento em design responsivo que prioriza a criação de sites para dispositivos móveis antes de projetar para telas maiores.

Propriedades Personalizadas CSS (Variáveis CSS)

Definição: Propriedades personalizadas do CSS, também conhecidas como variáveis CSS, são entidades definidas pelos autores de CSS que contêm valores específicos para serem reutilizados ao longo de um documento. Elas são um recurso poderoso que permite folhas de estilo mais eficientes, fáceis de manter e flexíveis. Propriedades personalizadas são particularmente úteis na criação de designs temáticos. Você pode definir um conjunto de propriedades para diferentes temas.

A Regra `@property`

Definição: A regra @property é um recurso poderoso do CSS que permite aos desenvolvedores definir propriedades personalizadas com maior controle sobre seu comportamento, incluindo como elas animam e seus valores iniciais.

@property --property-name {
  syntax: '<type>';
  inherits: true | false;
  initial-value: <value>;
}

--property-name: Este é o nome da propriedade personalizada que você está definindo. Como todas as propriedades personalizadas, deve começar com dois traços.

syntax: Isso define o tipo da propriedade, que pode ser coisas como <color>, <length>, <number>, <percentage> ou tipos mais complexos.

inherits: Isso especifica se a propriedade deve herdar seu valor do elemento pai.
initial-value: Isso define o valor padrão da propriedade.
Fallbacks: Ao usar a propriedade personalizada, você pode fornecer um valor de fallback usando a função var(), assim como faria com propriedades personalizadas padrão.

Noções básicas de CSS Grid

Definição: CSS Grid é um sistema de layout bidimensional usado para criar layouts complexos em páginas web. Grades terão linhas e colunas com espaços entre elas. Para definir um layout de grade, você deve definir a propriedade display como grid.
A unidade fr (Fracionária): Esta unidade representa uma fração do espaço dentro do contêiner da grade. Você pode usar a unidade fr para criar grades flexíveis.
Criando Espaços Entre Tracks: Existem três maneiras de criar espaços entre tracks no CSS grid. Você pode usar a propriedade column-gap para criar espaços entre colunas. Você pode usar a propriedade row-gap para criar espaços entre linhas. Ou você pode usar a propriedade abreviada gap para criar espaços entre linhas e colunas.
Função repeat(): Esta função é usada para repetir seções na listagem da faixa. Em vez de escrever grid-template-columns: 1fr 1fr 1fr; você pode usar a função repeat().
Grade Explícita: Você pode especificar o número de linhas ou faixas usando as propriedades grid-template-columns ou grid-template-rows.
Grid Implícito: Quando os itens são colocados fora da grade, então linhas e colunas são automaticamente criadas para esses elementos externos.
Função minmax(): Esta função é usada para definir os tamanhos mínimo e máximo para uma track.
Posicionamento Automático de Grid: O navegador posiciona automaticamente os itens usando o algoritmo de posicionamento automático. A propriedade grid-auto-flow controla esse comportamento, usando valores como row, column e dense para influenciar a direção do posicionamento e se lacunas vazias são preenchidas.
Posicionamento baseado em linhas: Todas as grades têm linhas. Para especificar onde o item começa em uma linha, você pode usar as propriedades grid-column-start e grid-row-start. Para especificar onde o item termina na linha, você pode usar as propriedades grid-column-end e grid-row-end. Você também pode optar por usar as propriedades abreviadas grid-column ou grid-row.
grid-template-areas: Esta propriedade é usada para fornecer um nome para os itens que você vai posicionar na grade.
Alinhamento: Use justify-items e align-items para controlar como os itens são alinhados dentro de suas áreas da grade. Use justify-self e align-self em itens individuais da grade para substituir o alinhamento definido no contêiner.

Noções básicas de Animação CSS

Definição: Animações CSS permitem que você crie efeitos dinâmicos e visualmente atraentes em páginas web sem a necessidade de JavaScript ou programação complexa. Elas fornecem uma maneira de transitar suavemente elementos entre diferentes estilos ao longo de uma duração especificada.
A Regra @keyframes: Esta regra define os estágios e estilos da animação. Ela especifica quais estilos o elemento deve ter em vários pontos durante a animação.
Propriedade animation: Esta é a propriedade abreviada usada para aplicar animações.
animation-name: Isso especifica o nome para a regra @keyframes a ser usada.
animation-duration: Isso define quanto tempo a animação deve levar para ser concluída.
animation-timing-function: Isso define como a animação progride ao longo do tempo (como ease, linear, ease-in-out).
animation-delay: Isso especifica um atraso antes de a animação começar.
animation-iteration-count: Isso define quantas vezes a animação deve se repetir.
animation-direction: Isso determina se a animação deve ser executada para frente, para trás ou alternadamente.
animation-fill-mode: Isso especifica como o elemento deve ser estilizado antes e depois da animação.
animation-play-state: Isso permite que você pause e retome a animação.

Acessibilidade e a Media Query `prefers-reduced-motion`

A Media Query prefers-reduced-motion: Uma das principais preocupações de acessibilidade com animações é que elas podem causar desconforto ou até danos físicos a alguns usuários. Pessoas com distúrbios vestibulares ou sensibilidade ao movimento podem sentir tontura, náusea ou dores de cabeça quando expostas a certos tipos de movimento na tela. A media query prefers-reduced-motion permite que desenvolvedores web detectem se o usuário solicitou animações ou efeitos de movimento mínimos no nível do sistema.