https://mp0373-lmsxi.vercel.app/assets/js/528b643c.eb221ce7.js

1"use strict";(self.webpackChunkacceso_datos=self.webpackChunkacceso_datos||[]).push([[35176],{96488:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>d,default:()=>p,frontMatter:()=>t,metadata:()=>a,toc:()=>c});var i=s(74848),l=s(28453);const t={title:"Propiedades de lista"},d=void 0,a={id:"unidades/02/contenidos/css/propiedades/lista",title:"Propiedades de lista",description:"Hay cuatro propiedades de estilo para listas.",source:"@site/docs/unidades/02/01-contenidos/02-css/06-propiedades/04-lista.md",sourceDirName:"unidades/02/01-contenidos/02-css/06-propiedades",slug:"/unidades/02/contenidos/css/propiedades/lista",permalink:"/docs/unidades/02/contenidos/css/propiedades/lista",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Propiedades de lista"},sidebar:"Unidad2",previous:{title:"Propiedades de texto",permalink:"/docs/unidades/02/contenidos/css/propiedades/texto"},next:{title:"Propiedad display",permalink:"/docs/unidades/02/contenidos/css/propiedades/display"}},o={},c=[{value:"<code>list-style-type</code>",id:"list-style-type",level:2},{value:"<code>list-style-image</code>",id:"list-style-image",level:2},{value:"<code>list-style-position</code>",id:"list-style-position",level:2},{value:"<code>list-style</code>",id:"list-style",level:2}];function r(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Hay cuatro propiedades de estilo para listas."}),"\n",(0,i.jsx)(n.h2,{id:"list-style-type",children:(0,i.jsx)(n.code,{children:"list-style-type"})}),"\n",(0,i.jsx)(n.p,{children:"Indica cual es el s\xedmbolo que se utiliza como marcador en las listas."}),"\n",(0,i.jsx)(n.p,{children:"Valores que puede tomar son:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"disc"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"circle"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"square"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"decimal"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"lower-roman"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"upper-roman"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"lower-alpha"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"upper-alpha"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"none"})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"list-style-image",children:(0,i.jsx)(n.code,{children:"list-style-image"})}),"\n",(0,i.jsx)(n.p,{children:"Permite utilizar el uso de una imagen como marcador en una lista."}),"\n",(0,i.jsx)(n.p,{children:"El valor que toma es la ruta (relativa, absoluta o URL) del fichero imagen."}),"\n",(0,i.jsx)(n.h2,{id:"list-style-position",children:(0,i.jsx)(n.code,{children:"list-style-position"})}),"\n",(0,i.jsx)(n.p,{children:"Determinan la posici\xf3n del marcador en una lista."}),"\n",(0,i.jsx)(n.p,{children:"Puede tomar los valores:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"outside"})}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"inside"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"list-style",children:(0,i.jsx)(n.code,{children:"list-style"})}),"\n",(0,i.jsx)(n.p,{children:"Permite establecer de una \xfanica vez todas las caracter\xedsticas de una lista. Hay que seguir el orden siguiente:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"list-style-type"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"list-style-position"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"list-style-image"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"A continuaci\xf3n, se muestra un ejemplo completo:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="UTF-8" />\n    <title>Estilo para listas</title>\n    <style>\n      #flecha {\n        list-style-image: url("flecha.png");\n      }\n      .circ {\n        list-style-type: circle;\n      }\n      #armenio {\n        list-style-type: armenian;\n      }\n    </style>\n  </head>\n  <body>\n    <p>Lista con imagen</p>\n    <ul id="flecha">\n      <li>Patatas</li>\n      <li>Peras</li>\n    </ul>\n    <p>Lista con c\xedrculo</p>\n    <ul class="circ">\n      <li>Patatas</li>\n      <li>Peras</li>\n    </ul>\n    <p>Alfabeto armenio</p>\n    <ol id="armenio" reversed>\n      <li>Peras</li>\n      <li>Manzanas</li>\n    </ol>\n  </body>\n</html>\n'})}),"\n",(0,i.jsx)(n.p,{children:"En el navegador se visualiza del siguiente modo:"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:s(9579).A+"",width:"135",height:"261"})}),"\n",(0,i.jsx)(n.admonition,{title:"Probar en el navegador",type:"note",children:(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://codesandbox.io/s/priceless-pond-hsiymg?file=/index.html",children:"Documento HTML"})})})]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},9579:(e,n,s)=>{s.d(n,{A:()=>i});const i="data:image/webp;base64,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"},28453:(e,n,s)=>{s.d(n,{R:()=>d,x:()=>a});var i=s(96540);const l={},t=i.createContext(l);function d(e){const n=i.useContext(t);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),i.createElement(t.Provider,{value:n},e.children)}}}]);