SdevLab – Tutorial | CSS List

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS List

A propriedade list define as regras para as listas. Abaixo segue a tabela com as propriedades:

Propriedade Descrição Opções
list-style-image imagem do marcador da lista
  1. none
  2. URL: url(“caminho/marcador.gif”)
list-style-position local onde o marcador da lista é posicionado
  1. outside: marcador fora do alinhamento do texto
  2. inside: marcador alinhado com text
list-style-type tipo do marcador da lista
  1. none: sem marcador
  2. disc: círculo (bolinha cheia)
  3. circle: circunferência (bolinha vazia)
  4. square: quadrado cheio
  5. decimal: números 1, 2, 3, 4, …
  6. decimal-leading-zero
  7. lower-roman: romano minúsculo i, ii, iii, iv, …
  8. upper-roman: romano maiúsculo I, II, III, IV, …
  9. lower-alpha: letra minúscula a, b, c, d, …
  10. upper-alpha: letra maiúscula A, B, C, D, …
  11. lower-greek
  12. lower-latin
  13. upper-latin
  14. hebrew
  15. armenian
  16. georgian
  17. cjk-ideographic
  18. hiragana
  19. katakana
  20. hiragana-iroha
  21. katakana-iroha

Siga o modelo abaixo para testar as propriedades (o mais interessante de se testar é o type, porque o resto é muito simples):

<html> 
<head> 
<style type="text/css"> 
<!-- ul { list-style-type: katakana; } --> 
</style> 
<title>Teste 10</title> 
</head> 
<body> 
<ul> 
<li>Item um</li> 
<li>Item dois</li> 
<li>Item tres</li> 
</ul> 
</body> 
</html>

A sintaxe geral para as listas segue abaixo:

list-style: position; imagem ou list-style: position; type

No próximo tutorial será apresentado um modelo de site desenvolvido com html + css.

Até lá!
xD

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS List

  1. Pingback: Tutorial CSS básico – Como desenvolver um Layout Tabless « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s