Saraksta stils - CSS-triki

Anonim

list-styleĪpašums ir saīsinājums īpašums, komplekti vērtības trīs dažādu sarakstu saistītās īpašības vienā deklarācijā:

ul ( list-style: || || ; )

Šeit ir sintakses piemērs:

ul ( list-style: square outside none; )

Kas būtu tas pats, kas šāda versija:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Īsumā, ja kādas vērtības tiek izlaistas, tās atgriezīsies sākotnējā stāvoklī.

Vērtības list-style-type

list-style-typeĪpašums definē saraksta veida, nosakot saturu katru marķieri, vai lode, sarakstā. Pieņemamās atslēgvārdu vērtības list-style-typeietver:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN ir pilnīgāks saraksts. Atslēgvārdu vērtības, kas nav atslēgvārdi, tika ieviestas CSS3, un tās sāk redzēt zināmu atbalstu, piemēram:

ul ( list-style-type: "→"; )

Šajā demonstrācijā ir iekļauta nesakārtotu sarakstu grupa, lai parādītu katra atslēgvārda vērtību:

list-style-typeĪpašumu attiecas uz visiem sarakstiem, kā arī jebkurš elements, kas ir iestatīts uz display: list-item.

Saraksta marķiera krāsa būs jebkura elementa aprēķinātā krāsa (iestatīta caur colorrekvizītu).

Vērtības list-style-position

Par list-style-positionīpašuma pakalpojumu direktīva nosaka, kur novietot saraksta marķieri, un tā pieņem vienu no divām vērtībām: insidevai ārpus. Tie ir parādīti turpmāk, paddingnoņemot no sarakstiem un pievienojot kreiso sarkano apmali:

Vērtības list-style-image

list-style-imageĪpašumu nosaka, vai saraksts marķieris ir iestatīts ar attēlu, un pieņem vērtību "nav" vai URL, kas norāda uz attēla:

ul ( list-style-image: url(images/bullet.png.webp); )

Vairāk demonstrāciju

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi Darbi Darbi Darbi

IE6 / 7 neatbalsta visas atslēgvārda vērtības list-style-typeun ir arī kļūda, kurā uzpeldošie saraksta elementi neparāda to saraksta marķieri. Tas tiek atrisināts, list-style-imagesaraksta vienumos izmantojot fona attēlu (nevis ).