Tipo de estilo da lista CSS

Uma folha de estilo em cascata contém a parte do código responsável por adicionar os efeitos e propriedades ao conteúdo desenvolvido pela HTML. HTML e CSS são usados ​​para criar uma página estática ou um site dinâmico. CSS contém vários efeitos, um deles é uma propriedade de estilo que é aplicada à lista de HTML. Esta propriedade é para aprimorar os itens da lista, que provavelmente é texto, adicionando os efeitos nas balas. Hoje, nossa discussão é sobre o tipo de estilo da lista. No artigo, mencionamos alguns exemplos para estilizar as balas da lista.

Um código HTML contém duas partes básicas: e . A parte da cabeça contém a tag e a tag do título se usarmos um CSS interno. A tag contém as tags de todo o conteúdo que queremos criar na página da web. A tag da lista também está escrita dentro da etiqueta corporal.

Da mesma forma, o código CSS é categorizado como CSS inline, interno e externo. O efeito que está escrito com a tag dentro da tag de conteúdo é o CSS embutido. O que está escrito dentro da seção da cabeça HTML é o CSS interno. E o terceiro, o CSS externo, é declarado em outro arquivo de editor de texto com um “.Extensão CSS ”.

O que é uma lista HTML?

A linguagem de marcação de hipertexto cria conteúdo para formar um site, incluindo texto, imagens, tabelas, formas, parágrafos, etc. O texto é o bloco de construção de qualquer site. Isso pode ser escrito de várias maneiras e uma abordagem é a “lista” html. A lista é a demonstração vertical de um texto junto com ou sem balas. A lista HTML aparece da mesma maneira que criamos uma lista manual. Uma lista é dividida em outras categorias. Quando o texto é representado com números, é feito por uma lista ordenada

. Se a representação for através de qualquer símbolo ou forma, é uma lista não ordenada
. A sintaxe usada para criar uma lista é mencionada da seguinte maneira:


• item 1


• Item2



A sintaxe da lista não ordenada é dada no exemplo anterior. As primeiras tags de abertura e fechamento da lista são declaradas. Essas tags externas decidem se a lista é ordenada ou não ordenada. Dentro de ambas as tags, o

• A tag é usada para adicionar os nomes dos itens que queremos fazer parte da lista.

  Propriedade de estilo de lista

  A propriedade de estilo da lista CSS são os efeitos aplicados às balas da lista. Existem vários tipos de propriedades de estilo de listas. Alguns deles são explicados aqui. A sintaxe básica é escrita como:

  Vamos implementar e explicar o funcionamento desta propriedade.

  Tipo de estilo de lista para lista não ordenada

  Primeiro, aplicamos alguns efeitos às balas da lista não ordenada. Essas balas são símbolos e formas. Por exemplo, círculos, quadrados, discos, etc.

  Valor da propriedade: disco

  Criamos uma página da web simples na qual um título é dado dentro da parte do corpo. Usamos uma tag de parágrafo para escrever algum texto. Então, uma lista não ordenada é criada como descrevemos anteriormente. A mesma sintaxe segue. Dentro de

  Tag, declaramos o nome da classe que pertence ao CSS interno. Todos os efeitos mencionados dentro da classe são aplicados a esta lista aqui:

  Dentro da tag, três itens da lista são declarados. Feche a lista e a etiqueta externa. Isso é tudo da seção corporal do código HTML.

  Agora, levamos para a seção da cabeça. Dentro da cabeça, damos um título à página. Então, a tag de estilo CSS interna é declarada. Dentro dele, uma classe "sub", o nome que é usado dentro da tag não ordenada, é declarado. Todos os efeitos são aplicados dentro desta classe.

  Os IDs e aulas são criados para usar os efeitos coletivamente que você deseja aplicar. Em seguida, use esses nomes dentro das tags onde queremos aplicar esses efeitos.

  .sub
  Tipo de estilo de lista: disco;
  

  O estilo de lista que é usado aqui é um disco. Se não usarmos esta propriedade na criação da lista, as balas padrão formadas são em forma de disco.

  Outros efeitos estão no cabeçalho. A cor da fonte é adicionada ao título. Além do corpo, a cor do fundo e a cor da fonte são aplicadas.

  Salve o código no editor de texto com uma extensão HTML para criar uma página da web a ser executada no navegador. Ao usar esta extensão, você verá que o símbolo do arquivo do editor de texto que você salvou é alterado no ícone do navegador. É a indicação de que esta é uma página da web.

  Você verá sobre a execução que a página da web criada contém a lista dos nomes dos sujeitos e esses itens são declarados através das balas de disco.

  Valor da propriedade: círculo

  Depois de usar o valor da bala de disco padrão, usamos outra forma para estilizar uma lista não ordenada. Desta vez, a propriedade de estilo contém a classe com o tipo de círculo de estilo de lista. Enquanto o restante do código, seja a parte da cabeça ou a seção do corpo, é a mesma. Apenas faça alterações no tipo de estilo para ver os efeitos funcionando.

  Tipo de lista do tipo: círculo;

  Código CSS:	Saída:

  Feche a etiqueta de estilo e execute o código no navegador. Você verá que as balas de disco preenchidas são substituídas pelas balas em forma de círculo.

  Tipo de estilo de lista para lista ordenada

  Agora, usamos os valores numéricos e alfabéticos para aplicar os efeitos nas balas da lista ordenada.

  Valor da propriedade: decimal

  Quanto à lista ordenada a ser criada, usamos qualquer valor numérico. O que normalmente é usado na contagem manual ou numeração é a notação decimal. Iremos para a numeração decimal primeiro. Todo o código HTML é o mesmo e o código CSS é entretido apenas pelo nome da bala que é referido como "decimal". O efeito do tipo de estilo da lista mencionado na classe CSS é o decimal.

  Tipo no estilo de lista: decimal;

  Código CSS	Saída:

  Após a execução, você verá que as balas são alteradas de um círculo para os números decimais.

  Valor da propriedade: Baixo grego
  A propriedade de estilo da lista é nomeada em Baixo Grega para aplicar esse efeito e modificar a propriedade de estilo da lista da lista.

  Código CSS	Saída:

  Valor da propriedade: nenhum

  Também podemos ocultar as balas da lista usando as palavras -chave "nenhuma" na propriedade Tipo de estilo de estilo de lista.

  Código CSS	Saída

  Valor da propriedade: Georgiano

  O último, mas não o menos importante, o valor usado é o valor "georgiano" que é adicionado às balas da lista.

  Código CSS	Saída

  Conclusão

  Propriedade do estilo da lista CSS é o efeito aplicado nas balas da lista se a lista é ordenada ou não ordenada. Começamos com uma simples introdução de idiomas HTML e CSS, incluindo sua declaração de tags. Em seguida, elaboramos a estrutura das listas de HTML junto com seus tipos. A propriedade do tipo de estilo de lista é elaborada e implementamos alguns estilos para ver como essa propriedade funciona. Usamos alguns exemplos para as listas ordenadas e não ordenadas separadamente.