Usando CSS para colocar elementos HTML

• Pode 18, 2024

As regras CSS permitem colocar elementos HTML exatamente onde você os deseja. Você pode ajustar como eles respondem a outros elementos ao seu redor ou até mesmo ocultá-los completamente. Aqui está um detalhamento das propriedades do canal CSS.

Exibição: esta propriedade define como um elemento é exibido. Definir a exibição como "none" oculta completamente o elemento, enquanto outros valores podem alterar a maneira como um elemento reage a outras propriedades e elementos. Por exemplo, divs são configurados para exibir como "bloco" por padrão, o que significa que ele atua como um objeto retangular, mas você pode usar "display: inline" para forçar um div a agir como um parágrafo. Ou você pode fazer o oposto e usar "display: block" para forçar um parágrafo a agir como uma div.

Posição: define como um elemento reage aos elementos ao seu redor. Os elementos usam "position: static" por padrão, o que significa que eles são exibidos na ordem em que aparecem no código HTML. "Posição: relativa" significa que a localização estática do elemento é calculada e depois compensada pelo que você indicar nas propriedades "superior" e "esquerda". Os outros elementos da página agem como se o elemento relativo ainda estivesse em sua localização estática. Os elementos "Position: absolute" ignoram sua localização estática, baseando sua posição apenas nos valores nas propriedades superior, esquerda, direita e inferior. Além disso, outros elementos ignoram esse elemento (por isso, se você não tomar cuidado, poderá acabar com algumas sobreposições confusas). "Posição: fixa" é semelhante a "posição: absoluta", exceto que o elemento manterá seu lugar, mesmo se o visitante rolar a página.

Visibilidade: decide se um elemento é exibido na página ou não. A diferença entre "display: none" e "visible: hidden" é que, no caso anterior, os outros elementos da página se comportam como se o objeto invisível não existisse; neste último, outros elementos manterão um lugar para o elemento oculto. Obviamente, a configuração padrão é "visível".

Flutuar: define se um elemento está em cascata à esquerda ou à direita de outros elementos (ou não em cascata, o que é o padrão). Essa propriedade é extremamente útil para posicionar os elementos relativos corretamente. Você deve definir uma largura para qualquer elemento flutuante ou ele não será exibido corretamente. Além disso, se você usar float para um elemento, provavelmente também desejará definir a propriedade para todos os elementos ao seu redor.

Limpar: Esta propriedade trabalha em conjunto com a propriedade "float". Ele decide como o elemento deixará outros elementos flutuarem ao seu redor - "clear: left" significa que nenhum outro elemento pode flutuar à sua esquerda; "clear: right" bloqueia o lado direito e "clear: both" significa que nenhum elemento pode flutuar em nenhum dos lados. A configuração padrão é "clear: none" (ou seja, outros elementos podem flutuar nos dois lados).

Instruções De Vídeo: Tutorial Como Centrar Vertical y Horizontalmente con CSS (Pode 2024).