CSS istifadə edərək, HTML iç içə nömrələnmiş siyahılarda düzgün nömrələmə. Markerli Siyahılar üçün Standart Güllələrin Nömrələnməsi üçün CSS üslubları

Nömrələnmiş siyahılar seriya nömrələri olan elementlər toplusudur. Nömrələmə növü və növü element parametrlərindən asılıdır

Ərəb rəqəmləri (1, 2, 3, ...);
Ondan (01, 02, 03, ...,10) kiçik rəqəmlər üçün başlanğıc sıfır olan ərəb rəqəmləri;
böyük Latın hərfləri (A, B, C, ...);
kiçik latın hərfləri (a, b, c, ...);
böyük rum rəqəmləri (I, II, III, ...);
kiçik rum rəqəmləri (i, ii, iii, ...);
erməni nömrələmə;
Gürcü nömrələmə.

Praktiki baxımdan elementlərin nümayiş etdirilməsi prinsipləri markerli siyahı nömrələnmiş siyahıya oxşar şəkildə tətbiq oluna bilər. Ancaq bir sadalama ilə məşğul olduğumuzu nəzərə alsaq, daha sonra müzakirə ediləcək bəzi xüsusiyyətlər var.

Siyahının nömrələnməsi

Siyahıya istənilən nömrədən başlamağa icazə verilir; elementin başlanğıc atributundan bu məqsədlə istifadə olunur

. Qiymət istənilən müsbət tam ədəddir. Latın hərfləri siyahı kimi istifadə olunsa belə, nömrələmənin hansı növünün təyin edilməsinin əhəmiyyəti yoxdur. Siyahıya həm başlanğıc, həm də dəyər atributları eyni vaxtda tətbiq edilirsə, o zaman sonuncu üstünlük təşkil edir və Nümunə 1-də göstərildiyi kimi, nömrələmə dəyərlə göstərilən nömrədən göstərilir.
Misal 1: Siyahının nömrələnməsinin dəyişdirilməsi
Siyahılar
1. İş yerinizə yaxşı baxmalısınız.
2. Otaqdakı işıqlandırmanı elə tənzimləyin ki, işıq mənbəyi operatorun yan tərəfində və ya arxasında yerləşsin.
3. Tibbi fəsadların qarşısını almaq üçün yumşaq oturacaqlı bir kreslo seçmək tövsiyə olunur.
Bu misaldakı siyahının birinci elementi IV rum rəqəmi ilə başlayacaq, çünki start="4" atributu göstərilib, sonra V rəqəmi gəlir, sonuncu element isə sıradan çıxır və X rəqəmi təyin olunur (şəkil 1).
düyü. 1. Siyahıda rum rəqəmləri
Nömrələrin yazılması
Varsayılan olaraq, nömrələnmiş siyahı müəyyən bir görünüşə malikdir: əvvəlcə nömrə, sonra nöqtə var və bundan sonra mətn boşluqla ayrılır. Bu yazı forması vizual və rahatdır, lakin bəzi tərtibatçılar siyahıların nömrələnməsinin fərqli dizaynını görməyə üstünlük verirlər. Məhz, Şəkildə göstərildiyi kimi nöqtə əvəzinə bağlama mötərizəsi var. 2 və ya oxşar bir şey.
düyü. 2. Mötərizədə nömrələnmiş siyahı görünüşü
Üslublar məzmun və əks artım xüsusiyyətlərindən istifadə edərək siyahı nömrələmə növünü dəyişməyə imkan verir. Birincisi, ol selektorunu əks sıfırlamaya təyin etmək lazımdır: element, bu, hər yeni siyahıda nömrələmənin yenidən başlaması üçün lazımdır. Əks halda, nömrələmə davam edəcək və 1,2,3 əvəzinə 5,6,7 görəcəksiniz. Maddə dəyəri sayğac üçün unikal identifikatordur, onu özümüz seçirik; Sonra, orijinal markerləri heç biri dəyəri ilə stil xüsusiyyəti siyahısı-style-type vasitəsilə gizlətməlisiniz.
Məzmun xassəsi adətən ::after və ::before psevdo elementləri ilə birlikdə işləyir. Beləliklə, tikintidən əvvəl li:: siyahının hər bir elementindən əvvəl bəzi məzmun əlavə edilməli olduğunu söyləyir (nümunə 2).
Nümunə 2. Öz nömrələmənin yaradılması
Li::əvvəl ( məzmun: counter(item) ") "; /* Rəqəmlərə mötərizə əlavə edin */ counter-increment: item; /* Sayğacın adını təyin edin */ )
Dəyər sayğacı (element) ilə məzmun xassəsi rəqəmi göstərir; Bu nümunədə göstərildiyi kimi mötərizə əlavə etməklə biz lazımi nömrələmə növünü əldə edirik. siyahının sayını bir artırmaq üçün əks artım lazımdır. Qeyd edək ki, element adlı eyni identifikator bütün müddət ərzində istifadə olunur. Son kod Misal 3-də göstərilmişdir.
Misal 3: Siyahı görünüşünün dəyişdirilməsi
Siyahılar
1. Birinci
2. İkinci
3. üçüncü
4. Dördüncü
Yuxarıdakı üsuldan istifadə edərək, istənilən növ nömrələnmiş siyahı yarada bilərsiniz, məsələn, bir nömrə götürün kvadrat mötərizələr, üslublarda yalnız bir sətir dəyişəcək.
Məzmun: "[" counter(element) "] ";
Rus hərfləri ilə siyahı
ilə nömrələnmiş siyahı var latın hərfləri ilə, lakin siyahı üçün rus hərfləri yoxdur. Yuxarıda göstərilən texnikadan istifadə edərək süni şəkildə əlavə edilə bilər. Nömrələmə üslublar vasitəsilə həyata keçirildiyi üçün siyahının özü orijinal olaraq qalır, ona yalnız seçilmiş sinif əlavə olunur, gəlin onu kiril adlandıraq (misal 4).
Nümunə 4: Siyahı yaratmaq üçün kod
1. bir
2. iki
3. üç
Hərflərin əlavə edilməsi psevdo-elementdən əvvəl :: və məzmun xassəsindən istifadə etməklə həyata keçirilir. Hər sətirin öz hərfi olması lazım olduğundan, biz psevdo-sinifdən :nth-child(1) istifadə edəcəyik, hərf nömrəsi mötərizədə yazılmışdır. Birinci hərf, təbii olaraq, A, ikincisi B, üçüncüsü C və s.-dir. Bu dəst li seçicisinə aşağıdakı kimi əlavə olunur (nümunə 5).
Nümunə 5: Pseudo-class:nth-child-dən istifadə
Kiril li:nth-child(1)::before ( məzmun: "a)"; ) .cyrilic li:nth-child(2)::əvvəl ( məzmun: "b)"; ) .cyrilic li:nth-child(3)::əvvəl ( məzmun: "at)"; )
Bu nümunədə hər hərfdən sonra mötərizə qoyulur, bütün hərflər kiçik hərflərlə yazılır. Siz öz siyahı nömrələmə növünüzü təyin edə bilərsiniz, məsələn, o, nöqtəli böyük hərflərdən, bir və ya iki mötərizədə və ya yalnız hərflərdən ibarət ola bilər. Standart nömrələmədən fərqli olaraq, biz burada istədiyimizi etməkdə sərbəstik. On hərfdən ibarət bir siyahı demək olar ki, bütün vəziyyətlər üçün kifayət olmalıdır, lakin birdən bu kifayət deyilsə, heç bir şey siyahımızı ən azı rus əlifbasının bütün hərflərini daxil etmək üçün genişləndirməyə mane olmur.
Nəhayət, hərflərin düzülməsini və mövqeyini tənzimləyirik, isteğe bağlı olaraq şriftin ölçüsünü, rəngini və digər parametrləri təyin edirik (misal 6).
Nümunə 6. Rus hərfləri ilə siyahı
Siyahı
1. Borş
2. Pike kotletləri
3. Kulebyaka
4. Xama içində göbələklər
5. Kürü ilə pancake
6. kvas
Nəticə bu misalŞəkildə göstərilmişdir. 3.

Çox vaxt nömrələmədən istifadə etməlisiniz: müxtəlif siyahılar, siyahılar yaratarkən, məzmun cədvəlini və ya məzmun cədvəlini tərtib edərkən və s.

CSS nömrələmə prosesini avtomatlaşdırmaq üçün sayğaclardan istifadə edir.

Sadə bir nümunə ilə başlayaq. Sonra, daha mürəkkəb bir şəkildə, onun elementlərinin və alt elementlərinin avtomatlaşdırılmış nömrələnməsi ilə daxili siyahı yaradacağıq.

Sayğacın identifikasiyası

Əvvəlcə sayğacı müəyyənləşdirməlisiniz.

Əks sıfırlama xüsusiyyətindən istifadə edərək sayğaca ad və ilkin qiymət verilir. Ad hər hansı ola bilər, lakin nömrə ilə başlaya bilməz.

Kod parçası:

Bu giriş etiket üçün deyir ilkin qiyməti 3 olan nömrə adlı sayğac quraşdırılıb.

Varsayılan olaraq, sayğacın ilkin dəyəri 0-dır.

Sayğac artımı

Bunun üçün əks artım xüsusiyyətindən istifadə olunur. O, həmçinin sayğac artımlarını - sayğac dəyərinin artacağı nömrəni təyin etmək üçün istifadə olunur.

Kod parçası:

bədən (əks sıfırlama: nömrə 3;)
gövdə p (əks artım: rəqəm 3 ; }

Bu kod parçası deyir ki, paraqraflar ( etiket
) sənədin gövdəsində nömrə sayğacı ilə 3 artımla nömrələnəcəkdir.

Sayğacın ilkin qiyməti 3 və artımı 3 olduğundan birinci abzas 6 nömrələnəcəkdir.

Sayğac artımları üçün standart dəyər 1-dir.

İndi bütün lazımi sayğac parametrləri təyin olunur: ad, ilkin dəyər, artım və nömrələnəcək element. Daha....

Sayğac ekranı

İndi sayğac dəyərini göstərməli və onun yeri üçün qaydaları təyin etməlisiniz. Bu, məzmun xüsusiyyətindən və psevdo-elementlərdən əvvəl və sonra istifadə etməklə edilir.

Məzmun xüsusiyyəti məzmunu əvvəl daxil edir ( əvvəl) və ya sonra ( sonra) müəyyən edilmiş elementdən.

Kod parçası:

bədən (əks sıfırlama: nömrə 3;)
gövdə p:sonra ( əks artım: 3 nömrə ; məzmun : " bərabərdir " sayğac(nömrə) "." ;)

Beləliklə, əvvəlki kod parçasına biz “bərabərdir” sözünü çap edən məzmun xassəsini, ardınca sayğac nömrəsinin dəyərini və “nöqtə” əlavə etdik. . Bütün bunlar paraqraf məzmunundan sonra səhifəyə daxil edilir ( etiket
), bu, sonrakı psevdo-elementin dediyidir.

Nəhayət...

Aşağıda təsvir olunan nümunə verilmişdir.

Kod parçası:

2 dəfə 3

3 dəfə 3

4 dəfə 3

5 dəfə 3

Nəticə:

Avtomatik nömrələmə ilə daxili siyahılar

Daxili siyahıların nömrələnməsi prosesini avtomatlaşdırmaq üçün sayğaclardan istifadə nümunəsinə baxaq.

Siz artıq həm HTML-dən, həm də CSS-də siyahıları öyrənməkdən bilməlisiniz ki, siyahı elementləri avtomatik olaraq nömrələnir. Ancaq bu nömrələmə ən sadədir.

Nə haqqında avtomatik nömrələmə 1.1, 1.2, 2.1, 2.2 və s. kimi yarımbəndlər?

Bu problem daxili siyahıların nömrələnməsi prosesini avtomatlaşdırmağa imkan verən sayğaclardan istifadə etməklə həll edilir.

Kod parçası:

CSS-də avtomatik nömrələmə
1. İlk siyahı elementi
2. Siyahıdakı ikinci maddə
3. Siyahıdakı üçüncü maddə

CSS istifadə edərək, HTML iç içə nömrələnmiş siyahılarda düzgün nömrələmə. Markerli Siyahılar üçün Standart Güllələrin Nömrələnməsi üçün CSS üslubları

Siyahının nömrələnməsi

Nömrələrin yazılması

Rus hərfləri ilə siyahı

Sayğacın identifikasiyası

Sayğac artımı

Sayğac ekranı

Nəhayət...

Avtomatik nömrələmə ilə daxili siyahılar

html

Ənənəvi olaraq yöndəmsiz bir yol.

css

html

Gözəl və düzgün yol.

css

html

siyahı stili növü

siyahı tərzi-şəkil

siyahı tərzi-mövqe

siyahı tərzi