როგორ გამოვიყენოთ ul html-ში. როგორ განვათავსოთ სიის ელემენტები ჰორიზონტალურად? სადაც სიის სტილები იწერება Twenty Eleven შაბლონში

ჰიპერტექსტის მარკირების ენას HTML აქვს ტეგი

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

ტეგის სინტაქსი

• ელემენტი #1
• ელემენტი #2
• ელემენტი #3
• ...

ეს კოდი ითარგმნება საიტზე ბურთულების ჩამონათვალში:

• ელემენტი #1
• ელემენტი #2
• ელემენტი #3

მონიშნეთ

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

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

როგორი შეიძლება იყოს ბურთულებიანი სიის შინაარსი?

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

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

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

მაგალითად

• ელემენტი #1
• • პუნქტი #2-1
  • ელემენტი #2-2
  • ელემენტი #2-3
• ელემენტი #3
• ...

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

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

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

1. type="disc" - მარკერი შევსებული წრის სახით (ეს მნიშვნელობა ნაგულისხმევია). დისკის მაგალითი ცოტა უფრო მაღალი იყო.

2. type="circle" - მარკერი გამჭვირვალე წრის სახით

მაგალითად:

• ელემენტი #1
• ელემენტი #2

• ელემენტი #1
• ელემენტი #2

3. type="square" - მარკერი კვადრატის სახით

მაგალითად:

• ელემენტი #1
• ელემენტი #2

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

• ელემენტი #1
• ელემენტი #2
შენიშვნა 1

CSS-ში პუნქტის ტიპი მითითებულია list-style-type ატრიბუტის გამოყენებით:

• ...

მოდი ვნახოთ, რა მნიშვნელობები შეიძლება მიიღოს სიის სტილის ტიპმა:

• დისკი - მარკერი წრის სახით (მაგალითი ზემოთ იყო)
• წრე - მარკერი გამჭვირვალე წრის სახით (მაგალითი ზემოთ იყო)
• კვადრატი - მარკერი კვადრატის სახით (მაგალითი ზემოთ იყო)
• ათობითი - მარკერი დანომრილი სიის სახით არაბული ციფრებით: 1, 2, 3, ...
• ათობითი-წამყვანი-ნულოვანი - მარკერი დანომრილი სიის სახით არაბულ ციფრებში წამყვანი ნულით: 01, 02, 03, ...
• ქვედა რომაული - მარკერი რომაული ანბანის დანომრილი სიის სახით მცირე ასოებით: i, ii, iii, iv, v.
• ზედა რომაული - მარკერი რომაული ანბანის დანომრილი სიის სახით დიდი ასოებით: I, II, III, IV, V
• ქვედა ლათინური - მარკერი ლათინური ანბანის სიის სახით მცირე ასოებით: a, b, c, d, ...
• ზედა-ლათინური - მარკერი ლათინური ანბანის სიის სახით დიდი ასოებით: A, B, C, D, ...
• ქვედა-ბერძნული - მარკერი ბერძნულ ანბანში სიის სახით მცირე ასოებით
• ზედა-ბერძნული - მარკერი ბერძნულ ანბანში სიის სახით დიდი ასოებით
შენიშვნა 2

ატრიბუტი შეიძლება მიენიჭოს თავად ტეგს

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

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

  • ელემენტი #1
  • ელემენტი #2
  • ელემენტი #3

  • ელემენტი #1
  • ელემენტი #2
  • ელემენტი #3

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

  CSS-ის გამოყენებით

  პუნქტების სიის ელემენტები შექმნილი ტეგის მიერ

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

  • ელემენტი #1
  • ელემენტი #2
  • ელემენტი #3

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

  • ელემენტი #1
  • ელემენტი #2
  • ელემენტი #3

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

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

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

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

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

  1 . დეზორგანიზებული ინფორმაცია.
  2 . ორგანიზებული ინფორმაცია.
  3 . განმარტებები.

  დავიწყოთ ინსტალაცია:

  1. ვარიანტი:

  
  
  • სიის ელემენტი
  
  
  • უნიკალური სია
  
  
  • ორიგინალური სიები
  
  
  • ZORNET.RU - ვებმასტერი
  
  
  • კიდევ ერთი სია
  
  
  
  CSS

  ქსანჯელოპანი (
  ზღვარი: 19px 0 0;
  padding:0;
  list-style: არცერთი;
  counter-reset: li;
  }
  ქსანჯელოპან ლი (
  საზღვარი: 2px მყარი #3575ad;
  ფონი: #d7dee4;
  პოზიცია: ნათესავი;
  ზღვარი-ქვედა: 17 პიქსელი;
  padding: 15px 9px;
  }
  .ksangelopan li:hover (
  z-ინდექსი: 1;
  }
  .ksangelopan li: ადრე (
  საზღვარი: 2px მყარი #2270b3;
  პოზიცია: აბსოლუტური;
  ზედა: -14px;
  padding: 3px 9px;
  შრიფტის ზომა: 11px;
  შრიფტის წონა: თამამი;
  ფერი: #246 eaf;
  ფონი: #f2f4f7;
  კონტრ-მატება: li;
  შინაარსი: counter(li);
  -webkit-გარდამავალი-ხანგრძლივობა: 0.4წმ;
  გადასვლა-ხანგრძლივობა: 0,4წმ;
  }
  .ksangelopan li:hover: ადრე (
  ფონი: #2672b3;
  ფერი: #f7f9fb;
  -webkit-transform: translate(-11px, 0);
  -ms-transform: translate(-11px, 0);
  -o-transform: translate(-11px, 0);
  transform: translate(-11px, 0);
  }
  .ksangelopan li: შემდეგ (
  შინაარსი: "";
  პოზიცია: აბსოლუტური;
  გადასვლა-ხანგრძლივობა: 0,3წმ;
  -webkit-transition-საკუთრება: სიგანე;
  გარდამავალი თვისება: სიგანე;
  z-ინდექსი: -1;
  ფონი: #FFF;
  სიმაღლე: 100%;
  მარცხენა: 0;
  ზედა: 0;
  სიგანე: 0;
  }
  .ksangelopan li:hover:after (
  სიგანე: 100%;
  }

  
  ეს ყველაფერი ინსტალაციისთვის.

  2 მეორე ვარიანტი:

  

  
  
  • სიის ელემენტი
  
  
  • უნიკალური სია
  
  
  • ორიგინალური სიები
  
  
  • ZORNET.RU - ვებმასტერი
  
  
  • კიდევ ერთი სია
  
  
  
  CSS

  ბელედუზლოპამგეს (
  ზღვარი-ქვედა: 8 პიქსელი;
  padding:0;
  list-style: არცერთი;
  counter-reset: li;
  }
  .ბელედუზლოპამგეს ლი (
  პოზიცია: ნათესავი;
  საზღვარი: 2px მყარი #195588;
  ფონი: #eff3f7;
  padding: 15px 19px 15px 27px;
  ზღვარი: 12px 0 12px 40px;
  -webkit-გარდამავალი-ხანგრძლივობა: 0.3წმ;
  გადასვლა-ხანგრძლივობა: 0,3წმ;
  }
  .beleduzlopamges li:hover (
  ფონი: #FFF;
  }
  .beleduzlopamges li: ადრე (
  ხაზის სიმაღლე: 32px;
  პოზიცია: აბსოლუტური;
  ზედა: 4px;
  მარცხენა: -39px;
  სიგანე: 39px;
  ტექსტის გასწორება: ცენტრში;
  შრიფტის ზომა: 16px;
  შრიფტის წონა: თამამი;
  ფერი: #f9f5f5;
  ფონი: #275b88;
  კონტრ-მატება: li;
  შინაარსი: counter(li);
  გადასვლა-ხანგრძლივობა: 0,2წმ;
  }
  .beleduzlopamges li:hover: ადრე (
  სიგანე: 46px;
  }
  .beleduzlopamges li:after (
  პოზიცია: აბსოლუტური;
  მარცხენა: 0;
  ზედა: 4px;
  შინაარსი: "";
  სიმაღლე: 0;
  სიგანე: 0;
  საზღვარი: 16px მყარი გამჭვირვალე;
  საზღვარი-მარცხენა-ფერი: #275b88;
  -webkit-გარდამავალი-ხანგრძლივობა: 0.2წმ;
  გადასვლა-ხანგრძლივობა: 0,2წმ;
  }
  .beleduzlopamges li:hover:after (
  ზღვარი მარცხნივ: 6 ​​პიქსელი;
  }

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

  3 მესამე ვარიანტი:

  

  
  
  • სკრიპტები uCoz-ისთვის
  
  
  • შაბლონები uCoz-ისთვის
  
  
  • ვებსაიტის დიზაინი
  
  
  • ვებსაიტების სტილები
  
  
  • სტილისტიკა CSS-ით
  
  
  
  CSS

  ნიზუალისანელაგ (
  padding:0;
  list-style: არცერთი;
  counter-reset: li;
  }
  .nizualisanelag li (
  პოზიცია: ნათესავი;
  padding: 9px 17px 17px 25px;
  ზღვარი მარცხნივ: 39 პიქსელი;
  გადასვლა-ხანგრძლივობა: 0,2წმ;
  კურსორი: მაჩვენებელი;
  შრიფტის წონა: თამამი;
  ფერი: #343638;
  }
  .nizualisanelag li: ადრე (
  საზღვარი: 3px მყარი გამჭვირვალე;
  ხაზის სიმაღლე: 35px;
  პოზიცია: აბსოლუტური;
  ზედა: 0;
  მარცხენა: -29px;
  სიგანე: 41 px;
  text-align:center;
  შრიფტის ზომა: 14px;
  შრიფტის წონა: თამამი;
  ფერი: #619dce;
  კონტრ-მატება: li;
  შინაარსი: counter(li);
  გადასვლა-ხანგრძლივობა: 0,3წმ;
  
  box-sizing: სასაზღვრო-ყუთი;
  }
  .nizualisanelag li:hover: ადრე (
  ფერი: #337AB7;
  }
  .nizualisanelag li:after (
  პოზიცია: აბსოლუტური;
  ზედა: 0;
  მარცხენა: -29px;
  სიგანე: 41px;
  სიმაღლე: 41px;
  საზღვარი: 5px მყარი #468bd0;
  საზღვარი-რადიუსი: 50%;
  შინაარსი: "";
  გამჭვირვალობა: 0,5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: სასაზღვრო ყუთი;
  box-sizing: სასაზღვრო-ყუთი;
  }
  .nizualisanelag li:hover:after (
  ანიმაცია: 500ms ease-in-out 0s bounceIn;
  გამჭვირვალობა: 1;
  }

  @keyframes bounceIn (
  0% {
  გამჭვირვალობა: 0;
  ტრანსფორმაცია: scale3d(.3, .3, .3);
  }
  20% {
  ტრანსფორმაცია: scale3d(1.3, 1.3, 1.3);
  }
  40% {
  ტრანსფორმაცია: scale3d(.9, .9, .9);
  }
  60% {
  გამჭვირვალობა: 1;
  ტრანსფორმაცია: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  ტრანსფორმაცია: scale3d(.97, .97, .97);
  }
  მდე (
  გამჭვირვალობა: 1;
  ტრანსფორმაცია: scale3d(1, 1, 1);
  }
  }

  
  მოყვება ლამაზი ანიმაცია.

  4 მეოთხე ვარიანტი:

  

  
  
  • პირველი ელემენტი საიტისთვის
  
  
  • მეორე ელემენტი საიტისთვის
  
  
  • მესამე ელემენტი საიტისთვის
  
  
  • მეოთხე ელემენტი საიტისთვის
  
  
  • მეხუთე ელემენტი საიტისთვის
  
  
  
  CSS

  ბალიშები:0;
  list-style: არცერთი;
  }
  .კუდეზამუდენ ლი(
  padding: 6px;
  }
  .kudezamuden li: ადრე (
  padding-right: 11px;
  შრიფტის წონა: თამამი;
  ფერი: #4979a0;
  შინაარსი: "\2606";
  გადასვლა-ხანგრძლივობა: 0,4წმ;
  }
  .kudezamuden li:hover: ადრე (
  ფერი: #235e90;
  შინაარსი: "\2605";
  }

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

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

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

  ერთადერთი განსხვავება ისაა, რომ ეს ტეგი მკაცრად არის შექმნილი სიების ნუმერაციისთვის. ტეგის სახელწოდება მომდინარეობს ინგლისური აბრევიატურიდან "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" ატრიბუტი განსაზღვრავს ანგარიშის საწყის მნიშვნელობას (საწყის მნიშვნელობას).

  შებრუნებული ატრიბუტი განსაზღვრავს საპირისპირო დათვლას (საჭიროების შემთხვევაში).

  მონიშნეთ

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

  სიის ელემენტების ფორმირებისთვის გამოიყენება დაწყვილებული ტეგი

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

    შენიშვნა

    სიის შიგნით შეგიძლიათ შეცვალოთ ანგარიში საკუთარზე. ამ მიზნით ტეგზე არის სპეციალური ატრიბუტი value="".

  • , რომელსაც ენიჭება ზოგიერთი რიცხვითი მნიშვნელობა. მაგალითად

    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 დანომრილ სიებში რაოდენობის შეცვლა

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

  • .

    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

    ელემენტი

    (ინგლისური „არამოწესრიგებული სიიდან“) ქმნის ბურთულიან (უწესრიგო) სიას. როგორც წესი, ელემენტი
    გამოიყენება სიების შესაქმნელად, სადაც ამ სიაში ელემენტების თანმიმდევრობის შეცვლა მნიშვნელოვნად არ ცვლის სიის მნიშვნელობას.

    მონიშნეთ

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

    დანომრილი სიების ელემენტები განისაზღვრება ტეგის გამოყენებით

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

      შენიშვნა:თუ უნდა

      ვრცელდება CSS თვისება, შემდეგ ელემენტები
      • მემკვიდრეობით მიიღო ეს თვისებები.

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

        .

        სინტაქსი

        ...
        • ...
        ...

        დახურვის ტეგი

        საჭირო.

        ატრიბუტები

        კომპაქტმოძველებულია HTML5-ში ამცირებს შეწევას და სტრიქონების ინტერვალს. type HTML5 ადგენს სიის მარკერის ტიპს.

        ხელმისაწვდომია ამ ნივთისთვის გლობალური ატრიბუტებიდა მოვლენები.

        ნაგულისხმევი სტილი

        ბრაუზერების უმეტესობა აჩვენებს ელემენტს

        შემდეგთან ერთად CSS მნიშვნელობებინაგულისხმევი:

        Ul (ჩვენება: ბლოკი; სიის სტილის ტიპი: დისკი; ზღვარი ზედა: 1 em; ზღვარი-ქვედა: 1 em; ზღვარი მარცხნივ: 0; ზღვარი-მარჯვნივ: 0; შიგთავსი-მარცხნივ: 40 პიქსელი; )

        განსხვავებები HTML 4.01-სა და HTML5-ს შორის

        კომპაქტური და ტიპის ატრიბუტები არ არის მხარდაჭერილი HTML5-ში.

        გამოყენების მაგალითი:

        შეუკვეთავი HTML სია:

        მაგალითი HTML:

        თავად სცადე
        • ყავა
        • ჩაი
        • კაკაო

        სპეციფიკაციები

        სპეციფიკაცია	სტატუსი
        WHATWG HTML Living Standard (WHATWG)	ცხოვრების დონე
        HTML 4.01 (W3C)	რეკომენდაცია
        HTML5 (W3C)	რეკომენდაცია
        HTML 5.1 (W3C)	რეკომენდაცია

        ბრაუზერის მხარდაჭერა

        სცადეთ თავად - მაგალითები

        როგორ შემიძლია სია დაიწყოს 1-ის გარდა სხვა რიცხვით?

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

        ---

        .

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

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

        როგორც ყოველთვის, სამუშაო გეგმა:

        1. აბზაცები
        2. ხაზი იშლება
           
        3. სიები და სიის ელემენტები
        4. სათაურები
        5. ჰორიზონტალური მმართველები

           ---

        აბზაცები

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

        html-ში აბზაცი, როგორც სათაურიდან ჩანს, აღინიშნება . ასო "p" აღებულია სიტყვიდან "აბზაცი", რაც მხოლოდ "აბზაცს" ნიშნავს.

        მოდით შევხედოთ მაგალითს:

        პირველი აბზაცის ტექსტი. ის შეიცავს აზრს. მაგრამ ახლა ფიქრი დასრულდა.
        

        
        

        სხვა ფიქრი უკვე დაიწყო და სხვა აბზაცში ვწერთ.
        

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

        ხაზი იშლება
        

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

        ქარი მხიარულად უბერავს
        
        და ნავი აჩქარებს
        
        ტალღებში დარბის
        აწეული იალქნებით.
        

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

        სიები,

        და ჩამოთვალეთ ელემენტები

        ზოგჯერ საჭიროა ტექსტში რაღაცის ჩამოთვლა. ამ მიზნით გამოიყენება სამი ტეგი: ul, ol, li. ყველა ეს ტეგი არის კონტეინერის ტეგი, მაგრამ ტეგი ყოველთვის შეიცავს ერთ-ერთ ან კონტეინერში და არ აქვს მნიშვნელობა მათ გარეთ. ul კონტეინერი გამოიყენება მაშინ, როდესაც ჩვენ არ გვაინტერესებს ჩამოთვლილი ელემენტების თანმიმდევრობა და არ გვინდა ფოკუსირება იმაზე, თუ რა თანმიმდევრობით გამოჩნდება ისინი. პირიქით, ol ტეგი ყურადღებას ამახვილებს ელემენტების თანმიმდევრობაზე, ავტომატურად ნომრავს თითოეულ ხაზს. მოდით შევხედოთ მაგალითს:

        
        
        • ფუნთუშა
        
        
        • ღვეზელი
        
        
        • პური
        
        
        • ღვეზელი
        
        

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

        • ფუნთუშა
        • ღვეზელი
        • პური
        • ღვეზელი

        თუ ჩვენ უბრალოდ შევცვლით ul ტეგს ol ტეგით, მივიღებთ დანომრილ სიას:

        
        
        1. ფუნთუშა
        
        
        2. ღვეზელი
        
        
        3. პური
        
        
        4. ღვეზელი
        
        

        ახლა ასე გამოიყურება:

        1. ფუნთუშა
        2. ღვეზელი
        3. პური
        4. ღვეზელი

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

        
        ინსტრუმენტები:
        
        • დაინახა
        
        
        • ხრახნები
          
          
          
          1. პირდაპირ
          
          
          2. ჯვარი
          
          
          
          
        
        
        • საბურღი
        
        

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

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

        სათაურები

        რა თქმა უნდა, აბზაცები ხელს უწყობს დოკუმენტების სტრუქტურირებას. მაგრამ იმისათვის, რომ დაყოთ დიდი ტექსტი პატარა ლოგიკურ ნაწილებად, შეგიძლიათ თითოეული მათგანის სათაური. თითოეული ნაწილი შეიძლება შეიცავდეს შემდგომ ქვენაწილებს, საკუთარი ქვედა დონის სათაურებით და ა.შ. სათაურის დასაყენებლად გამოიყენეთ ტეგები , სადაც "x" არის რიცხვი 1-დან 6-მდე. რაც უფრო მაღალია რიცხვი, მით უფრო დაბალია სათაური. ანუ ზედა დონის სათაურს დაერქმევა h1, ხოლო ქვედა დონის სათაურს h6. ნაგულისხმევად, ამ სათაურების ტექსტი ნაჩვენებია დიდი შრიფტით და ჩაჭრილი. ეს ტექსტი ნაჩვენებია მთელ ხაზზე, ანუ hx ტეგები არის ბლოკის ტეგები. h1 ტეგს აქვს ყველაზე დიდი შრიფტი, ხოლო h6 ტეგს აქვს ყველაზე პატარა შრიფტი. როგორც წესი, გვერდზე არის ერთი, მაქსიმუმ ორი უმაღლესი დონის h1 ტეგი. დონის კლებასთან ერთად იზრდება ტეგების რაოდენობა. მაგრამ იშვიათია, რომ ვებმასტერმა შეძლოს ტექსტის იმდენად დაშლა, რომ მას დასჭირდეს მე-5 ან მე-6 დონის სათაურები. მე-4 დონეც კი იშვიათად გამოიყენება.

        ნაკლები სიტყვა, მეტი მოქმედება!