HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Cores RGB HEX HSL
Planos de fundo CSS
Cor de fundo Imagem de fundo fundo de repetição Anexo de fundo Abreviação de fundo
Bordas CSS
Fronteiras Largura da borda Cor da borda Lados da borda Abreviação de borda Bordas arredondadas
Margens CSS
Margens Margin Collapse
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Listas CSS

❮ Anterior Próximo ❯

Listas não ordenadas:

  • Café
  • Chá
  • Coca
  • Café
  • Chá
  • Coca

Listas ordenadas:

  1. Café
  2. Chá
  3. Coca
  1. Café
  2. Chá
  3. Coca

Listas HTML e Propriedades da Lista CSS

Em HTML, existem dois tipos principais de listas:

  • listas não ordenadas (<ul>) - os itens da lista são marcados com marcadores
  • listas ordenadas (<ol>) - os itens da lista são marcados com números ou letras

As propriedades da lista CSS permitem:

  • Definir marcadores de itens de lista diferentes para listas ordenadas
  • Definir marcadores de itens de lista diferentes para listas não ordenadas
  • Definir uma imagem como marcador de item da lista
  • Adicionar cores de fundo a listas e itens de lista

Marcadores de itens de lista diferentes

A list-style-typepropriedade especifica o tipo de marcador de item de lista.

O exemplo a seguir mostra alguns dos marcadores de itens de lista disponíveis:

Exemplo

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Nota: Alguns dos valores são para listas não ordenadas e alguns para listas ordenadas.

Uma imagem como marcador de item de lista

A list-style-imagepropriedade especifica uma imagem como o marcador de item da lista:

Exemplo

ul {
  list-style-image: url('sqpurple.gif');
}

Posicione os marcadores de itens da lista

A list-style-positionpropriedade especifica a posição dos marcadores de item de lista (pontos de bala).

"list-style-position: outside;" significa que os marcadores estarão fora do item da lista. O início de cada linha de um item de lista será alinhado verticalmente. Este é o padrão:

  • Café - Uma bebida preparada a partir de grãos de café torrados...
  • Chá
  • Coca

"list-style-position: inside;" significa que os marcadores estarão dentro do item da lista. Como faz parte do item da lista, fará parte do texto e empurrará o texto no início:

  • Café - Uma bebida preparada a partir de grãos de café torrados...
  • Chá
  • Coca

Exemplo

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Remover configurações padrão

A list-style-type:nonepropriedade também pode ser usada para remover os marcadores/balas. Observe que a lista também possui margem e preenchimento padrão. Para remover isso, adicione margin:0e padding:0a <ul> ou <ol>:

Exemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Lista - propriedade abreviada

A list-stylepropriedade é uma propriedade abreviada. Ele é usado para definir todas as propriedades da lista em uma declaração:

Exemplo

ul {
  list-style: square inside url("sqpurple.gif");
}

Ao usar a propriedade abreviada, a ordem dos valores da propriedade é:

  • list-style-type (se uma imagem de estilo de lista for especificada, o valor desta propriedade será exibido se a imagem por algum motivo não puder ser exibida)
  • list-style-position (especifica se os marcadores de item de lista devem aparecer dentro ou fora do fluxo de conteúdo)
  • list-style-image (especifica uma imagem como marcador de item da lista)

Se um dos valores de propriedade acima estiver ausente, o valor padrão para a propriedade ausente será inserido, se houver.

Lista de estilo com cores

Também podemos estilizar listas com cores, para torná-las um pouco mais interessantes.

Qualquer coisa adicionada à tag <ol> ou <ul> afeta a lista inteira, enquanto as propriedades adicionadas à tag <li> afetarão os itens individuais da lista:

Exemplo

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Resultado:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Mais exemplos


Este exemplo demonstra como criar uma lista com borda vermelha esquerda.


Este exemplo demonstra como criar uma lista com bordas sem marcadores.


Este exemplo demonstra todos os diferentes marcadores de item de lista em CSS.

Teste-se com exercícios

Exercício:

Defina o estilo de lista para listas não ordenadas como "quadrado".

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

Todas as propriedades da lista CSS

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ Anterior Próximo ❯