Tutorial de HTML e CSS para Iniciantes

Fundamentos do HTML

Introdução Linguagem HTML Tags HTML Atributos Estilos Estrutura Básica da Página Tags Básicas Parágrafos Cabeçalhos Texto em Negrito Texto em Itálico Listas Não Ordenadas Listas Ordenadas Links Links Internos Imagens Largura da Imagem Altura da Imagem Definindo Largura e Altura da Imagem Tabelas Largura e Altura da Tabela Células de Cabeçalho Practicum

Fundamentos do CSS

Introdução ao CSS Como trabalhar com CSS Valores para cor Quaisquer cores Largura e altura Alinhamento de texto Alinhamento de texto à direita Alinhamento de texto ao centro Alinhamento de texto à esquerda Alinhamento de texto justificado Prática em alinhamento de texto Negrito Itálico Tamanho da fonte Família da fonte Espaçamento entre linhas Valor do line-height sem unidades Propriedade abreviada font Recuo da primeira linha do texto Efeitos de texto Sublinhado Sobrelinhado Tachado Remoção de efeitos para texto Practicum

Seletores

Relações entre tags Herança de propriedades Agrupamento de seletores Propriedades comuns Seletores de descendentes Seletor filho Seletor de classe Tag span Tag div Agrupamento de classes Tag com classe específica Seletor de descendentes e classes Combinações complexas de seletor de descendentes e classes Erro de iniciante em seletor de descendentes Elemento com várias classes Seletor por id Seletor por id e classes Uso de id Seletor por várias classes Vários seletores em conjunto Erro de vários seletores Agrupamento de seletores complexos Erro no agrupamento Treinamento em combinação de seletores Prioridade de seletores Observação sobre conflito de propriedades Regras de especificidade Prioridade de seletores de descendentes Seletor irmão adjacente Seletor irmão geral Seletor universal Seletores de atributos Estados de links Nuances da sequência de estados de links Estados link e visited Uso comum dos estados de links Seletores complexos com links Link com classe Seleção de elementos finais Seleção por posição Seleção de filho único Seleção de elementos vazios Seleção por posição e tipo de elementos Negação not

Decoração

Cor de fundo Noções básicas de bordas Borda sólida Borda pontilhada Borda tracejada Borda em relevo Borda dupla Propriedade abreviada para borda Bordas para lados diferentes Arredondamento de bordas do bloco Arredondamento de bordas do fundo Criando um círculo Arredondamento para cantos diferentes Quatro valores Dois valores Três valores Arredondamento em porcentagem Criando um círculo com arredondamento em porcentagem Imagem de fundo Repetição da imagem de fundo Outras propriedades para o fundo Marcadores de listas ul Marcadores de listas ul quadrados Marcadores de listas ul em forma de círculos Marcadores de listas ul em forma de círculos preenchidos Ausência de marcadores para listas ul Marcadores de listas ol Algarismos romanos minúsculos para listas ol Algarismos romanos maiúsculos para listas ol Letras latinas minúsculas para listas ol Letras latinas maiúsculas para listas ol Letras gregas minúsculas para listas ol Números com zero à esquerda para listas ol

Modelo de Caixa

Margem externa margin Margens margin para lados diferentes Vários valores em margin Quatro valores em margin Dois valores em margin Três valores em margin Preenchimento interno padding Preenchimentos padding para lados diferentes Vários valores em padding Expansão de elementos Influência da borda na expansão de elementos Influência conjunta do padding e da borda na expansão de elementos Cancelamento da expansão de elementos Elementos de bloco Largura e altura de elemento de bloco Largura de elemento de bloco Altura de elemento de bloco Altura sem conteúdo Vários elementos de bloco lado a lado Elementos inline Largura e altura de elemento inline Vários elementos inline lado a lado Espaçamento entre elementos inline Definição do modelo de caixa Propriedade display Elementos inline-block Largura e altura de elemento inline-block Largura de elemento inline-block Altura de elemento inline-block Vários elementos inline-block lado a lado Alinhamento de elementos de bloco Alinhamento de elemento de bloco com margem esquerda Alinhamento de elemento de bloco com margem direita Alinhamento de elementos inline Centralização de elementos inline Centralização de vários elementos inline Alinhamento de elementos inline à direita Alinhamento de elementos inline-block Centralização de elementos inline-block Alinhamento de elementos inline-block à direita Elementos flex Altura do pai de elementos flex Largura do pai de elementos flex Pai inline-block Preenchimentos padding do pai Margens margin para descendentes Alinhamento de elementos flex Alinhamento de elementos flex ao centro Alinhamento de elementos flex no pai Alinhamento de elementos flex no pai com margens Alinhamento de elementos flex no pai com margens iguais

Posicionamento

Absoluto Relativo Absoluto em relação ao elemento pai Absoluto em relação ao absoluto Absoluto sem coordenadas Centralização via absolute Valores negativos no absolute Posicionamento fixo Bloco com largura total da tela Sobreposição de elementos no eixo Z Regulação da sobreposição de elementos no eixo Z Nuanças da aplicação de valor negativo no z-index

Flutuação (Floats)

Introdução à propriedade float A propriedade float e as tags Combinação de float e margin Combinação de float e padding Elementos flutuantes sob as tags Efeito dos floats no elemento pai Altura do elemento pai dos floats Texto no elemento pai dos floats Efeito de texto ao redor (Wrapping) Limpeza do float (Clearing) Uma div separada com clearfix Altura do elemento pai e clearfix A propriedade float para blocos A propriedade float e vários blocos A propriedade float e um elemento pai sem texto

Flexbox

Disposição em linha ou coluna Disposição dos elementos flex em linha invertida Disposição dos elementos flex em coluna Invertendo a coluna com elementos flex Eixos principal e transversal Alinhamento ao longo do eixo principal Alinhamento ao longo do eixo transversal Valor center da propriedade align-items Centralização sem altura dos blocos Centralização com blocos de alturas diferentes Valor stretch da propriedade align-items Prática de alinhamento ao longo dos eixos Alinhamento de um elemento individual Ordem dos blocos flex

Grids

Introdução aos Grids Trilhas e Linhas Exibição no Depurador Colunas Unidade fr fr fracionário Pixels e fr Porcentagens e fr Função repeat Valor auto Valor auto-fill Função minmax Valor auto-fit Linhas Propriedade Abreviada para Linhas e Colunas Combinando Linhas Combinando Colunas Combinações de União Sobreposição de Colunas Espaço entre Colunas Espaço entre Linhas Espaço entre Colunas e Linhas Peças

Layouts

Criação de Menu Layouts Simples de Site de Uma Coluna Esquema de Layout com Múltiplos Wrappers Blocos Estruturais do Site Esquema de Layout de Duas Colunas Esquema de Layout de Site de Três Colunas Tags Especiais para Elementos de Layout do Site Principais Tags de Layout Tag para Seções Prática em Layouts
↑
Português▼
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Nós usamos cookies para o funcionamento do site, análises e personalização. O processamento de dados é realizado de acordo com a Política de Privacidade.
aceitar todas configurar rejeitar