Pesquisar na Comunidade
Mostrando resultados para as tags ''não-ordenada''.
Encontrado 1 registro
-
html Aula 2 - Listas ordenadas, listas não-ordenadas, listas de definição
um tópico no fórum postou Lordfire Tutoriais de Websites
Se você não acompanhou a aula anterior, faça isso agora: http://www.xtibia.co...inks-e-imagens/ Para organizar as coisas, o HTML nos permite estruturas básicas de listas e tabelas. Vou começar pelas listas: Listas As listas são divididas em 3 tipos: temos as listas ordenadas (que são tipo 1, 2, 3 ou i, ii, iii); temos as listas não-ordenadas, que são as com pontinho na frente; e temos as listas de definição, que são listas de itens e suas descrições. Listas ordenadas A tag da lista ordenada é <ol> (ordered list), e cada um dos itens é um elemento <li> (list item). Assim: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> O resultado é este: As listas ordenadas tem 5 tipos diferentes de ordem: por números, letras maiúsculas, letras minísculas, números romanos maiúsculos, e números romanos minúsculos. Também existem diversos outros tipos especiais, como ideogramas japoneses, números armênios, letras gregas... mas só vou tratar destes 5. Você pode me perguntar se quiser outro. Para alterar, você tem que colocar, no atributo style, o código list-style-type: <tipo>. Nos 5 tipos, na ordem: <ol style="list-style-type: decimal"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Usar o atributo style é, essencialmente, usar CSS. Então, que isso sirva como introdução para nossas aulas futuras Listas não-ordenadas Já as listas não-ordenadas tem apenas 3 tipos: círculo, disco e quadrado. Da mesma forma que nas listas ordenadas, você usará o list-style-type, só que a tag é <ul> (unordered list): <ul style="list-style-type: circle"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: disc"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Em ambos os casos, tanto listas ordenadas quanto listas não-ordenadas, você pode definir list-style-type como none para não ter nenhuma marcação: <ul style="list-style-type: none"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Listas de definição O terceiro tipo de lista, a lista de definição (<dl>), é diferente: você tem um item (<dt> (definition topic)), e debaixo dele adiciona a(s) descrição(ões) (<dd> (definition description)). Assim: <dl> <dt>Café</dt> <dd>Quente</dd> <dd>Preto</dd> <dt>Leite</dt> <dd>Frio</dd> <dt>Chocolate</dt> <dd>Melhor se quente</dd> <dd>Marrom</dd> </dl> Pode ter quantas descrições forem necessárias. O recuo é automático e não há configuração. Não vou definir uma tarefa pra essa aula, mas testem, mexam com as listas, insiram uma lista dentro da outra pra ver como fica, vejam os resultados, pratiquem! qualquer dúvida, responderei de prontidão.