მარკერები css-ში. html-ში ბურთულიანი სიის შექმნა ცოცხალი მაგალითის გამოყენებით

CSS შესაძლებელს ხდის შექმნას ბურთულებიანი და დანომრილი სიები, შექმნას პუნქტების სიები სურათებით და, საჭიროების შემთხვევაში, საერთოდ ამოიღოს ბურთულებიანი სიის ნიშნები.

CSS პუნქტების სიის სტილები.

სიის სტილის ტიპი

სიის სტილის ტიპი:დისკი | წრე | კვადრატი | ათობითი | ქვედა რომაული | ზემო რომაული | ქვედა ალფა | ზედა ალფა | არცერთი;

მნიშვნელობა:

დისკი - ბურთულებიანი სია შევსებული წრის სახით

წრე – ბურთულებიანი სია შეუვსებელი წრის სახით

კვადრატი – ბურთულებიანი სია შევსებული კვადრატის სახით

ათობითი - დანომრილი სია არაბული ნომრებით (1,2,3 და ა.შ.)

ზედა რომაული - დანომრილი სია დიდი რომაული ციფრებით (I, II, III, IV და ა.შ.)

ქვედა რომაული - დანომრილი სია მცირე რომაული ციფრების გამოყენებით (i,ii,iii,iv და ა.შ.)

ზედა ალფა - დანომრილი სია დიდი ასოებით (A,B,C და ა.შ.)

ქვედა ალფა - დანომრილი სია მცირე ასოებით (a,b,c და ა.შ.)

არცერთი - მარკერი არ არის.

მაგალითი:

• გჯეროდეს საუკეთესოს, მოელოდე უარესს.
• ცხოვრება დაავადებაა, ფატალური შედეგით.
• Არასოდეს თქვა არასოდეს.

შედეგი:

არის შემთხვევები, როდესაც სიაში მარკერის ჩვენება უნდა მოიხსნას. ამისათვის ჩაწერეთ CSS კოდში

სიის სტილის ტიპი:არცერთი;

მაგალითი:

• გჯეროდეს საუკეთესოს, მოელოდე უარესს.
• Არასოდეს თქვა არასოდეს.

შედეგი:

თქვენ შეგიძლიათ შეცვალოთ სიაში არსებული ჩვეულებრივი მარკერები თქვენი საკუთარი სურათებით. ეს შეიძლება გაკეთდეს list-style-image თვისების გამოყენებით.

სია-სტილი-იმიჯი

list-style-image: url (image.png);

მაგალითი:

• გჯეროდეს საუკეთესოს, მოელოდე უარესს.
• სიცოცხლე ფატალური შედეგის მქონე დაავადებაა.
• Არასოდეს თქვა არასოდეს.

შედეგი:

თქვენ ასევე შეგიძლიათ დააყენოთ ბურთულებიანი სიის მანძილი ტექსტიდან. ეს შეიძლება გაკეთდეს padding-left თვისების გამოყენებით li სელექტორზე.

მაგალითი:

• გჯეროდეს საუკეთესოს, მოელოდე უარესს.
• სიცოცხლე ფატალური შედეგის მქონე დაავადებაა.
• Არასოდეს თქვა არასოდეს.

შედეგი:

შემდეგი ამოცანაა მარკერის ფერის შეცვლა ტექსტის ფერის შეცვლის გარეშე. Როგორ არის ეს შესაძლებელი? მარკერის ფერი შეიძლება შეიცვალოს ტესტში ტეგის დამატებით .
ეს ასე გამოიყურება:

მაგალითი:

• გჯეროდეს საუკეთესოს, მოელოდე უარესს.
• სიცოცხლე ფატალური შედეგის მქონე დაავადებაა.
• Არასოდეს თქვა არასოდეს.

შედეგი:

ზოგადი თემის დამატება.
თუ რაიმე მიზეზით გჭირდებათ მარკერების სიის ნუმერაციის დაყენება არა ნულიდან, არამედ, ვთქვათ, 8-დან, შეგიძლიათ გააკეთოთ ეს ნაბიჯი.

მაგალითი:

• გჯეროდეთ საუკეთესოს, ველით ყველაზე უარესს
• სიცოცხლე ფატალური დაავადებაა
• არასოდეს თქვა არასოდეს
• სულ ეს ვიცოდი. პუნქტი 4

შედეგი:

ეს თემა დასრულდა.

HTML-ში ტეგების მთელი ნაკრები პასუხისმგებელია სიების ორგანიზებაზე, რომელთა ორგანიზაცია უნდა შეესაბამებოდეს მონაცემთა სტრუქტურირების გარკვეულ წესებს.

HTML სტანდარტის მეხუთე ვერსია მხარს უჭერს 3 ტიპის სიებს: დანომრილი სიები, ბურთულები და განმარტებითი სიები. ის ასევე უზრუნველყოფს სიების ერთმანეთში ჩადგმის უნარს, ქმნის წყობილ მრავალ დონის სიებს.

დანომრილი სია

დანომრილი სია- ეს არის ელემენტების ერთობლიობა (სიის ელემენტები), რომლებსაც აქვთ გარკვეული თანმიმდევრობა. დანომრილი სიის თითოეულ პუნქტს აქვს უნიკალური მარკერი, რომელიც მიუთითებს იმ თანმიმდევრობით, რომლითაც ელემენტი გამოჩნდება სიის სხვა ელემენტებთან შედარებით. ნაგულისხმევად, დანომრილი სიის ელემენტის მარკერები არის ნომრები. პირველი პუნქტი დანომრილია 1-ით, მეორე - 2 და ა.შ.

დანომრილი სიების ყველაზე გავრცელებული მაგალითებია სხვადასხვა კერძების მომზადების რეცეპტები. ვინაიდან ნებისმიერი რეცეპტი არის დანომრილი სია, მოქმედებების მკაფიო თანმიმდევრობით.

HTML-ში დანომრილი სიების შესაქმნელად გამოიყენეთ ტეგი

, რომლის შიგნითაც განთავსებულია სიის ელემენტები მონაცემებით. სიის თითოეული ელემენტი მითითებულია ტეგის გამოყენებით
1. :

   დანომრილი სია:

   1. ყავა
   2. ჩაი
   3. რძე
   
   
   სცადე »

   შენიშვნა: ტეგი

   შეიძლება შეიცავდეს მხოლოდ თეგებს, როგორც საბავშვო ელემენტებს
   1. , ანუ დანომრილი სიის ყველა შინაარსი უნდა განთავსდეს ელემენტების შიგნით
   2. . მონიშნეთ
   3. , თავის მხრივ, არ აქვს შეზღუდვები შინაარსზე, ამიტომ შეგიძლიათ მასში განათავსოთ აბზაცები, სურათები, ლინკები, ცხრილები, სხვა სიები და ა.შ.

      ბურთულებიანი სია

      ბურთულებიანი სია- ეს არის უნომრო, ანუ ელემენტების უწესრიგო სიები, რომელთა თანმიმდევრობას მნიშვნელობა არ აქვს. სიის ყველა ელემენტს აქვს ერთი და იგივე ბურთულები და ნაგულისხმევად ისინი გამოჩნდებიან პატარა შავი წრეების სახით.

      HTML-ში ბურთულიანი სიების შესაქმნელად გამოიყენეთ ტეგი

      , რომელშიც თავად სიის ელემენტებია განთავსებული (როგორც დანომრილი სიების შემთხვევაში, ტეგი
      • , რომელიც შეიცავს სიის ყველა ნაჩვენებ შიგთავსს):

        ბურთულების სია:

        • ყავა
        • ჩაი
        • რძე
        
        
        სცადე »

        მარკერების ტიპები

        დანომრილი სიის ბურთულების ტიპები შეიძლება შეიცვალოს ტიპის ატრიბუტის გამოყენებით. ეს ატრიბუტი მხარს უჭერს მარკერების ხუთ ტიპს:

        ბურთულებიანი სიებს არ გააჩნიათ ტიპის ატრიბუტი, ასე რომ თქვენ ვერ შეძლებთ ბურთულების ტიპის შეცვლას ბურთულიანი სიისთვის HTML-ის გამოყენებით. მარკერის ტიპის შესაცვლელად, ამ შემთხვევაში, შეგიძლიათ გამოიყენოთ CSS თვისება list-style-type , რომლითაც, ნაგულისხმევი მნიშვნელობის გარდა, შეგიძლიათ აირჩიოთ მარკერის კიდევ ორი ​​ტიპი: წრე ან კვადრატი.

        სიის მარკერების შეცვლა:

        დანომრილი სია type="a" ატრიბუტით:

        1. ვაშლი
        2. ბანანი
        3. ლიმონები

        დანომრილი სია type="I" ატრიბუტით:

        1. ვაშლი
        2. ბანანი
        3. ლიმონები

        ბურთულებიანი სიის მარკერების ტიპები:

        • ვაშლი
        • ბანანი
        • ლიმონები
        • ვაშლი
        • ბანანი
        • ლიმონები
        
        
        სცადე »

        CSS თვისების list-style-type , გარდა მარკერების ტიპებისა პუნქტიანი სიებისთვის, აქვს მრავალი სხვადასხვა ტიპის მარკერი დანომრილი სიებისთვის. მაგრამ ერთი სტანდარტული ტიპის მარკერის შეცვლა ყოველთვის არ არის საკმარისი ლამაზი სიის შესაქმნელად. სიების შესაქმნელად უმჯობესია გამოიყენოთ CSS, რომელიც საშუალებას გაძლევთ არა მხოლოდ შეცვალოთ მარკერის გარეგნობა, არამედ შეცვალოთ მარკერები სურათებით, გააკონტროლოთ მათი ადგილმდებარეობა და აკონტროლოთ ჩაღრმავება. თქვენ ხედავთ როგორ გააკეთოთ ეს ყველაფერი.

        ჰორიზონტალური სია

        თუ თქვენ იყენებთ HTML სიის ველს ჰორიზონტალური მენიუს შესაქმნელად, მაშინ მოგიწევთ სიის ელემენტების დალაგება ერთმანეთის მიყოლებით იმავე ხაზზე. ამის გაკეთება შეუძლებელია HTML-ის გამოყენებით, ამიტომ მოგიწევთ CSS-ის გამოყენება.

        ჰორიზონტალური სიის შესაქმნელად, თქვენ უნდა დააყენოთ CSS დისპლეის თვისება სიის ელემენტებისთვის inline ან inline-block მნიშვნელობით, იმისდა მიხედვით, თუ რა სხვა თვისებების გამოყენებას აპირებთ.

        დანომრილი სია

        1. ვაშლი
        2. ბანანი
        3. ლიმონები

        ბურთულების სია:

        • ვაშლი
        • ბანანი
        • ლიმონები
        
        
        სცადე »

        ამის შემდეგ, სიის ყველა ელემენტი გაერთიანდება ერთ ხაზზე. გთხოვთ გაითვალისწინოთ, რომ პუნქტები გაქრება სიის ელემენტებიდან და მათ შორის სივრცეც კი არ იქნება, მაგრამ სიის მარცხენა შეწევა დარჩება.

        თქვენ ხედავთ, თუ როგორ უნდა გადააქციოთ ჰორიზონტალური სია ჰორიზონტალურ მენიუდ.

        HTML მარკირების ენაში არის 3 ტიპის სიები - მოწესრიგებული (დანომრილი), უწესრიგო (უნომრო) და განმარტებითი სიები.

        ასეთი სიის შესაქმნელად დაგჭირდებათ 2 ტიპის ელემენტი: ‘ul’ (მოკლე სიის შეურიგებელი, ე.ი. უწესრიგო სია) და ‘li’ (სიის ელემენტი). "li"-ში ჩაწერილი ყველაფერი მონიშნულია მარკერით.

        ასეთი სიის გამოჩენა შეიძლება კონტროლდებოდეს მარკერების ტიპების მითითებით.

        მარკერების ტიპები

        არსებობს სპეციალური ტიპის ატრიბუტი, რომელიც მოთავსებულია სიის ორივე ელემენტში. ეს არის თქვენი მარკერის ტიპი. არსებობს მხოლოდ 3 ტიპი: წრე, დისკი და კვადრატი:

        - კვადრატი
        - დისკი
        - გარშემოწერილობა

        იმის მიხედვით, თუ სად მიუთითებთ მარკერის ტიპს, შეგიძლიათ შეცვალოთ იგი მთელი სიისთვის ან კონკრეტული ელემენტისთვის.

        შეკვეთილი სია

        სიის შესაქმნელად ასევე დაგჭირდებათ 2 ელემენტი: ‘ol’ და ‘li’ (სიის ელემენტი). მარკერები ჩანაცვლებულია რიცხვებით წერტილით. მარტივი სიის მაგალითი:

        1. პირველი ელემენტი
        2. მეორე ელემენტი
        3. ბოლო ელემენტი

        თქვენ შეგიძლიათ აკონტროლოთ შეკვეთილი სიის გამოჩენა სხვადასხვა ტიპის ნუმერაციის მითითებით.

        ნუმერაციის სახეები

        არსებობს სპეციალური ტიპის ატრიბუტი, რომელიც მოთავსებულია "ol" ან "li" ელემენტში. ეს არის თქვენი სიის ტიპი. სულ არის 5 ტიპი:

        - ნუმერაცია არაბული ციფრებით (1, 2, 3)
        - ნუმერაცია დიდი ასოებით (A, B, C)
        - მცირე ასოებით ნუმერაცია (a, b, c)
        - ნუმერაცია დიდი რომაული ციფრებით (I, II, III)
        - ნუმერაცია მცირე რომაული ციფრებით (i, ii, iii)
        - რომელი ნომრიდან დავიწყოთ ნუმერაცია?

        იმისდა მიხედვით, თუ სად მიუთითებთ ნუმერაციის ტიპს, შეგიძლიათ შეცვალოთ იგი მთელი სიისთვის ან კონკრეტული ელემენტისთვის.

        განმარტებების სია

        ლექსიკონის ჩანაწერებისთვის შემუშავებულია განმარტებების სია.

        არსებობს ზოგადი კონტეინერი 'dl'. მის შიგნით არის "dt" (განმარტების ტერმინი) და "dd" (განმარტების აღწერა). უმარტივესი მაგალითი:

        Მარკეტინგის დეპარტამენტის

        ეს დეპარტამენტი ეწევა საქონლისა და მომსახურების პოპულარიზაციას

        Ფინანსური დეპარტამენტი

        ეს განყოფილება ეხება ყველა ფინანსურ ტრანზაქციას

        ყველა სიის ყველა ელემენტი არის ბლოკის ელემენტები. მაგრამ მხოლოდ inline ელემენტები შეიძლება განთავსდეს "dt" ელემენტის შიგნით. თქვენ შეგიძლიათ მოათავსოთ რაც გსურთ "dd" და "li" ელემენტებში. სწორედ აქედან მოდის წყობილი სიები.

        ჩადგმული (შერეული სიები)

        ეს არის მრავალ დონის სიები, რომლებშიც არის იერარქია. ხშირად ასეთი სიები გამოიყენება საიტის რუქის აგებისას. მაგალითი:

        შერეული სია

        დღის ამბები

        დღეს წვიმა

        წვიმს მთელი დღე

        ღამის ამბები

        ღამით წვიმს

        ხვალ ახალი დღე დაიწყება

        კარგი დღე ყველას, ჩემო ძვირფასო მეგობრებო და მკითხველებო. გუშინ აღვნიშნე და მინდა ვთქვა, რომ ყველაფერმა კარგად ჩაიარა, როგორც დაგეგმილი იყო - ოჯახურ წრეში. ისე, ასეც უნდა ყოფილიყო. მაინც ოჯახის წრეში ვისხედით. ისე, 19 ივნისს მეგობრებთან ერთად აღვნიშნავ, ამიტომ ბანკეტის გაგრძელება იქნება. მაგრამ დღეს ჩვენ საბოლოოდ შეგვიძლია დავუბრუნდეთ ყოველდღიურ სამუშაოს (თუმცა შვებულებაში ვარ) და გავაგრძელოთ html ენის სწავლა.

        Შენ იცი? გუშინ მე და ჩემი მეუღლე მხოლოდ იმ სიას ვაკეთებდით, რისი ყიდვა გვჭირდებოდა სახლისთვის, დაბადების დღისთვის, შვებულებისთვის და უბრალოდ გამიელვა: „ოჰ. და შემდეგ სტატიას მივუძღვნი html სიებს. ” ზოგადად, არსებობს ორი ძირითადი ტიპი, ამიტომ მინდოდა ცალკე სტატია დამეძღვნა თითოეულ ტიპს. და დღეს ჩვენ შევისწავლით html ბურთულების ჩამონათვალს.

        რა არის პუნქტიანი სია? ეს არის სპეციალური სია, რომელიც არ შეიცავს რაიმე შეკვეთილ მოქმედებებს, მაგრამ მაინც შეიცავს მნიშვნელობით მსგავსი ელემენტებს. და ასეთი სიები ხაზგასმულია რაიმე სახის ხატებით, მაგალითად, მარკერებით, დეფისებით და ა.შ. აქ ჩემს ბლოგზე ისინი წარმოდგენილია საჩვენებელი თითის სახით და ვიყენებ როცა რაღაცას ჩამოვთვლი. მოდით შევხედოთ მაგალითს.

        კომპიუტერის ნაწილები:

        • დედაპლატა
        • ოპერატიული მეხსიერება
        • HDD
        • ვიდეო კარტა
        • და ა.შ.

        ახლა ვნახოთ, როგორ გავამრავლოთ ეს ყველაფერი html-ში

        ასეთი სიების შესაქმნელად დაგვჭირდება ორი დაწყვილებული .

        • - დაუგეგმავი სია. ეს ტეგი მოთავსებულია სიის დასაწყისში და იხურება ბოლოს. ის გვეუბნება, რომ პუნქტებიანი დაუგეგმავი სია წავა აქ.
          • — სიის ელემენტი (სიის ელემენტი). ეს ტეგები შეიცავს სიის თითოეულ ელემენტს.

          სინამდვილეში, ბუკლეტიანი სიის შექმნის პროცედურა ძალიან მარტივია და მე გაჩვენებთ მაგალითით:

          • პეჟო
          • ოპელი

          როდესაც შეინახავთ დოკუმენტს და გახსნით მას ბრაუზერში, სია ასე გამოიყურება. თავად ნახეთ, სცადეთ.

          

          ატრიბუტები

          და, რა თქმა უნდა, არ შემიძლია არ გითხრათ ამ ტეგებთან დაკავშირებულების შესახებ. მართალია, სინამდვილეში, ეს ატრიბუტები აღარ გამოიყენება html-ში, რადგან ყველაფერი უფრო მარტივი და მოსახერხებელია სტილის საშუალებით, ანუ CSS. მაგრამ მაინც მინდა გითხრათ ზოგადი განვითარებისთვის, ამიტომ გაგაცნობთ ტიპის ატრიბუტს და მის მნიშვნელობებს.

          ტიპის ატრიბუტი დაყენებულია მარკერის ტიპის შესაცვლელად, მაგრამ როგორც ვთქვი, დღევანდელ რეალობაში მისი დაყენება ჩვეულებრივი აღარ არის, თუმცა ის მაინც მუშაობს.

          

          • - ეს მნიშვნელობა ნაგულისხმევია, ამიტომ მის დაზუსტებას აზრი არ აქვს. მარკერები ჰგავს შავი შევსებულ წრეებს;
            • — ამ მნიშვნელობის წყალობით, მარკერი დარჩება მრგვალი, მაგრამ აღარ შეივსება;
              • - ამ შემთხვევაში, მარკერები გადაიქცევა პატარა შავ კვადრატებად.

                სცადეთ თავად ნახოთ როგორ მუშაობს და ნახავთ ყველა ცვლილებას.

                

                ჩადგმული სია

                არის შემთხვევები, როდესაც თქვენ არ დაკმაყოფილდებით ერთი სიით, შემდეგ კი ჩვენ უბრალოდ უნდა შევქმნათ ჩადგმული სია, რათა ყველაფერი სწორად გავანაწილოთ. ავიღოთ მანქანების ჩვენი მაგალითი. წინა მაგალითებში მე უბრალოდ შევადგინე მანქანების სია, მაგრამ ახლა მოდით დავამატოთ კიდევ რამდენიმე მოდელი თითოეულ ბრენდს.

                ამის გაკეთება აბსოლუტურად მარტივია, უბრალოდ გადადით ამ ტეგზე

              • , რომლის გაფართოება გვინდა, დავამატოთ სიის ახალი კონტეინერი
                და უკვე ჩადეთ ტეგების სხვა ნაკრები
                • რომელთა შორის დაიწერება მანქანის მოდელები. Ყველაფერი გასაგებია? თუ არა, მაშინ ვნახოთ, როგორ გამოიყურება კოდში.

                  

                  ახლა ჩვენ ვინახავთ და ვაწარმოებთ მთელ ნივთს ბრაუზერში. ნახეთ, რა მივიღეთ: ახლა არის კიდევ ერთი ახალი სია სიის თითოეულ ელემენტში. ეს არის ის, რისკენაც ჩვენ ვიბრძოდით. და თუ შენიშნეთ, ნაგულისხმევი მარკერები განსხვავებულად არის დაყენებული, ვიდრე მშობელი. ეს კეთდება მიზანმიმართულად დაბნეულობის თავიდან ასაცილებლად, მაგრამ შეგიძლიათ დააყენოთ სასურველი ატრიბუტი და აირჩიოთ თქვენი მარკერი. ვფიქრობ, აქ ყველაფერი გასაგები უნდა იყოს.

                  

                  მაგრამ მომავალში ჩვენ შევისწავლით CSS და ყველაფერს გავაკეთებთ შესაბამისად, როგორც უნდა. სტილის წყალობით, შეგიძლიათ მნიშვნელოვნად გააუმჯობესოთ სიის ჩვენება და საკუთარი მარკერიც კი შექმნათ. ხედავთ მენიუს ჩემს ბლოგზე (მთავარი, ყველა სტატია, ავტორის შესახებ და ა.შ.)? და ზოგადად, შეგიძლიათ შეხვიდეთ თითქმის ნებისმიერ ვებსაიტზე და ნახოთ მსგავსი მენიუ. ასე რომ, მენიუს ყველა ეს ელემენტი არის სიის ელემენტები, მხოლოდ ისინი მუშავდება CSS-ის საშუალებით.

                  

                  ზოგადად, მე ვფიქრობ, რომ თქვენ გესმით აზრი. მაგრამ თუ გსურთ კარგად იყოთ გათვითცნობიერებული HTML და CSS, მაშინ გირჩევთ უყუროთ კურსს. HTML5 და CSS3 ნულიდან პროფესიონალამდე". ამ კურსის წყალობით, თქვენ ადვილად შეისწავლით html და css-ის ყველა საფუძველს, ასევე ისწავლით როგორ შექმნათ რამდენიმე ტიპის ვებსაიტი: სავიზიტო ბარათების საიტები, ბლოგები, ონლაინ მაღაზიები და სადესანტო გვერდებიც კი. კურსი მართლაც საოცარია. .

                  პატივისცემით, დიმიტრი კოსტინი.

                  Კარგი დღე!

                  ამ სტატიაში თქვენ გაეცნობით სიების ყველა შესაძლებლობას, გაიგებთ, თუ როგორ უნდა გააკეთოთ დანომრილი სია და დაეუფლონ ტეგებს, რომლებიც დაგეხმარებათ გადააქციოთ მარტივი ბურთულებიანი სია უფრო საინტერესო და შესამჩნევი თვითნებური ტყვიებით. გაკვეთილის დასრულების შემდეგ თქვენ გექნებათ იმის გაგება, თუ სად გამოიყენება სიები და რა პირობებში შეიძლება მათი გამოყენება.

                  ეს სტატია მესამეა ამ მოკლე კურსში HTML-ის საფუძვლების შესახებ. ამ გაკვეთილის წაკითხვამდე გირჩევთ გაეცნოთ წინა ორს:

                  სტატია ახლახან დაიწყო და თქვენ უკვე შეგიძლიათ შეამჩნიოთ სტანდარტული ბურთულების სიის გამოყენება. ჩემს ვებსაიტზე ეს საკმაოდ მარტივად გამოიყურება: მარცხნივ არის პატარა შეწევა ხაზით და კვადრატული მარკერით. მოგვიანებით სტატიაში დეტალურად განვიხილავთ რა ტიპის მარკერები არსებობს, როგორ გავაკეთოთ რიცხვები და ასევე როგორ გააკეთოთ საკუთარი მარკერი.

                  სტატიის თითოეულ ნაწილში გარკვეული სიების შექმნას დაერთვება კონკრეტული სიის ჩასმის დეტალური განმარტებები.

                  1. ბურთულებიანი სიები HTML-ში

                  ამ ტიპის სია გამოიყენება ტექსტში მსგავსი მნიშვნელობის მქონე ელემენტების ნაკრების ჩამოსათვლელად. ეს შეიძლება იყოს იმავე თემასთან დაკავშირებული ბმულების სია, ტექსტის ცალკეული ნაწილების დეტალური ახსნა. მაგრამ ვნახოთ, როგორ გამოიყურება ბურთულებიანი სიები კოდში:

                  და ასე გამოიყურება ბრაუზერში:

                  ბრინჯი. 1.1. ბრაუზერში ბრაუზერში HTML ბურთულებიანი სიის სტანდარტული ხედი

                  1.1 სტანდარტული ბურთულები ბურთულიანი სიებისთვის

                  ზემოთ მოცემულ სურათზე (სურათი 1.1.) შეგიძლიათ იხილოთ წრეები მენიუს თითოეული ელემენტის დასაწყისში. ეს არის მარკერი. ნაგულისხმევად, ის ბრაუზერში შევსებული წრე ჩანს. HTML-ში არსებობს რამდენიმე ტიპის მარკერი: შევსებული წრე, ცარიელი წრე და კვადრატი. მათ არ სჭირდებათ CSS ან მესამე მხარის სურათები:

                  1.2 ჩამოთვალეთ მარკერი ცარიელი წრის სახით

                  თქვენ იცით ატრიბუტების მნიშვნელობები, მაგრამ ახლა ვნახოთ, როგორ შევქმნათ HTML ბურთულებით ჩამოთვლილი სია კოდში. ზემოთ მოყვანილი ცხრილიდან, ჩვენ ავირჩიეთ მეორე მნიშვნელობა "წრე" ტიპის ატრიბუტისთვის და დავაყენეთ ის ჩვენს ბურთულების სიაში:

                  <html > <თავი > <სათაური >ბურთულებიანი სიის მაგალითი ცარიელი წრის მარკერით</სათაური> </თავი> <სხეული > <p>ვარსკვლავები:</p> <ul type = "წრე" > <li >სირიუსი</li> <li >არქტურუსი</li> <li >პოლუქსი</li> <li >ბეთელგეიზე</li> <li >მზე</li> </ul> </სხეული> </html>

                  მოდით დაუყოვნებლივ ვნახოთ, როგორ გამოიყურება ეს კოდი ბრაუზერში:

                  ბრინჯი. 1.2. სიის მარკერის ნახვა, როგორც წრე ბრაუზერში

                  1.3 ჩამოთვალეთ მარკერი კვადრატის სახით

                  მოდით ასევე გადავხედოთ ბოლო მაგალითს კვადრატული მარკერით HTML სიისთვის:

                  ყურადღება მიაქციეთ მარკერს, ის გახდა კვადრატი:

                  ბრინჯი. 1.3. სიის მარკერის ნახვა ბრაუზერში კვადრატის სახით

                  Მნიშვნელოვანი ჩანაწერი:ეს მეთოდი აღარ გამოიყენება ბურთულირებული სიებისთვის სტილის შესაქმნელად. აშკარაა გამიჯვნა CSS-სა (წაიკითხეთ რა არის CSS) და HTML-ს შორის. HTML არის მარკირებისთვის და CSS არის მიმზიდველი გარეგნობის შესაქმნელად.

                  კოდი, რომელიც შეიცავს ამ ატრიბუტს, როდესაც მიუთითებს მიმდინარე დოკუმენტის ტიპზე, როგორც HTML5 (""), დაუშვებს შეცდომას ვალიდაციის დროს. თუ არ გსმენიათ რა არის ვალიდაცია, მაშინ ეს ადგილი თქვენთვისაა.

                  შეცდომა იქნება შემდეგი:

                  ბრინჯი. 1.4. შეცდომა ვალიდატორზე სიის "type" ატრიბუტის გამოყენებისას

                  ჩვენ დავახარისხეთ პუნქტიანი სიები. ახლა მოდით გადავიდეთ დანომრილ სიებზე, შემდეგ კი განვიხილოთ ჩადგმული სიები და რამდენიმე მზა მაგალითი, რომლებიც ყველაზე ხშირად გამოიყენება რეალურ საიტებზე.

                  2. დანომრილი სიები HTML-ში

                  წინა ტიპის სიებისგან განსხვავებით, დანომრილ სიებს აქვთ ერთი მნიშვნელოვანი ფუნქცია: ისინი ავტომატურად ინომრება. ეს გამოსადეგია, როცა დიდი სიის დანომრვა გჭირდებათ. ხელით გაკეთებას დიდი დრო დასჭირდება და მაინც შეიძლება დაიბნეთ. დანომრილი სია მითითებულია ტეგის გამოყენებით. როგორ გამოიყურება პრაქტიკაში:

                  დანომრილი სიის მაგალითი:

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

                  <html > <თავი > <სათაური >სტანდარტული დანომრილი სიის მაგალითი</სათაური> </თავი> <სხეული > <p>ერთიდან ხუთამდე:</p> <ol > <li >Პირველი</li> <li >მეორე</li> <li >მესამე</li> <li >მეოთხე</li> <li >მეხუთე</li> </ol> </სხეული> </html>

                  ასე გამოიყურება დანომრილი სია ბრაუზერის სტანდარტული პარამეტრებით:

                  ბრინჯი. 2.1. დანომრილი სია ბრაუზერში სტანდარტული პარამეტრებით

                  მისი წინამორბედის მსგავსად, მას აქვს ნომრების ჩვენების საკუთარი სტილი. რეგულარული ნუმერაცია არ არის HTML-ში დანომრილი სიის ტყვიის ერთადერთი ტიპი.

                  2.1 სტანდარტული ბურთულები დანომრილი სიებისთვის

                  აქ ჩვენ გვაქვს არჩევანი არა სამი ტიპის მარკერიდან, არამედ ხუთიდან:

                  მარკერის სახელი	"type" ატრიბუტის მნიშვნელობა	ჩამონათვალის მაგალითი
                  მარკერები არაბული რიცხვების სახით	1	ბადმინტონი ბეისბოლი
                  მარკერები მცირე ლათინური ასოების სახით	ა	ქომოლუნგმა ჩოგორი კანჩენჯუნგა
                  მარკერები დიდი ლათინური ასოების სახით	ა	Summit Plummet ტანტრუმის ხეივანი ინსანო
                  პატარა რომაული ციფრების მარკერები	მე	ფილიპინების ზღვა არაბეთის ზღვა მარჯნის ზღვა
                  დიდი რომაული რიცხვების მარკერები	მე	წითელი მწვანე ლურჯი

                  2.2 საკუთარი ნუმერაცია HTML სიაში

                  დანომრილი სიის ჩვეულებრივი გამომავალი გარდა, ჩვენ ასევე შეგვიძლია დავიწყოთ ჩვენი ნუმერაცია ნებისმიერი ნომრიდან. ამისათვის თქვენ უნდა დააყენოთ დამატებითი ატრიბუტი "დაწყება". ეს ნუმერაცია მუშაობს ყველა ტიპის მარკერზე დანომრილი სიებისთვის. როგორ გამოიყურება პრაქტიკაში:

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

                  <html > <თავი > <სათაური >მორგებული ნუმერაცია დანომრილი სიისთვის</სათაური> </თავი> <სხეული > <p>ნუმერაციას ვიწყებთ თორმეტიდან:</p> <ol type = "a" start = "12" > <li >თორმეტი</li> <li >ცამეტი</li> <li >თოთხმეტი</li> <li >თხუთმეტი</li> <li >თექვსმეტი</li> </ol> </სხეული> </html>

                  აი, როგორ გამოჩნდება ის რეალურ საიტზე:

                  ბრინჯი. 2.2. ნუმერაცია თვითნებური ნომრიდან დანომრილ სიაში

                  ზემოთ მოყვანილ სურათზე, ჩვენ დავთვლით სიას თორმეტიდან დაწყებული, ხოლო მარკერებს ვაკეთებთ მცირე ლათინური ასოების სახით. ახლა, ვფიქრობ, ნათელი გახდა, როგორ გამოიყენოთ ეს ატრიბუტები თქვენს პროექტებში.

                  კარგი, ახლა მოდით გადავიდეთ ჩადგმულ HTML სიებზე.

                  3. როგორ შევქმნათ მრავალდონიანი (ბუდებული) სია HTML-ში

                  მენიუს შესაქმნელად საიტზე გამოიყენება მრავალ დონის სიები. ეს მენიუ ყველაზე ხშირად არის ჩამოსაშლელი მენიუ (გაკვეთილი) ან მარცხენა ან მარჯვენა ჩამოსაშლელი მენიუ. ასეთი მენიუები საშუალებას გაძლევთ შეინახოთ მენიუს სხვა ელემენტები კომპაქტურ ფორმაში.

                  მაგალითად, მანქანის მოდელების გამოყენებით, ჩვენ შევქმნით მრავალ დონის სიას HTML-ში:

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

                  <html > <თავი > <სათაური > HTML ჩადგმული ბურთულების სია</სათაური> </თავი> <სხეული > <ul > <li >ციტროენი<ul > <li >ბერლინგო</li> <li > C1</li> <li > C2</li> <li > C3 პიკასო</li> <li > C4 გრანდ პიკასო</li> </ul> </li> <li > KIA</li> <li >ტოიოტა</li> <li >აუდი</li> <li >ლექსუსი</li> </ul> </სხეული> </html>

                  ყურადღება მიაქციეთ, როგორ გამოიყურება მრავალ დონის სია ბრაუზერში:

                  ბრინჯი. 3.1. მრავალ დონის სიის მაგალითი HTML-ში

                  ჩვენ შევქმენით მრავალ დონის სია bulleted (ტეგ

                  ). სიტროენის მოდელების მრავალ დონის სია გამოჩნდა სხვა მარკერებით. მთავარ სიას აქვს პუნქტები, ხოლო მე-2 დონის სიას აქვს ცარიელი წრეები. მაგრამ, როგორც გახსოვთ, "ტიპის" ატრიბუტის გამოყენებით ჩვენ შეგვიძლია ხელახლა განვსაზღვროთ მარკერები (უმჯობესია დააყენოთ ).

                  მაგრამ ჩვენ შეგვიძლია გავაერთიანოთ მრავალდონიანი სიები დანომრილ და პუნქტიან სიებთან, როგორიცაა:

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

                  <html > <თავი > <სათაური >დანომრილი, ბურთულები და მრავალდონიანი სიები HTML-ში</სათაური> </თავი> <სხეული > <ul > <li >ტიტების პირველი ჯგუფი<ol > <li >პირველი კლასი<ul > <li >მარტივი ადრეული ტიტები</li> </ul> </li> <li >Მეორე კლასი<ul > <li >ტერი ტიტები</li> </ul> </li> </ol> </li> </ul> </სხეული> </html>

                  ზემოთ მოცემულ მაგალითში გვაქვს ორმაგი ბუდე (2 დონე). პირველ რიგში, ტიტების ორი კლასის სიაა დანომრილი. შემდეგ ბურთულებიანი სია ჩადებულია დანომრილი სიის თითოეულ ელემენტში.

                  ვნახოთ, როგორ გამოიყურება ბრაუზერში:

                  ბრინჯი. 3.2. მრავალი დონის დანომრილი სიის მაგალითი ბრაუზერში ბურთულებით ჩამოთვლილ სიაში

                  4. სასარგებლო მასალები HTML სიებში

                  ეს არის ინფორმაცია, რომელიც მოითხოვს CSS თვისებების გაგებას. ამისთვის გირჩევთ შემდეგი გაკვეთილების შესწავლას: . ყველა მაგალითი დაუყოვნებლივ იქნება წყაროს კოდით და დაყოფილი იქნება HTML (სტრუქტურა), CSS (სტილები) და შედეგი (შედეგი) ჩანართებად.

                  4.1 როგორ გადავაქციოთ HTML სია სტრიქონად

                  HTML სიის სტრიქონად გადაქცევა შეიძლება საჭირო გახდეს ჰორიზონტალური მენიუს შექმნისას. ამის გაკეთება ძალიან მარტივია:

                  4.2 როგორ შევქმნათ HTML სია ხატის გარეშე

                  სიის სტილის ტიპის თვისება CSS-ში პასუხისმგებელია ამაზე (დაწვრილებით):

                  4.3 როგორ გავაერთიანოთ სია HTML-ში

                  სიის ელემენტი არის ბლოკის ელემენტი, ამიტომ უნდა იყოს ცენტრში შიგთავსის გამოყენებით. მაგრამ არის ერთი მნიშვნელოვანი წერტილი - ჩვენ მკაფიოდ უნდა მივუთითოთ სიგანე, რომ გასწორება იმუშაოს:

                  4.4 როგორ შევქმნათ სია HTML-ში სურათებით

                  მხოლოდ ერთი CSS თვისება, list-style-image , საკმარისია. url-ის შიგნით, მიუთითეთ მისამართი ხატულამდე. უბრალოდ მინდა აღვნიშნო, რომ უმჯობესია დაუყოვნებლივ აირჩიოთ პატარა სურათი, რადგან სიის ხაზის სიმაღლე დამოკიდებულია მასზე:

                  4.5 ბურთულების სია HTML თქვენი პუნქტი

                  ამ შემთხვევაში, თქვენ წინასწარ უნდა დააკავშიროთ შრიფტის ხატები (მაგალითად, FontAwesome). შემდეგ შეგიძლიათ გააკეთოთ ნებისმიერი ხატი სტანდარტული მარკერის ნაცვლად:

                  4.6 როგორ შევქმნათ სია HTML-ში რამდენიმე სვეტში

                  რამდენიმე სვეტში სიის შესაქმნელად, ჩვენ გამოვიყენებთ CSS სვეტების დათვლის თვისებას (საკუთრება მხარდაჭერილია მხოლოდ შემდეგ ბრაუზერებში: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). თქვენ ასევე უნდა დააყენოთ სიის სიმაღლე, რომ ნახოთ დაყოფა მრავალ სვეტად:

                  5. ივარჯიშეთ სიებთან მუშაობაში

                  ქვემოთ მოცემულ ვიდეოში შეგიძლიათ იხილოთ ყველა სამუშაო HTML სიებთან პრაქტიკაში: