Kaip susikurti sąrašus naudojant CSS

HTML sąrašų santrauka

HTML yra du pagrindiniai sąrašų tipai - „ Ordered“ ir „ Unordered“ .

Be užsisakyti sąrašus (

    ), sąrašo elementų tvarka yra svarbi. Elementai gali būti pateikiami eilės tvarka pagal skaičių, romėnišką skaičių, raidinį skaitmenį ar kitą tipo žymeklį. Numatytasis užsakytų sąrašų žymeklis yra skaičius (arba decimal):

    Be netvarkingai sąrašą (

      ), sąrašo elementų tvarka nėra svarbi. Elementai rodomi ženklelių formatu. Numatytasis nesutvarkytų sąrašų žymeklis yra apvalus taškas arba disc.

      Kiekvienas sąrašo elementas, esantis užsakytame arba nesutvarkytame sąraše, sukuriamas su žyma.

      Konkretaus sąrašo stiliai

      Yra trys bendri savybės būdingos stiliaus sąrašų: list-style-type, list-style-positionir list-style-image. Taip pat yra trumpų savybių, kurios apima visus tris.

      list-style-type

      Žymekliai (arba ženkleliai), rodomi tvarkomuose ir nesutvarkytuose sąrašuose, gali būti suformuoti įvairiais būdais. CSS ypatybė, skirta žymeklio tipui formuoti, yra list-style-type. Numatytoji list-style-typeužsakyto sąrašo vertė yra decimal, o nesutvarkyto sąrašo - numatytoji disc.

      Užsakyto sąrašo pavyzdys:

      /* css */ ol { list-style-type: upper-roman; }

      Nesutvarkyto sąrašo pavyzdys:

      /* css */ ul { list-style-type: square; }

      Nėra žymeklio pavyzdžio:

      /* css */ ul { list-style-type: none; }

      Priimtinos list-style-typenuosavybės vertės yra:

      Neužsakyta:

      • diskas ( numatytasis )
      • apskritimas
      • aikštė

      Užsakyta:

      • dešimtainis ( numatytasis )
      • dešimtainis skaičius - nulis
      • apatinis romėnas
      • viršutinis romėnų
      • žemesnysis graikas
      • apatinė lotynų kalba
      • viršutinė lotynų kalba
      • armėnų
      • gruzinas
      • žemesnioji alfa
      • viršutinė alfa

      Kita:

      • nė vienas

      Pastaba: visas aukščiau išvardytas ypatybių vertes galima naudoti formuojant ir užsakytus, ir nesutvarkytus sąrašus (pvz .: užsakytas sąrašas su squaresąrašo žymekliais).

      list-style-position

      list-style-positionvaldo, ar sąrašo žymeklis rodomas kiekvieno sąrašo elemento elemento viduje, ar ne ( ). Nuosavybė priima dvi reikšmes outside(numatytoji) arba inside.

      Uždėkite outsidesąrašo elemento elemento žymeklį , o visos teksto eilutės ir kiekvieno sąrašo elemento eilutės bus sulygiuotos vertikaliai:

      /* css */ ul { list-style-position: outside; /* default */ }

      Padėkite žymeklį insideir kiekvieno sąrašo elemento pirmoji teksto eilutė bus įtraukta, kad atsirastų vietos žymekliui. Bet kurios to paties sąrašo elemento eilutės bus sulygintos su žymekliu, o ne su pirma teksto eilute:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      list-style-imageNuosavybė priima vaizdo URL sąrašo vietą persekiotoją. Numatytoji šios ypatybės vertė yra none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Stenografija

      list-styleyra trijų aukščiau išvardytų stiliaus savybių sutrumpinta savybė. Vertybių tvarka list-stylepriima tai list-style-type, list-style-positionir list-style-image. Jei kuri nors vertė yra praleista, bus naudojama numatytoji tos savybės vertė.

      Pavyzdys:

      /* css */ ul { list-style: circle inside none; }

      Daugiau specifinis sąrašas

      Užsakytos sąrašo žymos taip pat priima atributus, kurie valdo jo sąrašo elementų srautą, skaičių ar konkrečias žymenų reikšmes. Tai apima start, reversedir valueatributus. Norėdami sužinoti daugiau, žr. Toliau išvardytus MDN išteklius.

      Bendras stilius

      Sąrašas turinys gali būti stilingi kaip kiti par divelementų. color, font-family, margin, padding, Arba borderyra tik keletas pavyzdžių iš savybių, kad gali būti pridėta su arba ul, olarba lielementų.

      Atminkite, kad bet kokie stiliai, pridėti prie elemento ular olelemento, paveiks visą sąrašą. Tiesiogiai prie lielementų pridėti stiliai paveiks atskirus sąrašo elementus. Žemiau pateiktame pavyzdyje krašto ir fono spalvos ypatybės yra skirtingai sudarytos tarp sąrašo ir sąrašo elemento elementų:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      Sąrašo tarpai

      Galite pastebėti papildomų tarpai priešais sąrašo elementus, kai list-style-typeyra nustatyta none. Nustatant padding, kad 0(ar kas tarpai yra teikiama pirmenybė) dėl sąrašo elemento pakeis šį numatytąjį padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Šaltiniai:

      Renkant šiame straipsnyje pateiktą informaciją, buvo nurodytos žemiau pateiktos nuorodos. Norėdami sužinoti daugiau apie šią temą, apsilankykite juose.

      Daugiau informacijos:

      MDN - stiliaus sąrašai

      W3Schools - CSS sąrašai

      CSS gudrybės - sąrašo stiliaus