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,
- Propriedades CSS
- A propriedade list-style-type
- Listas CSS: Programa de Amostra
- Valores do marcador paraNa propriedade list-style-position
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úmero | 1,4,3 |
| Zero à esquerda decimal | 0 antes do número real | 01, 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 baixo | alfa, gama |
| Latim inferior | O marcador está em latim inferior | a, b, c, d |
| Latim superior | O marcador está em latim superior | A, B, C, D |
Continuando com este artigo sobre listas CSS
Listas CSS: Programa de Amostra
- Java
- Pitão
- Angular
- Java
- Pitão
- Angular
- Java
- Pitão
- Angular
- Java
- Pitão
- Angular
- Java
- Pitão
- Angular
Resultado
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
- Matemáticas
- Ciências Sociais
- Física
- Matemáticas
- Ciências Sociais
- 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ê.