{"id":617,"date":"2020-07-03T18:05:23","date_gmt":"2020-07-03T21:05:23","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=617"},"modified":"2022-12-09T08:34:32","modified_gmt":"2022-12-09T11:34:32","slug":"listas-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/listas-css\/","title":{"rendered":"Listas CSS"},"content":{"rendered":"

Listas HTML e propriedades da lista CSS<\/strong><\/p>\n

No HTML, existem dois tipos principais de listas:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

listas n\u00e3o ordenadas (<ul><\/code>) – os itens da lista s\u00e3o marcados com marcadores
\nlistas ordenadas (<ol><\/code>) – os itens da lista s\u00e3o marcados com n\u00fameros ou letras<\/p>\n

As propriedades da lista CSS permitem:<\/strong><\/p>\n

Definir marcadores de itens de lista diferentes para listas ordenadas
\nDefinir marcadores de itens de lista diferentes para listas n\u00e3o ordenadas
\nDefinir uma imagem como marcador de item da lista
\nAdicione cores de plano de fundo a listas e itens de lista
\nMarcadores de item de lista diferentes
\nA list-style-type<\/code>propriedade especifica o tipo de marcador de item da lista.<\/p>\n

O exemplo a seguir mostra alguns dos marcadores de itens de lista dispon\u00edveis:<\/p>\n

Exemplo<\/strong>
\nul.a {<\/code>
\nlist-style-type: circle;<\/code>
\n}<\/code><\/p>\n

ul.b {<\/code>
\nlist-style-type: square;<\/code>
\n}<\/code><\/p>\n

ol.c {<\/code>
\nlist-style-type: upper-roman;<\/code>
\n}<\/code><\/p>\n

ol.d {<\/code>
\nlist-style-type: lower-alpha;<\/code>
\n}<\/code><\/p>\n

 <\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul.a {\r\n  list-style-type: circle;\r\n}\r\n\r\nul.b {\r\n  list-style-type: square;\r\n}\r\n\r\nol.c {\r\n  list-style-type: upper-roman;\r\n}\r\n\r\nol.d {\r\n  list-style-type: lower-alpha;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Example of unordered lists:<\/p>\r\n<ul class=\"a\">\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<ul class=\"b\">\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<p>Example of ordered lists:<\/p>\r\n<ol class=\"c\">\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ol>\r\n\r\n<ol class=\"d\">\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ol>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Uma imagem como marcador de item de lista<\/strong><\/p>\n
A list-style-image<\/code> propriedade especifica uma imagem como marcador de item da lista:<\/p>\n
Exemplo<\/strong><\/p>\n
ul {<\/code>
\nlist-style-image: url('sqpurple.gif');<\/code>
\n}<\/code><\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/favicon.jpg');\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Posicionar os marcadores de itens da lista<\/strong><\/p>\n
A list-style-position<\/code>propriedade especifica a posi\u00e7\u00e3o dos marcadores de itens da lista (pontos de marcador).<\/p>\n
“lista-estilo-posi\u00e7\u00e3o: fora;” significa que os marcadores estar\u00e3o fora do item da lista. O in\u00edcio de cada linha de um item da lista ser\u00e1 alinhado verticalmente. Isso \u00e9 o padr\u00e3o:<\/p>\n
\"\"<\/p>\n
“list-style-position: inside;”\u00a0significa que os marcadores estar\u00e3o dentro do item da lista.\u00a0Como faz parte do item da lista, ele far\u00e1 parte do texto e enviar\u00e1 o texto no in\u00edcio:<\/p>\n
 <\/p>\n
Outra op\u00e7\u00e3o \u00e9 remover as configura\u00e7\u00f5es:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul.demo {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Default list:<\/p>\r\n<ul>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<p>Remove bullets, margin and padding:<\/p>\r\n<ul class=\"demo\">\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Veja com cores<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nol {\r\n  background: #ff9999;\r\n  padding: 20px;\r\n}\r\n\r\nul {\r\n  background: #3399ff;\r\n  padding: 20px;\r\n}\r\n\r\nol li {\r\n  background: #ffe5e5;\r\n  padding: 5px;\r\n  margin-left: 35px;\r\n}\r\n\r\nul li {\r\n  background: #cce5ff;\r\n  margin: 5px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Styling Lists With Colors:<\/h1>\r\n\r\n<ol>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ol>\r\n\r\n<ul>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Coca Cola<\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n