CSS LIST REDENT

Uma folha de estilo em cascata é um idioma usado para aprimorar o conteúdo atual criado através da linguagem HTML. Ambas as línguas trabalham juntas para formar uma página da web. HTML está preocupado em criar e projeta CSS todos os elementos do HTML. HTML tem muitos conteúdos que ajudam na criação de uma página da web. Em todos eles, o texto é o conteúdo básico usado por todas as páginas da web para exibir qualquer tipo de informação. Um dos conteúdos usados ​​para exibir o texto é listas. Neste artigo, falaremos sobre listas que possuem propriedade indentada por texto e como essa propriedade funciona na lista.

Listas de CSS:

A demonstração vertical dos dados HTML de forma ordenada ou não ordenada é representada através de um conteúdo HTML especial conhecido como listas. O conteúdo escrito dentro da lista é mencionado com as balas. Eventualmente, as listas são divididas em dois tipos principais: uma lista ordenada e não ordenada. Se quisermos dar numeração aos dados, é uma lista ordenada

. Os dados com qualquer tipo de bala sem números são uma lista não ordenada
. Estes dois
e
Só são responsáveis ​​por exibir o tipo de lista. A sintaxe simples usada para criar uma lista:


• dados



É um trecho de uma página da web com uma lista não ordenada. Você pode ver que todos os dados são representados formando uma pequena lista com balas que mostram que é uma lista não ordenada.

Propriedade e lista de recuo CSS:

Esta é a propriedade aplicada ao conteúdo HTML, principalmente no texto. É usado para deslocar o texto de seu ponto original para um lugar específico. Esta propriedade é usada para procurar a atenção do usuário em conteúdo específico. Você pode ter visto alguns sites com parágrafo a partir de uma distância em comparação com o título, tornando -o mais proeminente na frente do espectador. A sintaxe usada para aplicar esta propriedade é simples. Adicionamos apenas um parâmetro de comprimento a esta propriedade em pixels ou com unidades percentuais.

Indente de texto: comprimento;

Exemplo 1:
Este exemplo lida com a exibição de uma lista de itens que são gerados como uma lista normal e também uma segunda lista que contém itens que são deslocados de sua posição original. Vamos ver o código do corpo HTML para criar uma lista.
Um título é adicionado à página da web usando

tag de título. Então, usamos uma lista ordenada.



1. item


2. item



Esta lista ordenada criará dígitos de numeração padrão com os itens nas tags da lista. Outro título é declarado seguido por uma lista ordenada novamente. Uma classe de CSS é declarada dentro do segundo

.

Este é apenas o nome da classe CSS, é declarada na seção principal do código HTML. Sempre que esse nome de classe é usado em qualquer tag, todos os filtros ou efeitos mencionados nesta classe na declaração de estilo são aplicados.

Dentro da cabeça, um título é dado à página. Uma etiqueta de estilo é usada para aplicar os efeitos. Este tipo de estilo é conhecido como CSS interno.

Um alfabetizado de classe é declarado. Dentro da descrição da classe, não usamos a propriedade indentada de texto diretamente. De fato, podemos recuar os itens da lista usando a propriedade de preenchimento em qualquer dimensão. Portanto, como queremos que a lista seja exibida com seu conteúdo na direção certa, usaremos a propriedade de preenchimento para a esquerda para recuperar o texto da posição esquerda na direção certa.

A propriedade de preenchimento é a distância do conteúdo HTML da borda especificada do conteúdo externo ou da página HTML.

Feche todas as tags na cabeça. Salve o arquivo com a extensão HTML para criar uma página da web no navegador sempre que esse arquivo for aberto com um navegador. E quando o abrirmos no editor de texto, ele exibirá apenas o código.

Você verá que uma lista simples é exibida sem nenhum efeito de recuo, porque não aplicamos o nome da classe CSS a ela. Mas a segunda lista com um recuo personalizada é arrastada para a posição certa. Isto é por causa da propriedade de preenchimento.

Exemplo 2:
Neste exemplo, estamos usando o mesmo exemplo, mas com diferentes propriedades CSS para recuar o texto na lista. Dentro da etiqueta de estilo, a classe CSS tem uma propriedade de margem. Esta margem é a distância do conteúdo da fronteira da página. Nesse caso, temos texto HTML, para que o texto dentro da lista seja movido de acordo com o valor.

.CustomIndent
Margem -esquerda: -15px;

Neste exemplo, queremos que a lista esteja com a margem esquerda. Então, aceitamos o valor da margem para o lado esquerdo. O valor é tomado em um sinal negativo para voltar para trás. Se a distância tiver sido levada com um sinal positivo, a lista estará no lado direito da página.

Este estilo é novamente aplicado à segunda lista que criamos com uma classe de índice personalizada.

Agora, executaremos a página da web para ver o resultado. Você verá que a lista ordenada está presa no lado mais esquerdo da página.

Exemplo 3:
Este exemplo lida com o uso de uma lista não ordenada na página da web. Dentro da lista, pegamos 4 linhas de itens. Neste exemplo, não usaremos o estilo CSS através de uma aula. Não aplicaremos a propriedade de texto de recuo em toda a lista. A linha única da lista será efetuada através da propriedade indentada por texto. Isso será feito usando outra propriedade CSS que é uma propriedade 'Primeiro do tipo'.

Esta propriedade lida com a seleção da primeira ocorrência de um item no mesmo conteúdo HTML. Por exemplo, essa propriedade afetará apenas a primeira linha da linha, sem mencionar o nome de qualquer lista ou a classe dentro da tag.

Ao escrever a declaração de estilo na seção principal do código, usaremos o

1. Como queremos aplicar o efeito no LI.
   Li: Primeiro do tipo
   Indente de texto: 50px;
   Tipo de estilo de lista: estrela;
   

   O primeiro item será movido para a direita com uma distância especificada mencionada acima. E também, demos um número a esse item para a discriminação.

   Na execução, você observará que o primeiro item da lista é deslocado na direção certa e a bala também é chamada de número decimal.

   Conclusão

   Este artigo tem como objetivo descrever o objetivo e o uso da propriedade de recuperação na lista de conteúdo HTML. Começamos com uma breve explicação das listas e seus tipos. A propriedade de recuo pode ser aplicada a qualquer um dos tipos de lista. Depois disso, usamos três exemplos básicos, incluindo o efeito de preenchimento, a margem e o text, o recuo afeta a propriedade usando a primeira propriedade CSS do tipo. Todos esses exemplos mostram o recuo de toda a lista e uma única linha da lista também.