CSS - Listas
As listas são muito úteis para transmitir um conjunto de pontos numerados ou marcadores. Este capítulo ensina como controlar o tipo, a posição, o estilo da lista, etc., usando CSS.
Temos as seguintes cinco propriedades CSS, que podem ser usadas para controlar listas -
o list-style-type permite que você controle a forma ou aparência do marcador.
o list-style-position especifica se um ponto longo que termina em uma segunda linha deve se alinhar com a primeira linha ou começar abaixo do início do marcador.
o list-style-image especifica uma imagem para o marcador em vez de um marcador ou número.
o list-style serve como um atalho para as propriedades anteriores.
o marker-offset especifica a distância entre um marcador e o texto na lista.
Agora, veremos como usar essas propriedades com exemplos.
A propriedade list-style-type
A propriedade list-style-type permite controlar a forma ou o estilo do marcador (também conhecido como marcador) no caso de listas não ordenadas e o estilo dos caracteres de numeração em listas ordenadas.
Aqui estão os valores que podem ser usados para uma lista não ordenada -
| Sr. Não. | Valor e descrição |
|---|---|
| 1 | none N / D |
| 2 | disc (default) Um círculo preenchido |
| 3 | circle Um círculo vazio |
| 4 | square Um quadrado preenchido |
Aqui estão os valores, que podem ser usados para uma lista ordenada -
| Valor | Descrição | Exemplo |
|---|---|---|
| decimal | Número | 1,2,3,4,5 |
| decimal à esquerda | 0 antes do número | 01, 02, 03, 04, 05 |
| alfa inferior | Caracteres alfanuméricos minúsculos | a, b, c, d, e |
| alfa superior | Caracteres alfanuméricos maiúsculos | A, B, C, D, E |
| romano inferior | Números romanos minúsculos | i, ii, iii, iv, v |
| romano superior | Numerais romanos maiúsculos | I, II, III, IV, V |
| grego inferior | O marcador é grego inferior | alfa, beta, gama |
| latim inferior | O marcador é latim inferior | a, b, c, d, e |
| latim superior | O marcador é latim maiúsculo | A, B, C, D, E |
| hebraico | O marcador é uma numeração hebraica tradicional | |
| armênio | O marcador é a numeração armênia tradicional | |
| georgiano | O marcador é a numeração tradicional da Geórgia | |
| cjk-ideográfico | O marcador são números ideográficos simples | |
| hiragana | O marcador é hiragana | a, i, u, e, o, ka, ki |
| katakana | O marcador é katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | O marcador é hiragana-iroha | eu, ro, ha, ni, ho, ele, para |
| katakana-iroha | O marcador é katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade list-style-position
A propriedade list-style-position indica se o marcador deve aparecer dentro ou fora da caixa que contém os marcadores. Pode ter um dos dois valores -
| Sr. Não. | Valor e descrição |
|---|---|
| 1 | none N / D |
| 2 | inside Se o texto for para uma segunda linha, o texto será quebrado abaixo do marcador. Ele também aparecerá recuado para onde o texto teria começado se a lista tivesse um valor de fora. |
| 3 | outside Se o texto for para uma segunda linha, o texto será alinhado com o início da primeira linha (à direita do marcador). |
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade list-style-image
A imagem do estilo de lista permite que você especifique uma imagem para que possa usar seu próprio estilo de marcador. A sintaxe é semelhante à propriedade background-image com as letras url iniciando o valor da propriedade seguido pelo URL entre colchetes. Se não encontrar a imagem fornecida, serão usados marcadores padrão.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade em estilo de lista
O estilo de lista permite que você especifique todas as propriedades da lista em uma única expressão. Essas propriedades podem aparecer em qualquer ordem.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade do marcador-offset
A propriedade marker-offset permite que você especifique a distância entre o marcador e o texto relacionado a esse marcador. Seu valor deve ser um comprimento, conforme mostrado no exemplo a seguir -
Infelizmente, esta propriedade não é compatível com o IE 6 ou Netscape 7.
Aqui está um exemplo -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Isso produzirá o seguinte resultado -