Html va css-da markirovka qilingan ro'yxatlar. Belgilangan roʻyxat

Belgilangan ro'yxat har bir ro'yxat elementi oldiga odatda to'ldirilgan doira shaklida kichik marker qo'shish orqali aniqlanadi. Ro'yxatning o'zi konteyner yordamida tuziladi

, va har bir ro'yxat elementi teg bilan boshlanadi
• quyida ko'rsatilganidek.
  • Birinchi nuqta
  • Ikkinchi nuqta
  • Uchinchi nuqta

  Ro'yxatda yopilish yorlig'i bo'lishi kerak

11.1-misolda veb-sahifaga markirovka qilingan ro'yxat qo'shish uchun HTML kod ko'rsatilgan.

11.1-misol. Belgilangan ro'yxat yarating

• Cheburashka
• Timsoh Gena
• Shapoklyak
• Kalamush Larisa

Natija bu misol shaklda ko'rsatilgan. 11.1.

Guruch. 11.1. Belgilangan roʻyxat koʻrinishi

Ro'yxatning yuqori, pastki va chap qismidagi to'ldirishga e'tibor bering. Bunday chekinishlar avtomatik ravishda qo'shiladi.

Markerlar uchta shakldan birini olishi mumkin: doira (standart), doira va kvadrat. Marker uslubini tanlash uchun tegning type atributidan foydalaning

. Qabul qilinadigan qiymatlar jadvalda keltirilgan. 11.1
Jadval 11.1. Bullet uslublarini roʻyxatlash

Ro'yxat turi	HTML kodi	Misol
Doira belgilari bilan ro'yxat		Birinchidan Ikkinchi Uchinchi
Doira o'qlari bilan ro'yxat		Birinchidan Ikkinchi Uchinchi
Kvadrat o'q bilan ro'yxat		Birinchidan Ikkinchi Uchinchi

Markerning ko'rinishi unga qarab biroz farq qilishi mumkin turli xil brauzerlar, shuningdek, shrift va matn hajmini o'zgartirganda.

Kvadrat o'qlar bilan ro'yxat yaratish 11.2-misolda ko'rsatilgan.

11.2-misol. Belgilar turi

E'tiqodlarni o'zgartirish

• diniy e'tiqodni o'zgartirish (ixtiyoriy: Buddizm, Konfutsiylik, Hinduizm). Maxsus taklif - yahudiylik va islom birgalikda;
• sevimli tomonning benuqsonligiga ishonchning o'zgarishi;
• o'zga sayyoraliklar mavjudligiga ishonish;
• o'zining eng yaxshi turi sifatida siyosiy tizimni afzal ko'rish (tanlash uchun: feodalizm, sotsializm, kommunizm, kapitalizm).




Ushbu misolning natijasi rasmda ko'rsatilgan. 11.2.

HTML belgilash tilida ro'yxatlarning 3 turi mavjud - tartiblangan (raqamli), tartibsiz (numersiz) va aniqlovchi ro'yxatlar.

Bunday ro'yxatni tuzish uchun sizga 2 turdagi elementlar kerak bo'ladi: 'ul' (tartibsiz ro'yxat, ya'ni tartibsiz ro'yxatning qisqartmasi) va 'li' (ro'yxat elementi). "Li" ichida yozilgan hamma narsa marker bilan belgilanadi.

Bunday ro'yxatning ko'rinishini markerlarning turlarini ko'rsatish orqali boshqarish mumkin.

Markerlarning turlari

Har ikkala ro'yxat elementida joylashgan maxsus tip atributi mavjud. Bu sizning markeringiz turi. Faqat 3 tur mavjud: doira, disk va kvadrat:

- kvadrat
- disk
- aylana

Marker turini qayerda ko'rsatganingizga qarab, uni butun ro'yxat yoki muayyan element uchun o'zgartirishingiz mumkin.

Buyurtma qilingan ro'yxat

Ro'yxatni yaratish uchun sizga ikkita element kerak bo'ladi: "ol" va "li" (ro'yxat elementi). Markerlar nuqtali raqamlar bilan almashtiriladi. Oddiy ro'yxatga misol:

1. birinchi element
2. ikkinchi element
3. oxirgi element

Belgilash orqali tartiblangan ro'yxatning ko'rinishini boshqarishingiz mumkin turli xil turlari raqamlash.

Raqamlash turlari

"Ol" yoki "li" elementiga joylashtirilgan maxsus turdagi atribut mavjud. Bu sizning ro'yxatingiz turi. Hammasi bo'lib 5 tur mavjud:

- arab raqamlarida raqamlash (1, 2, 3)
- raqamlash bosh harflar bilan(A, B, C)
- raqamlash kichik harflar(a, b, c)
- Katta rim raqamlarida raqamlash (I, II, III)
- kichik Rim raqamlarida raqamlash (i, ii, iii)
- Raqamlashni qaysi raqamdan boshlash kerak?

Raqamlash turini qaerda ko'rsatganingizga qarab, uni butun ro'yxat yoki ma'lum bir element uchun o'zgartirishingiz mumkin.

Ta'riflar ro'yxati

Lug'at yozuvlari uchun ta'riflar ro'yxati ishlab chiqilgan.

Umumiy konteyner "dl" mavjud. Uning ichida "dt" (ta'rif termini) va "dd" (ta'rif tavsifi) mavjud. Eng oddiy misol:

Marketing bo'limi

Ushbu bo'lim tovarlar va xizmatlarni ilgari surish bilan shug'ullanadi

Moliya bo'limi

Ushbu bo'lim barcha moliyaviy operatsiyalar bilan shug'ullanadi

Barcha ro'yxatlarning barcha elementlari blok elementlari hisoblanadi. Ammo "dt" elementi ichida siz faqat qo'yishingiz mumkin inline elementlar. "dd" va "li" elementlariga xohlagan narsani qo'yishingiz mumkin. Ichki ro'yxatlar shu erdan keladi.

Ichki (aralash roʻyxatlar)

Bu ko'p darajali ro'yxatlar bo'lib, ular ichida ierarxiya mavjud. Ko'pincha bunday ro'yxatlar sayt xaritasini yaratishda ishlatiladi. Misol:

Aralash ro'yxat

KUN XABARLARI

Bugun yomg'ir

Kun bo'yi yomg'ir yog'adi

KECHNING YANGILIKLARI

Kechasi yomg'ir yog'adi

Ertaga yangi kun boshlanadi

Xayrli kun!

Ushbu maqolada siz ro'yxatlarning barcha imkoniyatlari haqida bilib olasiz, raqamlangan ro'yxatni qanday tuzishni tushunasiz va oddiy markirovka qilingan ro'yxatni o'zboshimchalik bilan o'qlar bilan yanada qiziqarli va sezilarli bo'lishga yordam beradigan master teglar. Darsni tugatgandan so'ng, siz ro'yxatlar qayerda va qanday sharoitlarda ishlatilishi mumkinligi haqida tushunchaga ega bo'lasiz.

Ushbu maqola HTML asoslari bo'yicha ushbu qisqa kursning uchinchisidir. Ushbu darsni o'qishdan oldin, men oldingi ikkitasini o'rganishni maslahat beraman:

Maqola endigina boshlandi va siz standart markirovka qilingan ro'yxatdan foydalanishni allaqachon sezishingiz mumkin. Mening veb-saytimda bu juda oddiy ko'rinadi: chap tomonda chiziq va kvadrat marker bilan kichik chiziq bor. Keyinchalik maqolada biz qanday turdagi markerlar mavjudligini, raqamlarni qanday qilish kerakligini, shuningdek, o'z markeringizni qanday qilishni batafsil ko'rib chiqamiz.

Maqolaning har bir qismida ma'lum ro'yxatlarni yaratish muayyan ro'yxatni kiritish uchun batafsil tushuntirishlar bilan birga bo'ladi.

1. HTMLda markirovka qilingan ro'yxatlar

Ushbu turdagi ro'yxat matnda bir xil ma'noga ega bo'lgan elementlar to'plamini ro'yxatga olish uchun ishlatiladi. Bu bir xil mavzu bilan bog'liq bo'lgan havolalar ro'yxati, matnning alohida qismlari uchun batafsil tushuntirish bo'lishi mumkin. Keling, markirovka qilingan ro'yxatlar kodda qanday ko'rinishini ko'rib chiqaylik:

Va bu brauzerda shunday ko'rinadi:

Guruch. 1.1. Brauzerda HTML markirovka qilingan tartibsiz ro'yxatning standart ko'rinishi

1.1 Belgilangan ro'yxatlar uchun standart o'qlar

Yuqoridagi rasmda (1.1-rasm) har bir menyu bandining boshida joylashgan doiralarni ko'rishingiz mumkin. Bu marker. Odatiy bo'lib, u brauzerda to'ldirilgan doira sifatida ko'rinadi. HTMLda markerlarning bir nechta turlari mavjud: to'ldirilgan doira, bo'sh doira va kvadrat. Ular CSS yoki uchinchi tomon rasmlarini talab qilmaydi:

1.2 Ro'yxat belgisi bo'sh doira shaklida

Siz atribut qiymatlarini bilasiz, lekin endi kodda HTML markirovka qilingan roʻyxatni qanday tuzishni koʻrib chiqamiz. Yuqoridagi jadvaldan type atributi uchun ikkinchi "doira" qiymatini tanladik va uni markirovka qilingan ro'yxatimizga o'rnatdik:

<html > <bosh > <sarlavha > Bo'sh doira belgisi bilan markerli ro'yxatga misol</title> </head> <tanasi > <p> Yulduzlar:</p> <ul turi = "doira" > <li > Sirius</li> <li > Arktur</li> <li > Pollux</li> <li > Betelgeuse</li> <li > Quyosh</li> </ul> </tana> </html>

Keling, ushbu kod brauzerda qanday ko'rinishini darhol ko'rib chiqaylik:

Guruch. 1.2. Roʻyxat markerini brauzerda doira shaklida koʻrish

1.3 Ro'yxat belgisi kvadrat shaklida

Keling, HTML ro'yxati uchun kvadrat marker bilan oxirgi misolni ham ko'rib chiqaylik:

Markerga e'tibor bering, u kvadratga aylandi:

Guruch. 1.3. Roʻyxat markerini brauzerda kvadrat shaklida koʻrish

Muhim eslatma: Bu usul endi markirovka qilingan roʻyxatlar uchun uslublar yaratishda qoʻllanilmaydi. CSS (CSS nima ekanligini o'qing) va HTML o'rtasida aniq ajratish mavjud. HTML belgilash uchun, CSS esa jozibali ko'rinish yaratish uchun.

Joriy hujjat turini HTML5 sifatida belgilashda ushbu atributni o'z ichiga olgan kod (""), tekshirish paytida xatolik beradi. Agar tekshirish nima ekanligini eshitmagan bo'lsangiz, bu siz uchun joy.

Xato quyidagicha bo'ladi:

Guruch. 1.4. Ro'yxatning "turi" atributidan foydalanishda validatordagi xato

Belgilangan ro'yxatlarni saralab oldik. Keling, raqamlangan ro'yxatlarga o'tamiz, keyin esa haqiqiy saytlarda tez-tez ishlatiladigan ichki ro'yxatlar va bir nechta tayyor misollarni ko'rib chiqamiz.

2. HTML tilidagi raqamlangan ro‘yxatlar

Oldingi turdagi ro'yxatlardan farqli o'laroq, raqamlangan ro'yxatlar bitta muhim xususiyatga ega: ular avtomatik ravishda raqamlanadi. Bu raqamlash kerak bo'lganda foydalidir katta ro'yxat. Buni qo'lda qilish juda ko'p vaqtni oladi va siz hali ham chalkashib ketishingiz mumkin. Raqamlangan ro'yxat teg yordamida belgilanadi. Amalda qanday ko'rinadi:

Raqamlangan ro'yxatga misol:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html > <bosh > <sarlavha > Standart raqamlangan ro'yxatga misol</title> </head> <tanasi > <p> Birdan beshgacha:</p> <ol > <li > Birinchidan</li> <li > Ikkinchi</li> <li > Uchinchi</li> <li > To'rtinchi</li> <li > Beshinchisi</li> </ol> </tana> </html>

Raqamlangan ro'yxat shunday ko'rinadi: standart sozlamalar brauzerda:

Guruch. 2.1. Standart sozlamalar bilan brauzerda raqamlangan ro'yxat

O'zidan oldingi (o'qlar ro'yxati) singari, u raqamlarni ko'rsatish uchun o'z uslublariga ega. Muntazam raqamlash HTML-da raqamlangan ro'yxat uchun o'qning yagona turi emas.

2.1 Raqamlangan ro'yxatlar uchun standart o'qlar

Bu erda biz uchta markerni emas, balki beshtasini tanlashimiz mumkin:

Marker nomi	"type" atribut qiymati	Ro'yxat misoli
Arab raqamlari ko'rinishidagi markerlar	1	Badminton Beysbol
Kichik lotin harflari ko'rinishidagi markerlar	a	Chomolungma Chogori Kanchenjunga
Katta lotin harflari ko'rinishidagi markerlar	A	Summit Plummet Tantrum xiyoboni Insano
Kichik rim raqamlari belgilari	i	Filippin dengizi Arab dengizi marjon dengizi
Katta Rim raqamlari belgilari	I	Qizil Yashil Moviy

2.2 HTML ro'yxatidagi shaxsiy raqamlash

Raqamlangan ro'yxatning odatiy chiqishiga qo'shimcha ravishda biz raqamlashni istalgan raqamdan boshlashimiz mumkin. Buning uchun qo'shimcha atributni o'rnatishingiz kerak "boshlash" . Ushbu raqamlash raqamlangan ro'yxatlar uchun barcha turdagi markerlarda ishlaydi. Amalda qanday ko'rinadi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html > <bosh > <sarlavha > Raqamlangan ro'yxat uchun maxsus raqamlash</title> </head> <tanasi > <p> Biz raqamlashni o'n ikkidan boshlaymiz:</p> <ol turi = "a" start = "12" > <li > O'n ikki</li> <li > O'n uch</li> <li > O'n to'rt</li> <li > O'n besh</li> <li > O'n olti</li> </ol> </tana> </html>

Bu haqiqiy saytda qanday paydo bo'ladi:

Guruch. 2.2. Raqamlangan ro'yxatdagi ixtiyoriy raqamdan raqamlash

Yuqoridagi rasmda biz kichik lotin harflari ko'rinishida markerlar yasagan holda ro'yxatni o'n ikkidan boshlab raqamladik. Endi, menimcha, loyihalaringizda ushbu atributlardan qanday foydalanish aniq bo'ldi.

Xo'sh, endi ichki HTML ro'yxatlariga o'tamiz.

3. HTMLda ko'p darajali (ichiga joylashtirilgan) ro'yxat qanday tuziladi

Menyularni yaratish uchun saytda ko'p darajali ro'yxatlardan foydalaniladi. Ushbu menyu ko'pincha pastga ochiladigan (dars) yoki chap yoki o'ng ochiladigan menyu bo'lib ko'rinadi. Bunday menyular boshqa menyu elementlarini ixcham shaklda saqlash imkonini beradi.

Misol sifatida avtomobil modellaridan foydalanib, biz HTMLda ko'p darajali ro'yxat tuzamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<html > <bosh > <sarlavha > HTML o'rnatilgan o'qlar ro'yxati</title> </head> <tanasi > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Pikasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </tana> </html>

Ko'p darajali ro'yxat brauzerda qanday ko'rinishiga e'tibor bering:

Guruch. 3.1. HTMLda ko'p darajali ro'yxatga misol

Belgilangan (teg.) yordamida ko'p darajali ro'yxat tuzdik

). Citroen modellari bilan ko'p darajali ro'yxat boshqa markerlar bilan paydo bo'ldi. Asosiy roʻyxatda oʻqlar toʻldirilgan, 2-darajali roʻyxatda esa boʻsh doiralar mavjud. Ammo, esingizda bo'lsa, "tur" atributidan foydalanib, biz markerlarni qayta belgilashimiz mumkin (o'rnatish yaxshiroq).

Ammo biz ko'p darajali ro'yxatlarni raqamlangan va markirovka qilingan ro'yxatlar bilan birlashtira olamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <bosh > <sarlavha > HTMLda raqamlangan, markirovka qilingan va ko'p darajali ro'yxatlar</title> </head> <tanasi > <ul > <li > Lolalarning birinchi guruhi<ol > <li > Birinchi sinf<ul > <li > Oddiy erta lolalar</li> </ul> </li> <li > Ikkinchi sinf<ul > <li > Terri lolalar</li> </ul> </li> </ol> </li> </ul> </tana> </html>

Yuqoridagi misolda bizda ikki qavatli uyalar mavjud (2 daraja). Birinchidan, lolalarning ikkita sinfi ro'yxati kiritilgan, biz uni raqamlashtirdik. Keyin raqamlangan ro'yxatdagi elementlarning har biriga markirovka qilingan ro'yxat joylashtiriladi.

Keling, brauzerda qanday ko'rinishini ko'rib chiqaylik:

Guruch. 3.2. Brauzerda markirovka qilingan ro'yxatga ko'p darajali raqamlangan ro'yxatga misol

4. HTML ro'yxatlaridagi foydali materiallar

Bu CSS xususiyatlarini tushunishni talab qiladigan ma'lumot. Buning uchun men quyidagi darslarni o'rganishni tavsiya qilaman: . Barcha misollar darhol bo'ladi manba kodi va HTML (struktura), CSS (uslublar) va Natija (natija) yorliqlariga bo'linadi.

4.1 HTML ro'yxatini qanday qilib satrga aylantirish mumkin

Gorizontal menyu yaratishda HTML roʻyxatini satrga aylantirish zarur boʻlishi mumkin. Buni qilish juda oson:

4.2 HTML ro'yxatini belgisiz qanday qilish mumkin

Buning uchun CSS-dagi list-style-type xususiyati javobgar (batafsilroq):

4.3 HTMLda ro'yxatni qanday markazlashtirish mumkin

Ro'yxat elementi blok elementidir, shuning uchun uni to'ldirish yordamida markazlashtirish kerak. Lekin bittasi bor muhim nuqta— hizalamaning ishlashi uchun kenglikni aniq belgilashimiz kerak:

4.4 Rasmlar bilan HTMLda ro'yxat qanday tuziladi

Faqat bitta CSS xususiyati, list-style-image yetarli. URL ichida belgidan oldin manzilni ko'rsating. Shuni ta'kidlashni istardimki, darhol kichik rasmni tanlash yaxshidir, chunki ro'yxat chizig'ining balandligi unga bog'liq:

4.5 Belgilangan roʻyxat oʻz belgisini HTML-ga kiriting

Bunday holda, siz shrift belgilarini oldindan ulashingiz kerak (masalan, FontAwesome ). Keyin standart marker o'rniga istalgan belgi yasashingiz mumkin:

4.6 HTML-da ro'yxatni bir necha ustunlarda tuzish

Roʻyxatni bir nechta ustunlarda yaratish uchun biz CSS-ning ustunlarni hisoblash xususiyatidan foydalanamiz (xususiyat faqat quyidagi brauzerlarda qoʻllab-quvvatlanadi: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Bundan tashqari, bir nechta ustunlarga bo'linishni ko'rish uchun ro'yxatning balandligini belgilashingiz kerak:

5. Ro‘yxatlar bilan ishlashni mashq qiling

Quyidagi videoda siz HTML ro'yxatlari bilan amaldagi barcha ishlarni ko'rishingiz mumkin:

Raqamlangan ro'yxatlar seriya raqamlari ko'rsatilgan elementlar to'plamidir. Raqamlash turi va turi element parametrlariga bog'liq

, bu ro'yxatni yaratish uchun ishlatiladi. Quyidagi qiymatlar raqamlash elementlari sifatida xizmat qilishi mumkin:
• Arab raqamlari (1, 2, 3, ...);
• O'ndan kichik raqamlar uchun bosh nol bilan arab raqamlari (01, 02, 03, ...,10);
• bosh lotin harflari (A, B, C, ...);
• kichik lotin harflari (a, b, c, ...);
• katta rim raqamlari (I, II, III, ...);
• kichik Rim raqamlari (i, ii, iii, ...);
• arman raqamlash;
• Gruziya raqamlash.

Amaliy nuqtai nazardan, markirovka qilingan ro'yxatdagi narsalarni ko'rsatish tamoyillari raqamlangan ro'yxatga o'xshash tarzda qo'llanilishi mumkin. Ammo biz sanab o'tish bilan shug'ullanayotganimizni hisobga olsak, bundan keyin ham muhokama qilinadigan ba'zi xususiyatlar mavjud.

Ro'yxatni raqamlash

Ro'yxatni istalgan raqamdan boshlashga ruxsat beriladi; bu maqsadda elementning start atributidan foydalaniladi

yoki elementning qiymati
1. . Qiymat har qanday musbat butun sondir. Ro'yxat sifatida lotin harflari ishlatilsa ham, raqamlashning qaysi turi o'rnatilganligi muhim emas. Agar roʻyxatda bir vaqtning oʻzida boshlangʻich va qiymat atributlari qoʻllanilsa, ikkinchisi ustunlikka ega boʻladi va raqamlash 1-misolda koʻrsatilganidek, qiymat bilan belgilangan raqamdan koʻrsatiladi.

   1-misol: Ro'yxat raqamlashni o'zgartirish

   4. Ish joyingizga yaxshi g'amxo'rlik qilishingiz kerak.
   5. Xonadagi yoritishni yorug'lik manbai operatorning yon tomonida yoki orqasida joylashgani uchun sozlang.
   10. Tibbiy asoratlardan qochish uchun yumshoq o'rindiqli stulni tanlash tavsiya etiladi.
   
   
   

   Ushbu misoldagi ro'yxatning birinchi elementi rim raqami IV bilan boshlanadi, chunki start="4" atributi ko'rsatilgan, keyin V raqami keladi va oxirgi element tartibdan chiqib, X raqami bilan belgilanadi (rasm). 1).

   Guruch. 1. Ro'yxatdagi rim raqamlari

   Raqamlarni yozish

   Odatiy bo'lib, raqamlangan ro'yxat ma'lum bir ko'rinishga ega: birinchi navbatda raqam, keyin nuqta, shundan so'ng matn bo'sh joy bilan ajratilgan holda ko'rsatiladi. Yozishning ushbu shakli vizual va qulaydir, ammo ba'zi ishlab chiquvchilar ro'yxatlarni raqamlashni loyihalashning boshqa usulini ko'rishni afzal ko'rishadi. Ya'ni, nuqta o'rniga rasmda ko'rsatilganidek, yopish qavs mavjud. 2 yoki shunga o'xshash narsa.

   

   Guruch. 2. Qavs bilan raqamlangan ro'yxat ko'rinishi

   Uslublar kontent va teskari o'sish xususiyatlaridan foydalangan holda ro'yxat raqamlash turini o'zgartirishga imkon beradi. Birinchidan, ol selektori qarshi qayta o'rnatishga o'rnatilishi kerak : element , bu har bir yangi ro'yxatdagi raqamlash yangidan boshlanishi uchun kerak. Aks holda, raqamlash davom etadi va 1,2,3 o'rniga 5,6,7 ni ko'rasiz. Ob'ekt qiymati hisoblagich uchun noyob identifikator bo'lib, uni o'zimiz tanlaymiz. Keyin asl markerlarni list-style-type uslubi xususiyati orqali none qiymati bilan yashirishingiz kerak.

   Kontent xususiyati odatda ::after va ::befor psevdoelementlar bilan birgalikda ishlaydi. Shunday qilib, qurilishdan oldin li:: ro'yxatning har bir elementi oldiga ba'zi tarkib qo'shilishi kerakligini aytadi (2-misol).

   Misol 2. O'z raqamlashni yaratish

   Li::oldin ( mazmuni: counter(element) ") "; /* Raqamlarga qavs qo'shing */ counter-increment: item; /* Hisoblagich nomini belgilang */ )

   Qiymat hisoblagichi (elementi) bo'lgan kontent xususiyati raqamni ko'rsatadi; Ushbu misolda ko'rsatilganidek, qavs qo'shish orqali biz kerakli raqamlash turini olamiz. ro'yxat sonini bittaga oshirish uchun qarama-qarshi o'sish kerak. E'tibor bering, item deb nomlangan bir xil identifikator butun vaqt davomida ishlatiladi. Yakuniy kod 3-misolda ko'rsatilgan.

   3-misol: Ro'yxat ko'rinishini o'zgartirish

   1. Birinchidan
   2. Ikkinchi
   3. Uchinchi
   4. To'rtinchi
   
   
   

   Yuqoridagi usuldan foydalanib, istalgan turdagi raqamlangan ro'yxatni yaratishingiz mumkin, masalan, kvadrat qavs ichiga raqam qo'ying, bu holda uslublarda faqat bitta qator o'zgaradi.

   Tarkib: "[" counter(element) "] ";

   Rus harflari bilan ro'yxat

   bilan raqamlangan ro'yxat mavjud lotin harflari bilan, lekin ro'yxatda ruscha harflar yo'q. Ular yuqoridagi texnikadan foydalangan holda sun'iy ravishda qo'shilishi mumkin. Raqamlash uslublar orqali amalga oshirilganligi sababli, ro'yxatning o'zi asl bo'lib qoladi, unga faqat tanlangan sinf qo'shiladi, keling, uni kiril deb ataymiz (4-misol).

   4-misol: Ro'yxat yaratish uchun kod

   1. Bir
   2. Ikki
   3. Uch

   Harflarni qo'shish psevdo-elementdan oldingi :: va kontent xususiyati yordamida amalga oshiriladi. Har bir satr o'z harfiga ega bo'lishi kerakligi sababli, biz psevdo-sinf :nth-child(1) dan foydalanamiz, harf raqami qavs ichida yoziladi. Birinchi harf, tabiiyki, A, ikkinchisi B, uchinchisi C va hokazo. Bu butun to'plam li selektoriga quyidagicha qo'shiladi (5-misol).

   5-misol: psevdo-sinfdan foydalanish: nth-child

   Kiril li:nth-child(1)::oldin ( mazmuni: "a)"; ) .cyrilic li:nth-child(2)::oldin ( mazmuni: "b)"; ) .cyrilic li:nth-child(3)::oldin ( mazmuni: "at)"; )

   Bu misolda har bir harfdan keyin qavs olinadi, barcha harflar kichik. Siz o'zingizning ro'yxat raqamlash turini belgilashingiz mumkin, masalan, unda nuqta bilan bosh harflar, bir yoki ikkita qavs yoki faqat harflar bo'lishi mumkin. Standart raqamlashdan farqli o'laroq, biz bu erda xohlagan narsani qilishimiz mumkin. O'nta harfdan iborat ro'yxat deyarli barcha holatlar uchun etarli bo'lishi kerak, ammo agar bu to'satdan etarli bo'lmasa, hech bo'lmaganda rus alifbosining barcha harflarini kiritish uchun ro'yxatimizni kengaytirishga hech narsa to'sqinlik qilmaydi.

   Nihoyat, biz harflarning hizalanishi va joylashishini sozlaymiz, ixtiyoriy ravishda shrift o'lchamini, rangini va boshqa parametrlarni belgilaymiz (6-misol).

   Misol 6. Rus harflari bilan ro'yxat

   1. Borsch
   2. Pike kotletlari
   3. Kulebyaka
   4. Smetanadagi qo'ziqorinlar
   5. Ikra bilan pancakes
   6. kvas
   
   
   

   Ushbu misolning natijasi rasmda ko'rsatilgan. 3.

   Salom, aziz o'quvchilar! Bugun, “ sarlavhasi ostidagi maqolalar turkumining davomi sifatida HTML asoslari“Men sizni yaratish algoritmi bilan tanishtirmoqchiman html ro'yxati yordamida ul va li teglari (oʻqlar roʻyxati), ol va li (raqamli roʻyxat), dl, dt, dd (taʼriflar roʻyxati).

   Endi men sizni eng ko'p ishlatiladiganlar bilan tanishtirishni davom ettiraman html teglari bilan, ular sayt sahifalarida ro'yxatlar yaratish uchun ishlatiladi. Agar kimdir bu nima ekanligini bilmasa, quyida olingan ma'lumotlardan so'ng, ular biz nima haqida gapirayotganimizni darhol tushunishadi, chunki materialni taqdim etishning bu shakli juda keng tarqalgan.

   HTML markirovka qilingan ro'yxatlar - ul va li teglari

   Belgilangan ro'yxat ul tegi bilan belgilanadi. Ochilish va yopish ul teglari o'rtasida ro'yxat elementlari mavjud bo'lib, ularning har birining mazmuni, o'z navbatida, ochilish va yopish li teglari orasida joylashgan bo'lishi kerak. Darhol taʼkidlab oʻtamanki, ul teg juftlashgan (ochilish va yopish tegining mavjudligi), shuningdek, blok-darajali, yaʼni har safar li tegi orqali hosil boʻlgan elementlarni (chiziqlarni) oʻz ichiga olgan konteynerni tashkil qiladi. Shunga ko'ra, li yorlig'i juftlangan va kichik harflar.

   Standart tashqi ko'rinish marker to'ldirilgan doira bilan ifodalanadi. Biroq, uning ko'rinishini quyidagi qiymatlarga ega bo'lgan type atributidan foydalanib o'zgartirishingiz mumkin: disk, doira, kvadrat. Disk qiymati (to'ldirilgan doira sifatida markerning ko'rinishini belgilaydi) standart hisoblanadi. Ya'ni, agar tip atributi ko'rsatilmagan bo'lsa, u holda markerning ko'rinishi to'ldirilgan doiraga o'xshaydi. Agar biz ushbu atributlarni ul tegiga qo'shsak, biz quyidagi variantlarni olamiz:

   Tabiiyki, markerli ro'yxatning alohida elementining har bir belgisiga tip atributining tegishli qiymatlarini ko'rsatish orqali o'ziga xos ko'rinish berilishi mumkin.

   Raqamlangan HTML ro'yxatlari - ol va li teglari

   Endi ol teglari (ul ga o'xshash blok va juft teg) yordamida raqamlangan ro'yxat qanday tuzilganligini ko'rib chiqamiz. Bu yerda li tegi HTMLda raqamlangan roʻyxat elementlarini belgilovchi teg sifatida ham qoʻllaniladi. Raqamlangan ro'yxat raqamlangan elementlarning to'plamidir. Raqamlash turi quyidagi qiymatlarni qabul qilishi mumkin bo'lgan tip atributi bilan belgilanadi:

   • A - bosh lotin harflari;
   • a - kichik lotin harflari;
   • I - bosh rim raqamlari;
   • i - kichik rim raqamlari;
   • 1 - arab raqamlari

   	1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi
   1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi	1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi
   1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi	1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi
   1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi	1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi
   1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi	1 raqamlangan roʻyxat bandi Raqamlangan ro'yxatning 2 elementi Raqamlangan ro'yxatning 3-elementi

   Elementlar teskari tartibda raqamlangan raqamlangan ro'yxatni ham taqdim etishingiz mumkin, masalan: 3, 2, 1. Bu ol tegining rezerv atributi yordamida amalga oshiriladi.

   Belgilangan roʻyxatni 1dan boshqa istalgan raqamdan boshlash imkoniyati ham mavjud. Buning uchun siz start atributidan foydalanishingiz mumkin va type atributi qaysi qiymatga o'rnatilganligi muhim emas. bilan birga name atributidan foydalanish misoliga qarang turli ma'nolar type atributi (1 va I):

   HTML ta'riflari ro'yxatlari - dl, dd, dt teglari

   HTML ro'yxatining yana bir turi - ta'riflar ro'yxati. U quyidagicha shakllanadi. Ushbu ro'yxatning mazmuni konteynerni tashkil etuvchi ochish va yopish dl teglari orasida joylashgan. Dt tegi atamani, dd tegi esa bu atamani tavsiflaydi.

   Ko'rib turganingizdek, atama bo'lgan dt tegining mazmuni chapga siljiydi va bu atamaning ta'rifi bo'lgan dd tegining mazmuni kursiv bilan yoziladi. Bularning barchasi turli xil foydalanish orqali erishiladi css uslublari, bu haqda biz kelgusi nashrlarda albatta gaplashamiz.

   Aytgancha, zamonaviy voqeliklar shundan iboratki, html tilini alohida ko'rib chiqish mumkin emas, shuning uchun ushbu muhim materiallarni o'tkazib yubormaslik uchun RSS tasmasi yoki elektron pochta orqali blog yangilanishlariga obuna bo'ling. Agar olgan bo'lsangiz, bugungi maqolaning mavzusi shu bilan yakunlanadi zarur ma'lumotlar, ijtimoiy tarmoq tugmalaridan foydalanishni rad qilmang.