К содержанию

Tutorial de HTML e CSS para Iniciantes

Um tutorial simples de criação de páginas web com as linguagens HTML e CSS para iniciantes, com teoria detalhada e um livro de exercícios.

Fundamentos do CSS

Fundamentos da linguagem CSS

Como trabalhar com CSS

Palavras-chave para cores em CSS

Qualquer cor em CSS

Largura e altura de elementos em CSS

Alinhamento de texto em CSS

Alinhamento de texto à direita em CSS

Alinhamento de texto ao centro em CSS

Alinhamento de texto à esquerda em CSS

Alinhamento de texto simultaneamente à direita e à esquerda em CSS

Prática com alinhamento de texto em CSS

Espessura do texto em CSS

Itálico em CSS

Tamanho da fonte em CSS

Tipo de fonte em CSS

Espaçamento entre linhas em CSS

O significado de line-height sem unidades em CSS

A propriedade abreviada font em CSS

Recuo de parágrafo em CSS

Efeitos de texto em CSS

Sublinhando texto em CSS

Sublinhado superior de texto em CSS

Texto tachado em CSS

Remoção de efeitos para texto em CSS

Prática com Propriedades CSS Básicas

Seletores

Relacionamentos entre tags em HTML

Herança de propriedades CSS

Agrupamento de seletores em CSS

Propriedades comuns ao agrupar seletores em CSS

Seletor de descendentes em CSS

Seletor filho em CSS

Classes de elementos em CSS

A tag span para trechos de texto em HTML

Tag div para agrupar tags em HTML

Agrupamento de classes em CSS

Tag com classe definida em CSS

Seletor de descendentes e classes em CSS

Combinações complexas de seletores descendentes e classes em CSS

Erro de iniciante em seletor de descendentes

Elemento com múltiplas classes CSS

Selecionando elementos por id único em CSS

Seletor por id e Classes CSS

Uso de id em CSS

Selecionando elementos por múltiplas classes em CSS

Vários seletores combinados em CSS

Erro ao usar vários seletores CSS

Agrupamento de seletores complexos em CSS

Erro ao agrupar seletores CSS complexos

Prática com combinações de seletores CSS

Especificidade de Seletores CSS

Observação sobre conflito de propriedades CSS

Regras de Especificidade em CSS

Prioridade de seletores descendentes em CSS

Seletor adjacente em CSS

Seletor de Irmãos Geral em CSS

Seletor Universal em CSS

Seletores de atributo em CSS

Estados dos links em CSS

Nuances da sequência de estados de links em CSS

Estados de links link e visited em CSS

Uso comum dos estados de link em CSS

Seletores complexos com estados de links em CSS

Link com classe em CSS

Seleção de elementos finais em CSS

Seleção por posição de elementos em CSS

Selecionando o Único Filho em CSS

Selecionando elementos vazios em CSS

Seleção por posição e tipo de elementos em CSS

Seletor de negação em CSS

Decoração

Definindo a cor de fundo em CSS

Noções básicas de trabalho com bordas em CSS

Borda sólida em CSS

Borda Pontilhada em CSS

Borda tracejada em CSS

Borda em relevo em CSS

Borda dupla em CSS

Propriedade abreviada para borda em CSS

Bordas para lados individuais em CSS

Arredondamento de bordas de bloco em CSS

Cantos arredondados de fundo em CSS

Como criar um círculo em CSS

Cantos arredondados diferentes para cantos em CSS

Quatro valores de border-radius para cantos diferentes em CSS

Dois valores de arredondamento para cantos diferentes em CSS

Três valores de arredondamento para cantos diferentes em CSS

Cantos arredondados em porcentagem no CSS

Criando um círculo com bordas arredondadas em porcentagem no CSS

Imagem de fundo em CSS

Repetição de imagem de fundo em CSS

Outras propriedades para fundo em CSS

Trabalhando com marcadores de listas ul em CSS

Marcadores de lista quadrados ul em CSS

Marcadores de lista ul em forma de círculos em CSS

Trabalhando com marcadores de listas ul em CSS

Remoção de marcadores de listas ul em CSS

Trabalhando com marcadores de lista ol em CSS

Algarismos romanos minúsculos para listas ol em CSS

Algarismos romanos maiúsculos para listas ol em CSS

Letras latinas minúsculas para listas ol em CSS

Letras latinas maiúsculas para listas ol em CSS

Letras gregas minúsculas para listas ol em CSS

Números com zero à frente para listas ol em CSS

Modelo de Caixa

Trabalhando com margens margin em CSS

Margens para lados diferentes em CSS

Vários valores na propriedade margin em CSS

Os quatro valores da propriedade margin em CSS

Dois valores na propriedade margin em CSS

Três valores na propriedade margin em CSS

Trabalhando com preenchimento (padding) em CSS

Preenchimento (padding) para lados diferentes em CSS

Vários valores na propriedade padding em CSS

Trabalhando com preenchimento (padding) em CSS

A influência da borda na expansão de elementos em CSS

Influência do padding e da borda na expansão de elementos em CSS

Cancelando a expansão de elementos em CSS

Características dos elementos de bloco em CSS

Largura e altura de um elemento de bloco em CSS

Largura de um elemento de bloco em CSS

Altura de um elemento de bloco em CSS

Altura de um elemento de bloco sem conteúdo em CSS

Vários elementos de bloco lado a lado em CSS

Características dos elementos inline em CSS

Largura e altura de um elemento inline em CSS

Vários elementos em linha lado a lado em CSS

Margens entre elementos inline em CSS

Definição do modelo de caixa de tags HTML

Trabalhando com a propriedade display em CSS

Características dos elementos inline-block em CSS

Largura e altura de um elemento inline-block em CSS

Largura de um elemento inline-block em CSS

Altura do elemento inline-block em CSS

Vários elementos inline-block lado a lado em CSS

Alinhamento de elementos de bloco em CSS

Alinhamento de elemento de bloco com recuo à esquerda em CSS

Alinhamento de elemento de bloco com margem direita em CSS

Alinhamento de elementos inline em CSS

Centralizando Elementos Inline em CSS

Centralizando Múltiplos Elementos Inline

Alinhamento de elementos inline à direita em CSS

Alinhamento de elementos inline-block em CSS

Centralização de elementos inline-block em CSS

Alinhamento de elementos inline-block à direita em CSS

Elementos Flex em CSS

Altura do elemento pai de flex em CSS

Largura do elemento pai flex em CSS

Contêiner pai inline-block de elementos flex em CSS

Preenchimento (padding) do elemento pai de itens flex em CSS

Margens de afastamento em elementos filhos no CSS

Alinhamento de elementos flex em CSS

Alinhando elementos flex no centro em CSS

Alinhamento de elementos flex no elemento pai em CSS

Alinhamento de elementos flex em relação ao pai com margens

Alinhamento de elementos flex no elemento pai com espaçamentos iguais

Posicionamento

Posicionamento absoluto de elementos em CSS

Posicionamento relativo de elementos em CSS

Posicionamento relativo ao elemento pai em CSS

Posicionamento relativo ao pai absoluto em CSS

Posicionamento absoluto sem coordenadas em CSS

Centralização através de absolute em CSS

Valores negativos no posicionamento em CSS

Posicionamento fixo em CSS

Bloco com largura total da tela em CSS

Sobreposição de Elementos no Eixo Z em CSS

Controle da sobreposição de elementos no eixo Z em CSS

Nuances da aplicação do valor negativo de z-index em CSS

Flutuação (Floats)

Introdução à propriedade float em CSS

Penetração de elementos flutuantes através de tags em CSS

Combinação de float e margin em CSS

Combinação de float e padding em CSS

Elementos flutuantes sob tags em CSS

O efeito de floats no elemento pai no CSS

Altura do pai de floats em CSS

Texto no pai de floats em CSS

Fluxo em CSS

Cancelando a flutuação com a propriedade clear em CSS

Uma div separada com clearfix em CSS

Clearfix e altura do elemento pai em CSS

Propriedade float para blocos em CSS

Propriedade float e vários blocos em CSS

Propriedade float e elemento pai sem texto em CSS

Flexbox

Disposição de elementos flex em linha ou coluna em CSS

Posicionando elementos flex em uma linha invertida em CSS

Disposição de elementos flex em coluna no CSS

Invertendo uma coluna com elementos flex em CSS

Eixo Principal e Eixo Transversal em Flexboxes no CSS

Alinhamento de elementos flex ao longo do eixo principal em CSS

Alinhamento de itens flex ao longo do eixo transversal em CSS

Significado do valor center da propriedade align-items em CSS

Centralização sem altura de blocos em CSS

Centralização de blocos com alturas diferentes em CSS

Significado do valor stretch da propriedade align-items em CSS

Prática de alinhamento ao longo dos eixos em CSS

Alinhamento de um elemento individual no modelo flex em CSS

Ordem dos blocos flex em CSS

Grids

Introdução aos CSS Grids

Trilhas e linhas em CSS Grid

Exibição de Grids no Depurador do Navegador

Número e largura de colunas em grades CSS

Unidade fr em CSS Grids

Unidades fracionárias fr em Grids CSS

Pixels e unidades fr em CSS Grid

Porcentagens e unidades fr em Grids CSS

Função repeat em CSS Grid

O significado de auto em CSS Grid

Significado de auto-fill em grades CSS

Função minmax em Grids CSS

Significado de auto-fit em CSS Grid

Número e largura de linhas em grades CSS

Abreviação para linhas e colunas em Grids CSS

Unindo linhas em grades CSS

Unindo colunas em grades CSS

Combinações de mesclagem de linhas e colunas em CSS Grid

Sobreposição de Colunas em Grids CSS

Espaçamento entre colunas em grades CSS

Espaçamento entre linhas em grades CSS

Espaçamento entre colunas e linhas em Grids CSS

Layout de Blocos em Grid no CSS

Layouts

Criação de menu em CSS

Layouts de site de coluna única simples em CSS

Esquema de layouts com múltiplos wrappers em CSS

Blocos Estruturais de um Site em HTML

Layout de duas colunas para site em CSS

Esquema de layout de três colunas para site em CSS

Tags especiais para elementos de layout de site em HTML

Principais tags de layout em HTML

Tag para seções em HTML

Prática com layouts em HTML e CSS