Como utilizar melhor as listas CSS?



Este artigo apresentará as listas CSS e ajudará você a entender como o estilo da lista CSS funciona com uma demonstração.

As listas CSS são muito úteis para alcançar um conjunto de pontos numerados ou com marcadores. Este artigo mostrará como controlar o tipo, posição, estilo de usando CSS. As dicas a seguir serão abordadas aqui,

Então, vamos começar,





Listas CSS

Propriedades CSS

Existem cinco propriedades CSS diferentes nas quais você pode usá-lo para controlar listas:

  • Tipo de lista: nos permite controlar a forma ou a aparência do marcador.
  • List-style-position: especifica que um ponto longo é necessário para quebrar para uma segunda linha ou deve se alinhar com a primeira linha ou começar com o marcador.
  • Imagem em estilo de lista: especifica que uma imagem para o marcador deve ser adicionada ou tornada mais atraente em vez de marcadores ou pontos numerados.
  • Estilo de lista: mostra a abreviação para as propriedades anteriores.
  • Deslocamento do marcador: especifica a distância entre o marcador e o texto inserido na lista.

Aqui, as listas comumente usadas são: list-style-type e list-style-position. É explicado abaixo



def __init __ (self) python

Continuando com este artigo sobre listas CSS

A propriedade list-style-type

Na propriedade list-style-type, permite que você controle a forma e o estilo dos marcadores ou marcador na caixa de lista não ordenada. No caso de lista ordenada, ele está numerando os caracteres.

Tabela abaixo que representa para as listas não ordenadas:



Valor Descrição
Nenhum N / D
Disco É preenchido no círculo. (O padrão)
Círculo É um círculo vazio.
Quadrado Está preenchido no quadrado.

Abaixo a tabela que representa para as listas ordenadas:

Valor Descrição Exemplo
Decimal É um número1,4,3
Zero à esquerda decimal 0 antes do número real01, 04, 03
Alfa inferior São caracteres alfanuméricos minúsculos.a, b, c, d
Alfa superior São caracteres alfanuméricos maiúsculos.A, B, C, D
Romano inferior São numerais romanos minúsculos.i, ii, iii, iv, v
Romano superior É numeração romana maiúscula.I, II, III, IV, V
Grego baixo O marcador está em grego baixoalfa, gama
Latim inferior O marcador está em latim inferiora, b, c, d
Latim superior O marcador está em latim superiorA, B, C, D

Continuando com este artigo sobre listas CSS

Listas CSS: Programa de Amostra

 
  • Java
  • Pitão
  • Angular
  • Java
  • Pitão
  • Angular
  1. Java
  2. Pitão
  3. Angular
  1. Java
  2. Pitão
  3. Angular
  1. Java
  2. Pitão
  3. Angular

Resultado

Saída - Listas CSS - Edureka

Continuando com este artigo sobre listas CSS

A propriedade list-style-position

Valores de marcador para propriedade de posição em estilo de lista

Na propriedade list-style-position mostra que o marcador deve aparecer dentro ou fora da caixa que contém os marcadores. Isso pode ter um dos dois valores:

Valor Descrição
Nenhum N / D
Dentro Neste caso, se o texto for na segunda linha, então o texto será quebrado abaixo do marcador. Ele também mostrará onde o texto teria começado se as listas tivessem um vale fora.
lado de fora Neste caso, se o texto for para a segunda linha, o texto será alinhado com o início da primeira linha.

Exemplo:

 
  • Matemáticas
  • Ciências Sociais
  • Física
  • Matemáticas
  • Ciências Sociais
  • Física
  1. Matemáticas
  2. Ciências Sociais
  3. Física
  1. Matemáticas
  2. Ciências Sociais
  3. Física

Resultado

Isso nos leva ao final deste artigo sobre listas de CSS.

Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Tem alguma questão para nós? Mencione isso na seção de comentários do artigo e entraremos em contato com você.