CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Listas

Por Benedito Silva Júnior - publicado em 13/07/2016


Com o uso do CSS podemos aplicar vários efeitos nas tags de listas do HTML/XHTML (<ul></ul>, <ol></ol> e <li></li>). Os efeitos aplicados em listas estão divididos em listas não-ordenadas e listas ordenadas.

Veja:

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <html xmlns="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de Listas Não-Ordenadas></h1> <ul class="ex"> <li>Descrição do item 01></li> <li>Descrição do item 02></li> <li>Descrição do item 03></li> </ul> </body> </html>

Código CSS (arquivo estilo.css):

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } ul.ex:link { list-style-position: inside; list-style-type: square; padding: 4px; width: 230px; border: 1px solid #000000; }

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <html xmlns="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de Listas Ordenadas></h1> <ol class="ex"> <li>Descrição do item 01></li> <li>Descrição do item 02></li> <li>Descrição do item 03></li> </ol> </body> </html>

Código CSS (arquivo estilo.css):

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } ol.ex:link { list-style-position: inside; list-style-type: lower-alpha; padding: 4px; width: 230px; border: 1px solid #000000; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo