Ստեղծելու համար օգտագործվում են Html ol ul տարրեր: ul li CSS ցուցակների ոճավորման օրինակներ: Համարակալված ցուցակ՝ օգտագործելով ֆոն

Միակ տարբերությունն այն է, որ այս պիտակը խստորեն պատրաստված է ցուցակների համարակալման համար: Պիտակի անվանումը գալիս է անգլերեն «Ordered List» հապավումից՝ համարակալված ցուցակ։

Պիտակների շարահյուսություն

1. Նյութ թիվ 1
2. Նյութ #2
3. Նյութ թիվ 3
4. ...

Որտեղ type="value" հատկանիշը կարող է վերցնել հետևյալ արժեքները

• A - սահմանում է մարկերներ մեծատառ լատիներեն տառերի տեսքով (A, B, C ..);
• a - սահմանում է մարկերներ փոքրատառ լատիներեն տառերի տեսքով (a, b, c..);
• I - սահմանում է մարկերներ մեծ հռոմեական թվերի տեսքով (I, II, III, IV ..);
• i - սահմանում է մարկերներ փոքր հռոմեական թվերի տեսքով (i, ii, iii, iv..);
• 1 (կանխադրված) - սահմանում է մարկերներ արաբական թվերի տեսքով (1, 2, 3 ..);

Start="value" հատկանիշը նշում է հաշվետվության մեկնարկային արժեքը (մեկնարկային արժեքը):

Reversed հատկանիշը սահմանում է հակադարձ հաշվարկ (անհրաժեշտության դեպքում):

Նշել

պահանջում է փակման պիտակի օգտագործում

Ցուցակի տարրերը ձևավորելու համար օգտագործվում է զույգ թեգ

1. . Բացման և փակման պիտակների միջև կան առանձին բառեր, արտահայտություններ, պարբերություններ, պատկերներ, կոդի կտորներ և շատ ավելին, որոնք պարբերակներով ցանկի բովանդակությունն են:

   Նշում

   Ցանկի ներսում հնարավոր է փոխել հաշիվը ձեր սեփականին: Այս պիտակի համար կա հատուկ հատկանիշ value="":

2. , որին վերագրվում է որոշ թվային արժեք։ Օրինակ

   1. Նյութ թիվ 1
   10. Նյութ #2
   11. Նյութ թիվ 3

   Օրինակներ html-ում համարակալված ցուցակներով (

   )

   Օրինակ 1. html-ի համարակալված ցանկ լատինատառերի տեսքով

   Օրինակ մեծատառերով

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Փոքրատառ օրինակ

   1. Նյութ #10
   2. Կետ թիվ 11
   3. Կետ թիվ 12

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Օրինակ 2. Համարակալված html ցուցակ հռոմեական տառերով

   Օրինակ մեծատառերով

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Փոքրատառ օրինակ

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Օրինակ 3. Համարակալված html ցուցակ՝ տարբեր մեկնարկային դիրքերով

   Օրինակ, որը ցույց է տալիս start հատկանիշի հնարավորությունները, որը թույլ է տալիս սահմանել հաշվիչի մեկնարկային արժեքը։

   50. Նյութ թիվ 1
   51. Նյութ #2
   52. Նյութ թիվ 3

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3

   Օրինակ 4. html համարակալված ցուցակներում հաշվարկի փոփոխություն

   Ստորև բերված է պիտակներում նոր տարրեր ցուցադրելիս հաշվիչի արժեքները փոխելու ունակությամբ օրինակ՝ օգտագործելով արժեք հատկանիշը:

3. .

   10. Նյութ թիվ 1
   11. Նյութ #2
   100. Նյութ թիվ 3
   101. Նյութ #4

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3
   4. Նյութ #4

   Օրինակ 5. Հետադարձելի համարակալված ցուցակ html-ում

   Ստորև բերված է հակադարձ համարակալված ցուցակի օրինակ (հաշվել հակառակ հերթականությամբ):

   10. Նյութ թիվ 1
   11. Նյութ #2
   12. Նյութ թիվ 3
   13. Նյութ #4

   Ահա թե ինչ տեսք ունի էջում.

   1. Նյութ թիվ 1
   2. Նյութ #2
   3. Նյութ թիվ 3
   4. Նյութ #4

   Համարակալված ցուցակները տարրերի մի շարք են իրենց սերիական համարներով: Համարակալման տեսակը և տեսակը կախված է պիտակի ատրիբուտներից

   , որն օգտագործվում է ցուցակը ստեղծելու համար։ Համարակալված ցուցակի յուրաքանչյուր տարր նույնացվում է պիտակով
   1. ինչպես ցույց է տրված ստորև:
      1. Առաջին կետ
      2. Երկրորդ պարբերություն
      3. Երրորդ պարբերություն

      Եթե ​​դուք չեք նշում որևէ լրացուցիչ հատկանիշ և պարզապես գրեք պիտակ

      , ապա արաբական թվերով ցուցակը (1, 2, 3,...) օգտագործվում է լռելյայն, ինչպես ցույց է տրված օրինակ 11.3-ում։

      Օրինակ 11.3. Ստեղծեք համարակալված ցուցակ

      Աշխատել ժամանակի հետ

      1. ճշտապահություն ստեղծելը (դուք երբեք որևէ բանից չեք ուշանա);
      2. ճշտապահության բուժում (դուք երբեք ոչ մի տեղ չեք շտապի);
      3. ժամանակի և ժամացույցի ընկալման փոփոխություն.
      
      
      

      Արդյունք այս օրինակըցույց է տրված նկ. 11.3.

      Բրինձ. 11.3. Համարակալված ցուցակի տեսք

      Նկատի ունեցեք, որ համարակալված ցանկը նաև ավելացնում է տեքստի վերևում, ներքևում և ձախ մասում ավտոմատ ներքև:

      Հետևյալ արժեքները կարող են հանդես գալ որպես համարակալման տարրեր.

      • Արաբական համարներ (1, 2, 3, ...);
      • մեծատառ լատինատառ (A, B, C, ...);
      • փոքրատառ լատինատառ (a, b, c, ...);
      • մեծ հռոմեական թվեր (I, II, III, ...);
      • փոքրատառ հռոմեական թվեր (i, ii, iii, ...):

      Թեգի type հատկանիշը օգտագործվում է համարակալված ցուցակի տեսակը նշելու համար։

      . Դրա հնարավոր արժեքները տրված են աղյուսակում: 11.2.
      Ներդիր 11.2. Համարակալված ցուցակի տեսակները

      Ցուցակի տեսակը	HTML կոդը	Օրինակ
      Արաբական թվեր		1. Չեբուրաշկա 2. Կոկորդիլոս Գենա 3. Շապոկլյակ
      Լատինական այբուբենի մեծատառեր		Ա.Չեբուրաշկա Բ Կոկորդիլոս Գենա C. Shapoklyak
      Լատինական այբուբենի փոքրատառերը		ա. Չեբուրաշկա բ. Կոկորդիլոս Գենա գ. Շապոկլյակ
      հռոմեական թվեր մեջ մեծատառ		I. Չեբուրաշկա II. Կոկորդիլոս Գենա III. Շապոկլյակ
      Հռոմեական թվեր փոքրատառով		ես. Չեբուրաշկա ii. Կոկորդիլոս Գենա iii. Շապոկլյակ

      Ցանկը որոշակի արժեքով սկսելու համար օգտագործեք պիտակի start հատկանիշը

      . Կարևոր չէ, թե ցուցակի որ տեսակն է սահմանվում տիպի հետ, start հատկանիշը նույնն է աշխատում ինչպես հռոմեական, այնպես էլ արաբական թվերի համար: Օրինակ 11-4-ը ցույց է տալիս, թե ինչպես կարելի է ցուցակ ստեղծել՝ օգտագործելով ութից սկսվող մեծատառ հռոմեական թվերը:

      Օրինակ 11.4. Ցուցակի համարակալում

      8. King Magnum XLIV
      9. Թագավոր Զիգֆրիդ XVI
      10. Թագավոր Սիգիզմունդ XXI
      11. Թագավոր Հուսբրանդտ I
      
      
      

      Այս օրինակի արդյունքը ներկայացված է Նկ. 11.4.

      

      Բրինձ. 11.4. Համարակալված ցուցակ հռոմեական թվերով

      HTML ցուցակներօգտագործվում է հարակից տեղեկատվության խմբավորման համար: Ցուցակների երեք տեսակ կա.

      կետավոր ցուցակ —

      - ցանկի յուրաքանչյուր տարր
      • նշվում է մարկերով
        համարակալված ցուցակ —
        - ցանկի յուրաքանչյուր տարր
        1. նշվում է թվով
           սահմանումների ցանկ— — կազմված է եզրային զույգերից
           —
           սահմանում.

           Յուրաքանչյուր ցուցակ իրենից ներկայացնում է ցանկի տարրեր կամ տերմինների սահմանման զույգեր պարունակող կոնտեյներ: Ցանկի տարրերն իրենց պահում են բլոկի տարրերի պես, որոնք դրված են մեկը մյուսի տակ և զբաղեցնում են կոնտեյների բլոկի ամբողջ լայնությունը: Ցանկի յուրաքանչյուր տարր ունի լրացուցիչ տուփ այն կողմում, որը դասավորության մաս չէ:

           HTML ցուցակների ստեղծում

           1. Բլետավորված ցուցակ

           կետավոր ցուցակչպատվիրված ցուցակ է (Անգլերեն չպատվիրված ցուցակից). Ստեղծվել է զույգ պիտակով

           . Ցանկի տարրերի նշիչը պիտակ է, օրինակ՝ լցված շրջան:

           Բրաուզերները լռելյայնորեն ավելացնում են հետևյալ ձևաչափումը ցուցակի վանդակում.

           Ցանկի յուրաքանչյուր տարր ստեղծվում է զույգ պիտակի միջոցով

        2. (Անգլերեն ցուցակի կետից).
        մատչելի .
        • Microsoft-ը
        • Google
        • Apple
        Բրինձ. 1. Բլետավորված ցուցակ

        2. Համարակալված ցուցակ

        համարակալված ցուցակստեղծվել է օգտագործելով զույգ պիտակը: Ցանկի յուրաքանչյուր տարր նույնպես ստեղծվում է տարրով

      • . Բրաուզերը ինքնաբերաբար համարակալում է տարրերը հերթականությամբ, և եթե այդպիսի ցանկի մեկ կամ մի քանի տարրեր ջնջվեն, մնացած թվերն ավտոմատ կվերահաշվարկվեն:

        Ցուցակի բլոկը նաև ունի լռելյայն դիտարկիչի ոճերը.

      • հասանելի է արժեք հատկանիշը, որը թույլ է տալիս փոխել ընտրված ցանկի տարրի լռելյայն համարը: Օրինակ, եթե ցանկի առաջին տարրը սահմանված է
      • , ապա համարակալման մնացած մասը կվերահաշվարկվի նոր արժեքի համեմատ։

        Tag-ի համար

        հասանելի են հետևյալ հատկանիշները.
        Աղյուսակ 1. Պիտակի հատկանիշներ

        Հատկանիշ	Նկարագրություն, ընդունված արժեք
        հակադարձել	Reversed հատկանիշը սահմանում է ցուցադրել ցուցակը հակառակ հերթականությամբ (օրինակ՝ 9, 8, 7…):
        սկսել	Start հատկանիշը սահմանում է սկզբնական արժեքը, որից կսկսվի համարակալումը, օրինակ՝ շինարարությունը առաջին կետին կտրվի «10» հերթական համարը: Կարող եք նաև միաժամանակ սահմանել համարակալման տեսակը, օրինակ. .
        տիպ	Type հատկանիշը նշում է նշիչի տեսակը, որը պետք է օգտագործվի ցանկում (տառերի կամ թվերի տեսքով): Ընդունված արժեքներ. 1-ը լռելյայն արժեքն է, տասնորդական համարակալումը: A - ցուցակի համարակալում այբբենական կարգով, մեծատառերով (A, B, C, D): ա - ցուցակի համարակալում այբբենական կարգով, փոքրատառերով (a, b, c, d). I - համարակալում հռոմեական մեծ թվերով (I, II, III, IV): i - համարակալում հռոմեական փոքրատառ թվերով (i, ii, iii, iv):

        1. Microsoft-ը
        2. Google
        3. Apple
        Բրինձ. 2. Համարակալված ցուցակ

        3. Սահմանումների ցանկ

        Սահմանումների ցուցակներստեղծվել է պիտակով

        . Թեգն օգտագործվում է տերմին ավելացնելու համար
        , և սահմանում տեղադրելու համար օգտագործեք պիտակը
        .

        Սահմանումների ցանկի բլոկը ունի հետևյալ լռելյայն բրաուզերի ոճերը.

        Պիտակների համար

        ,

        Եվ

        մատչելի .

        Ռեժիսոր:

        Պետր Տոչիլին

        Դերերում՝

        Անդրեյ Գայդուլյան

        Ալեքսեյ Գավրիլով

        Վիտալի Գոգունսկի

        Մարիա Կոժևնիկովա

        
        Բրինձ. 3. Սահմանումների ցանկ

        4. Nested List

        Հաճախ պարզ ցուցակների հնարավորությունները բավարար չեն, օրինակ՝ բովանդակության աղյուսակ ստեղծելիս առանց բնադրված իրեր. Ներդրված ցուցակի նշումը կլինի.

        • 1-ին պարբերություն.
        • 2-րդ կետ.
          • 2.1 ենթակետ.
          • 2.2 ենթակետ.
            • 2.2.1 ենթակետ.
            • 2.2.2 ենթակետ.
          • 2.3 ենթակետ.
        • 3-րդ կետ.

        
        Բրինձ. 4. Nested List

        5. Բազմաստիճան համարակալված ցուցակ

        Բազմամակարդակ ցուցակն օգտագործվում է ցուցակի տարրերը տարբեր մակարդակներում տարբեր նահանջներով ցուցադրելու համար: Բազմաստիճան համարակալված ցուցակի նշումը կլինի.

        1. պարբերություն
        2. պարբերություն
           1. պարբերություն
           2. պարբերություն
           3. պարբերություն
              1. պարբերություն
              2. պարբերություն
              3. պարբերություն
           4. պարբերություն
        3. պարբերություն
        4. պարբերություն

        Այս լռելյայն նշումը կստեղծի նոր համարակալում յուրաքանչյուր ներդիր ցուցակի համար՝ սկսած մեկից: Ներդրված համարակալում կատարելու համար անհրաժեշտ է օգտագործել հետևյալ հատկությունները.
        counter-reset-ը վերակայում է մեկ կամ մի քանի հաշվիչներ՝ տալով վերակայման արժեք.
        counter-increment-ը սահմանում է հաշվիչի ավելացման արժեքը, այսինքն. ինչ քայլով է համարակալվելու յուրաքանչյուր հաջորդ կետ.
        բովանդակություն - ստեղծված բովանդակություն, այս դեպքում պատասխանատու է ցուցակի յուրաքանչյուր կետից առաջ թվեր ցուցադրելու համար:

        Ol ( /* հեռացնել ստանդարտ համարակալումը */ list-style. none; /* Մենք նույնացնում ենք հաշվիչը և տալիս ենք li անունը: Հաշվիչի արժեքը նշված չէ. լռելյայն այն 0 է */ counter-reset: li; ) li:before ( /* Մենք սահմանում ենք այն տարրը, որը համարակալվելու է - li: Նախորդ կեղծ տարրը ցույց է տալիս, որ բովանդակությունը տեղադրվում է բովանդակության ցուցակից առաջ: 1 ).*/ հակադարձ՝ li; /* Content հատկությունը ցույց է տալիս ցանկի տարրի համարը։ counters() նշանակում է, որ ստեղծված տեքստը այդ անունով բոլոր հաշվիչների արժեքներն են։ Չակերտների մեջ նշված կետն ավելացնում է տարանջատող կետ թվանշանների միջև, և յուրաքանչյուր ցուցակի տարրի բովանդակությունից առաջ ավելացվում է բացատ։
        Բրինձ. 5. Բազմաստիճան համարակալված ցուցակ

      Նկարագրություն

      Հատկանիշներ

      reversed. Նշում է, որ ցանկի տարրերը կլինեն նվազման կարգով (աճման կարգի փոխարեն): Բուլյան հատկանիշի հնարավոր արժեքներ.

      Նշում. հակադարձ հատկանիշը միայն աջակցվում է Chrome բրաուզերներև Safari.

      Սկիզբ. Սահմանում է մեկնարկային ամբողջ արժեքը, որից համարակալվելու են ցանկի տարրերը: Օրինակ » տեսակը. Նշում է նշիչի տեսակը, որը պետք է օգտագործվի ցանկի տարրերի համար.

      • 1 - տասնորդական թվեր (1, 2, 3, 4 ...).
      • Ա- Լատինական տառերը այբբենական կարգով, մեծատառերով (A, B, C, D ...):
      • ա- Լատինական տառերը այբբենական կարգով, փոքրատառերով (a, b, c, d ...):
      • Ի- Հռոմեական թվեր մեծատառով (I, II, III, IV ...):
      • ես- Հռոմեական թվեր փոքրատառերով (i, ii, iii, iv ...):
      Օրինակ "

      Նշել

      նաև աջակցում է Գլոբալ հատկանիշներին և իրադարձություններին

      Կանխադրված ոճ

      ol (ցուցադրում՝ բլոկ; ցուցակի ոճի տեսակ՝ տասնորդական; լուսանցք վերև՝ 1մ; լուսանցք՝ ներքև՝ 1մ; լուսանցք՝ ձախ՝ 0; լուսանցք՝ աջ՝ 0; լիցք՝ ձախ՝ 40px; )

      Օրինակ

      1. Սուրճ
      2. Թեյ
      3. Կաթ
      50. Սուրճ
      51. Թեյ
      52. Կաթ
      HTML պիտակներ

      Նշանակություն և կիրառություն

      Համարակալված (պատվիրված) ցուցակը նախատեսված է որոշակի հերթականությամբ հաջորդող տարրերի համար: Համարակալված ցուցակը սկսվում է պիտակով

      (կարճ անգլերեն պատվիրված ցուցակ- պատվիրված ցուցակ): Ցանկի յուրաքանչյուր տարր սկսվում է պիտակով
      1. (ցուցակի կետ):

         Բրաուզերի աջակցություն

         Հատկանիշ			Օպերա		IExplorer	եզր
         սկիզբ, տեսակ	Այո՛	Այո՛	Այո՛	Այո՛	Այո՛	Այո՛
         հակադարձել	Այո՛	Այո՛	Այո՛	Այո՛	Ոչ	Ոչ

         Հատկանիշներ

         Հատկանիշ	Իմաստը	Նկարագրություն
         կոմպակտ	կոմպակտ	Չի աջակցվում HTML5-ում: Նշում է, որ ցուցակը պետք է լինի ավելի փոքր, քան սովորական չափը (գծի բարձրությունը՝ 80%): Այս հատկանիշի փոխարեն օգտագործեք CSS:
         	հակադարձել	Նշում է, որ համարակալված (պատվիրված) ցուցակի հերթականությունը պետք է լինի նվազող: Հատկանիշը չի աջակցվում բրաուզերների կողմից Internet Explorerև եզր:
         սկսել	թիվ	Նշում է պատվիրված (պատվիրված) ցուցակի սկզբնական արժեքը: Արժեքները պետք է լինեն ամբողջ թվեր, բացասական արժեքները թույլատրվում են: Երբ օգտագործվում է տառերի հետ (տեսակ = "A" և տեսակ = "a"), հատկանիշի արժեքում նշված թիվը այբուբենի տառի հերթական համարն է: Օրինակ, start = «4»-ը կհամապատասխանի տառին «Դ»և ցուցակը կսկսվի նրանով: Սկսել = «27» արժեքը օգտագործելիս հաշվիչը զրոյացվում է, և ցուցակը դառնում է երկնիշ («27» = «AA», «28» = «AB», «29» = «AC»...):
         տիպ	1 (կանխադրված) Մեծ) a (փոքրատառ) Ես (հռոմեական մեծ) ես (հռոմեական փոքր)	Նշում է նշիչի տեսակը, որն օգտագործվում է պատվիրված (պատվիրված) ցուցակ ստեղծելու համար:

         Օգտագործման օրինակ

         1. Առաջին կետԵրկրորդ պարբերություն
         2. Երրորդ պարբերություն
         
         
         

         Էջում այսպիսի տեսք կունենա.

         1. Առաջին կետ.
         2. Երկրորդ կետ.
         3. Երրորդ կետ.

         Եթե ​​ցանկանում եք, որ ցանկը սկսվի որոշակի թվից (ոչ թե 1-ից), ապա պետք է նշեք սկզբնական հատկանիշը պիտակի համար:

         .

         Օրինակ:

         Մեկ այլ հետաքրքիր հատկանիշ է տեսակը, որը թույլ է տալիս նշել այբբենական համարակալումը («A» - մեծատառ, «a» - փոքրատառ), կամ համարակալել հռոմեական թվերից («I» - մեծատառ, «i» - փոքրատառ):

         Դիտարկենք մի օրինակ, որը ներկայացնում է տեսակի հատկանիշի բոլոր հնարավոր արժեքները (բացի լռելյայն արժեքից).

         >
         1. Առաջին կետԵրկրորդ պարբերություն
         2. Երրորդ պարբերություն
         >
         1. Առաջին կետԵրկրորդ պարբերություն
         2. Երրորդ պարբերություն
         >
         1. Առաջին կետԵրկրորդ պարբերություն
         2. Երրորդ պարբերություն
         >
         1. Առաջին կետԵրկրորդ պարբերություն
         2. Երրորդ պարբերություն
         
         
         

         Ես ձեր ուշադրությունը հրավիրում եմ այն ​​փաստի վրա, որ թույլատրվում է ձևավորել համարակալված (պատվիրված) ցուցակներ, որոնք տեղակայված են այլ համարակալված ցուցակներում (ցուցակի տարրի ներսում):

         3. ):
            1. Առաջին կետ
               1. Առաջին կետԵրկրորդ պարբերություն
               2. Երրորդ պարբերություն
               Երկրորդ պարբերություն
               3. Երրորդ պարբերություն
               
               
               

               Էջում այսպիսի տեսք կունենա.