CSS deixou a propriedade

Uma linguagem CSS tem vários efeitos a serem aplicados como um código no conteúdo HTML declarado para formar uma página da web. Uma linguagem HTML cria o design dos objetos e CSS e adiciona estilo a eles aplicando vários efeitos e valores. Uma das propriedades do CSS é o alinhamento e a direção do conteúdo HTML. Neste artigo, falaremos sobre uma das propriedades que são comumente usadas no alinhamento dos objetos HTML.

Propriedade esquerda

CSS oferece o alinhamento do conteúdo HTML em cada direção. Um deles é a propriedade esquerda. O nome indica que se refere à direção esquerda, e essa direção está ligada ao alinhamento horizontal. Se um objeto html não receber nenhuma propriedade de posição, esta propriedade esquerda não será aplicada a esse objeto. Em outras palavras, esta propriedade não é para objetos que não estão posicionados.

Sintaxe
A sintaxe básica da propriedade esquerda pode ser:
Esquerda: Comprimento | Porcentagem | Auto | Inicial | Herito;

O valor pode ser de cinco tipos. Explicaremos cada tipo de valor da propriedade esquerda:

• Comprimento: Esta variável contém o valor da propriedade CSS deixada de qualquer conteúdo. O valor pode ser um número positivo ou negativo.
• Porcentagem: a propriedade de largura do objeto HTML é tomada na unidade percentual.
• AUTO: Esta propriedade CSS é usada para definir o valor desta propriedade como padrão.
• Inicial: este valor gira a propriedade esquerda para seu valor original por padrão ou inicialmente quando o objeto foi declarado antes de qualquer transformação ser aplicada a ele.
• Herdar: herdar refere -se à herança. O valor de uma propriedade esquerda é definido dos pais do objeto HTML.

Agora, usamos um trecho de formas que estão flutuando aleatoriamente na página da web. Todos esses blocos são div, um recipiente criado no corpo HTML. Cada bloco está em sua direção, alguns se sobrepondo. Enquanto alguns blocos são exibidos independentemente. Cada um deles é posicionado por esta propriedade esquerda através do CSS usando os valores relativos ou absolutos. Discutiremos a criação desses tipos de formas nas páginas da web.

Trabalhando da propriedade CSS deixada

Algumas terminologias básicas que são essenciais para a implementação da propriedade esquerda são descritas da seguinte forma:

• Propriedade esquerda na posição relativa
  Esta propriedade é aplicada no lado esquerdo ou na borda esquerda do conteúdo e é por isso que se move para o lado direito de sua forma original. Se esse valor for considerado em um valor positivo, a caixa html ou qualquer forma será movida para a direita. A posição relativa de qualquer objeto html é a direção que depende dos outros itens em seu redor.
• Propriedade esquerda na posição absoluta
  Para os elementos que têm o valor absoluto para o posicionamento, esta propriedade move o lado esquerdo do elemento para o lado direito do corpo. O elemento é deslocado de sua posição inicial. O valor absoluto é o valor do elemento de acordo com o fundo.
• Propriedade estática
  Esta propriedade não afeta o objeto. Se aplicá -lo ao elemento ou não, o objeto HTML permanece intacto.

Exemplo 1:
Primeiro, considere a seção corporal que contém o conteúdo HTML. A cor do fundo é alterada para aprimorar as cores dos divs que criamos. Uma classe Div pai é criada e mais duas divs também são declaradas dentro da div, formando dois filhos de crianças. Fechar o pai Div. Adicione duas divs.

Cada 5 divs são mencionados com as classes CSS. Essas classes são declaradas dentro da seção principal do código HTML.

< div class = :sample1" >comprimento

Após o código do corpo, encontraremos a seção principal do código. Primeiro, a cor da fonte do corpo é ajustada para torná -la facilmente visível no fundo preto.

Agora, falamos sobre o CSS interno que usamos aqui. Cada classe é explicada aqui para adicionar efeitos à div. Essas classes se aplicam mais do que efeitos únicos na divindade coletivamente por vez, portanto, o CSS interno é preferível que o CSS embutido. As cinco propriedades adicionadas a cada classe são o tipo de posição, a direção esquerda e o tamanho da div que é aplicada que contém a largura e a altura em pixels. Uma borda é aplicada ao divto, faça uma forma. Todas essas classes têm as mesmas propriedades, mas todas elas têm valores diferentes.

.amostra1
Posição: Absoluto;
Esquerda: 109px;
Largura: 200px;
Altura: 100px;
borda: 5px laranja sólida;

Falando sobre esta aula de amostra1, a posição é tomada como absoluta. Isso é aplicado para cada classe, o que significa que toda div é declarada seguindo os valores e não dependendo da outra div, que é declarada em seus arredores. A propriedade esquerda é aplicada em pixels.

As classes Sample2 e Sample3 são aplicadas com cores vermelhas e verdes.

.Sample2
Esquerda: 47%;

A propriedade esquerda da classe Sample2 é fornecida em porcentagem. Para a classe Sample3, definimos a direção automática, o que significa que ela é exibida de acordo com o número de suas voltas no código HTML.

.Amostra3
Esquerda: Auto;

A classe Sample4 contém a borda rosa e a propriedade esquerda é definida como inicial.

.amostra4
Esquerda: inicial;

Para a última div, assumimos o valor esquerdo como herdado. Todos esses efeitos são compreensíveis quando executamos o código.

.Sample5
Esquerda: herdar;

Cada div tem uma cor diferente e tamanho diferente. Agora, salve o código com a extensão HTML. Executar o arquivo no navegador para ver os resultados.

Você verá que todos os cinco divs são exibidos em diferentes locais. Os recipientes da propriedade inicial e herdada da esquerda desabaram porque têm as mesmas dimensões.

Exemplo 2:

Considere a imagem anterior criada usando duas tags div e declarando os nomes das classes como fizemos no exemplo anterior. Vamos considerar as tags CSS apenas. A divisão roxa contém a posição como absoluta. A propriedade de tamanho que contém a largura e a altura também é aplicada a ela.

A propriedade esquerda é dada em pixels.

.Dem-Purple
Posição: Absoluto;
Esquerda: 4px;

A segunda div é exibida dentro da divisão roxa externa. Isso ocorre devido à propriedade de posição que é considerada relativa, então essa div é exibida de acordo com o circundante ou a divisão externa.

.Dem-Lightgreen
Posição: relativa;
Esquerda: 8px;

O deslocamento da div interior está de acordo com a divisão externa.

Conclusão

Na propriedade CSS deixada, pretendemos descrever o funcionamento desse recurso direcional no conteúdo HTML. Existem duas propriedades básicas em CSS que estão ligados um ao outro para o alinhamento de qualquer conteúdo HTML: a posição e a propriedade esquerda. A propriedade de posição pode ser absoluta, relativa ou estática. Enquanto a propriedade esquerda pode ser automática, herdar ou valor inicial, em pixels ou porcentagem. Neste artigo, explicamos o uso de todos esses efeitos separadamente, aplicando -os à div e usando o efeito relativo usando uma div dentro do outro.