სიები ყოველდღიური ცხოვრების ნაწილია. სამუშაოების სია განსაზღვრავს რა კეთდება. ნავიგაციის მარშრუტები გთავაზობთ მიმართულებების ეტაპობრივ ჩამონათვალს. რეცეპტები მოითხოვს ინგრედიენტების ჩამონათვალს და ინსტრუქციების ჩამონათვალს. სიები თითქმის ყველგან გვხვდება, ამიტომ ადვილი მისახვედრია, თუ რატომ არის ისინი ასევე პოპულარული ინტერნეტში.
როდესაც ჩვენ გვსურს გამოვიყენოთ სია ვებსაიტზე, HTML გვთავაზობს არჩევის სამ განსხვავებულ ტიპს: ბურთულებით, დანომრილი და აღწერილობის სია. სიის რომელი ტიპის გამოყენება და საერთოდ სიის გამოყენება დამოკიდებულია შინაარსზე და სემანტიკურად ყველაზე შესაფერის ვარიანტზე მისი ჩვენებისთვის.
HTML-ში არსებული სამი სხვადასხვა ტიპის სიის გარდა, არსებობს რამდენიმე გზა ამ სიების სტილისთვის CSS-ის საშუალებით. მაგალითად, ჩვენ შეგვიძლია ავირჩიოთ რა ტიპის ბურთულა მივუთითოთ სიისთვის. მარკერი შეიძლება იყოს კვადრატი, წრე, რიცხვი, ასო ან შესაძლოა არცერთი. გარდა ამისა, ჩვენ შეგვიძლია გადავწყვიტოთ, როგორ უნდა იყოს ნაჩვენები სია - ვერტიკალურად თუ ჰორიზონტალურად. ყველა ეს ვარიანტი მნიშვნელოვან როლს თამაშობს ჩვენი ვებ გვერდების სტილში.
ბურთულებიანი სიები
ბურთულებიანი ან შეუკვეთებელი სია არის უბრალოდ დაკავშირებული ნივთების სია, რომლებისთვისაც შეკვეთას მნიშვნელობა არ აქვს. HTML-ში პუნქტიანი სიის შექმნა ხდება ბლოკის სიის ელემენტის გამოყენებით
- . სიაში თითოეული ცალკეული ელემენტი აღინიშნება ელემენტით
-
.
ნაგულისხმევად, ბრაუზერების უმეტესობა ელემენტს ამატებს ვერტიკალურ ზღვარს და მარცხენა ბალიშს
- და ყოველი ელემენტის წინ
- აყენებს ერთფეროვან წერტილს. ამ პუნქტს ეწოდება სიის მარკერი და შეიძლება შეიცვალოს CSS-ის გამოყენებით.
- ნარინჯისფერი
- მწვანე
- ლურჯი
ბურთულებით დაწერილი სიის ჩვენება
დანომრილი სიები
ნივთების დანომრილი ან შეკვეთილი სია
- ბურთულებით ჩამოთვლილ სიას ძალიან ჰგავს, ინდივიდუალური პუნქტები იქმნება იმავე გზით. სიებს შორის მთავარი განსხვავება ისაა, რომ შეკვეთილი სიისთვის მნიშვნელოვანია ნივთების წარდგენის თანმიმდევრობა.
- გაისეირნეთ გარგარის ქუჩაზე
- გადაუხვიეთ ვინოგრადნაიაზე
- გაისეირნეთ გარგარის ქუჩაზე
- გადაუხვიეთ ვინოგრადნაიაზე
- გაჩერდით შადის ქუჩაზე
- გაისეირნეთ გარგარის ქუჩაზე
- გადაუხვიეთ ვინოგრადნაიაზე
- გაჩერდით შადის ქუჩაზე
- დანომრილ სიაში მისი მნიშვნელობის შესაცვლელად სიაში. სიის ნებისმიერი ელემენტის რაოდენობა, რომელიც გამოჩნდება სიის ელემენტის ქვემოთ მნიშვნელობის ატრიბუტით, შესაბამისად ხელახლა გამოითვლება.
მაგალითად, თუ სიის მეორე ერთეულს აქვს მნიშვნელობის ატრიბუტი დაყენებული 9-ზე, ამ სიის ერთეულის რიცხვი გამოვა, თითქოს ეს იყოს მეცხრე. სიის ყველა შემდგომი ელემენტი დანომრილი იქნება 9-დან.
- გაისეირნეთ გარგარის ქუჩაზე
- გადაუხვიეთ ვინოგრადნაიაზე
- გაჩერდით შადის ქუჩაზე
ღირებულების ატრიბუტის დემონსტრირება
აღწერა სიები
სიის კიდევ ერთი ტიპი, რომელსაც იხილავთ ონლაინ (მაგრამ არა ისე ხშირად, როგორც ბურთულები ან დანომრილი სიები) არის აღწერის სია. ასეთი სიები გამოიყენება რამდენიმე ტერმინისა და მათი აღწერილობის იდენტიფიცირებისთვის, მაგალითად, ლექსიკონში.
აღწერის სიის შექმნა HTML-ში ხდება ბლოკის ელემენტის გამოყენებით
- . ელემენტის გამოყენების ნაცვლად
- სიის ელემენტების აღსანიშნავად, აღწერილობის სიას ორი ბლოკის ელემენტი სჭირდება:
- ვადით და
- აღწერისთვის.
აღწერის სია შეიძლება შეიცავდეს ბევრ ტერმინს და აღწერილობას, ერთმანეთის მიყოლებით. გარდა ამისა, ასეთი სია შეიძლება შეიცავდეს რამდენიმე ტერმინს თითო აღწერილობაში, ასევე რამდენიმე აღწერილობას ტერმინზე. ერთ ტერმინს შეიძლება ჰქონდეს მრავალი მნიშვნელობა და ექვემდებარება მრავალგვარ აღწერას. პირიქით, ერთი აღწერა შეიძლება შეესაბამებოდეს რამდენიმე ტერმინს.
აღწერის სიის ელემენტის დამატებისას
- ელემენტზე უნდა გადავიდეს
- . ტერმინი და აღწერა, რომელიც მას მოჰყვება, დაკავშირებულია ერთმანეთთან. აქედან გამომდინარე, მნიშვნელოვანია ამ ელემენტების თანმიმდევრობა.
ნაგულისხმევად, ელემენტი
- მოიცავს ვერტიკალურ ბალიშს, ისევე როგორც ელემენტებს
- ნაგულისხმევად მოიცავს მარცხენა ზღვარს.
- კვლევები
- დროისა და ყურადღების დათმობა სასწავლი საგნის ცოდნის მისაღებად, განსაკუთრებით წიგნების საშუალებით.
- პროექტი
- წარმოდგენილი გეგმა ან ნახაზი, რომელიც გვიჩვენებს, თუ როგორ გამოიყურება და ფუნქციონირებს შენობა, ტანსაცმელი ან სხვა ნივთი მის აშენებამდე ან დამზადებამდე.
- არსებული მიზნები, გეგმები ან განზრახვები, სანამ ისინი განხორციელდება ან განხორციელდება მატერიალურ ობიექტში.
- ბიზნესი
- სამსახური
- ადამიანის ჩვეულებრივი პროფესია, პროფესია ან ხელობა.
აღწერა სიის დემონსტრაცია
ჩადგმული სიები
ფუნქცია, რომელიც სიებს ძალიან ძლიერს ხდის, არის ბუდეების ფუნქცია. თითოეული სია შეიძლება იყოს ჩასმული სხვა სიაში და მათი ჩადგმა შეიძლება რამდენჯერმე. მაგრამ სიების უსასრულოდ წყობის შესაძლებლობა არ გაძლევთ ამის თავისუფლებას. სიები უნდა იყოს დაცული სპეციალურად იქ, სადაც ისინი ინარჩუნებენ ყველაზე სემანტიკურ მნიშვნელობას.
სიების ჩადგმის ხრიკი არის იმის ცოდნა, თუ სად იწყება და მთავრდება თითოეული სიისა და სიის ელემენტი. კონკრეტულად ვსაუბრობთ ბურთულებით და დანომრილ სიებზე, ერთადერთ ელემენტზე, რომელიც შეიძლება პირდაპირ გამოჩნდეს შიგნით
- და
- . გავიმეოროთ - ერთადერთი ელემენტი, რომელიც შეგვიძლია ელემენტების უშუალო შთამომავლად დავაყენოთ
- და
-
.
თუმცა, ელემენტის შიგნით
- შეიძლება დაემატოს ელემენტების სტანდარტული ნაკრები, ნებისმიერი ელემენტის ჩათვლით
- ან
- გაისეირნეთ ძაღლი
- დასაკეცი სამრეცხაო
- შედით მაღაზიაში და შეიძინეთ:
- რძე
- პური
- ყველი
- გაზონის მოჭრა
- მოამზადეთ სადილი
- . ელემენტი
- შეიძლება შეიცავდეს თქვენთვის სასურველ ნებისმიერ ჩვეულებრივ ელემენტს. თუმცა ელემენტი
- უნდა იყოს რომელიმე ელემენტის პირდაპირი შთამომავალი
- , ან
-
.
სიის სტილის ტიპის თვისების ნებისმიერი მნიშვნელობა შეიძლება დაემატოს ბურთულებით ან დანომრილ სიას. ამის გათვალისწინებით, შეგიძლიათ გამოიყენოთ ნუმერაცია ბურთულიან სიაში და არაციფრული ბურთულები დანომრილ სიაში.
- ნარინჯისფერი
- მწვანე
- ლურჯი
Ul (სიის სტილის ტიპი: კვადრატი;)
სიის სტილის ტიპის თვისების დემონსტრირება
სიის სტილის ტიპის მნიშვნელობები
როგორც უკვე აღვნიშნეთ, სიის სტილის ტიპის თვისება შეიცავს რამდენიმე სხვადასხვა მნიშვნელობას. შემდეგი ცხრილი აჩვენებს ამ მნიშვნელობებს და მათ შესაბამის შინაარსს.
გამოსახულების გამოყენება სიის მარკერის სახით
შეიძლება დადგეს დრო, როდესაც სიის სტილის ტიპის თვისების ნაგულისხმევი მნიშვნელობები არ არის საკმარისი და გვსურს განვსაზღვროთ საკუთარი სიის მარკერი. ეს ყველაზე ხშირად კეთდება თითოეული ელემენტისთვის ფონის სურათის განთავსებით.
-
.
პროცესი მოიცავს სიის სტილის ტიპის ქონების ნებისმიერი ნაგულისხმევი მნიშვნელობის ამოღებას და ელემენტის ფონის სურათის და მინდვრების დამატებას.
-
.
დამატებითი დეტალები - სიის სტილის ტიპის თვისების არცერთზე დაყენება წაშლის სიის არსებულ მარკერებს. დაყენდება ფონის თვისება ფონის სურათიმის პოზიციასთან ერთად და საჭიროების შემთხვევაში გამეორება. და padding თვისება უზრუნველყოფს სივრცეს ტექსტის მარცხნივ ფონის სურათისთვის.
- ნარინჯისფერი
- მწვანე
- ლურჯი
Li (ფონი: url("arrow.png") 0 50% გამეორების გარეშე; სიის სტილის ტიპი: არცერთი; padding-left: 12px; )
გამოსახულების ჩვენება მარკერის სახით
list-style-position თვისება
ნაგულისხმევად, სიის პუნქტები განლაგებულია ელემენტის შინაარსის მარცხნივ
- . პოზიციონირების ეს სტილი აღწერილია როგორც გარეთ, რაც ნიშნავს, რომ მთელი შინაარსი გამოჩნდება პირდაპირ მარჯვნივ, სიის მარკერის მიღმა. list-style-position თვისებით ჩვენ შეგვიძლია შევცვალოთ out-ის ნაგულისხმევი მნიშვნელობა შიგნით ან მემკვიდრეობით.
გარეთ ათავსებს სიის მარკერს ელემენტის მარცხნივ
- და არ დაუშვათ რაიმე შინაარსის გადინება ამ მარკერის ქვემოთ. შიდა მნიშვნელობა (რომელიც იშვიათად გამოიყენება და ჩანს) ათავსებს სიის მარკერს ელემენტის პირველ სტრიქონზე
- და საჭიროების შემთხვევაში საშუალებას აძლევს შიგთავსს მარკერზე შემოიხვიოს.
- კექსი...
- შესხურება...
Ul (სიის სტილის პოზიცია: შიგნით;)
სიის სტილის-პოზიციის საკუთრების დემონსტრირება
ზოგადი ქონების სიის სტილი
სიის თვისებები, რომლებიც ახლახან განვიხილეთ, list-style-type და list-style-position, შეიძლება გაერთიანდეს ერთ ზოგად თვისებად, list-style. ამ თვისებაში ჩვენ შეგვიძლია გამოვიყენოთ ერთი ან ყველა სიის ქონების ღირებულება ერთდროულად. ამ მნიშვნელობების თანმიმდევრობა უნდა იყოს: list-style-type, რასაც მოჰყვება list-style-position.
Ul (სიის სტილი: წრე შიგნით;) ol (სიის სტილი: ქვედა რომაული;)
სიის ჰორიზონტალური ჩვენება
ზოგჯერ გვინდა სიების ჩვენება ჰორიზონტალურად და არა ვერტიკალურად. შესაძლოა, გვინდა სიის რამდენიმე სვეტად გაყოფა ნავიგაციის სიის შესაქმნელად ან სიის რამდენიმე ელემენტის ერთ რიგში განთავსება. შინაარსისა და სასურველის მიხედვით გარეგნობასიების ერთი ხაზის სახით ჩვენების რამდენიმე გზა არსებობს, მაგალითად, ელემენტების ჩვენების თვისების მნიშვნელობის აღებით
- როგორიცაა inline ან inline-block ან float თვისების მეშვეობით.
სიის ჩვენება
ყველაზე სწრაფი გზასიის ჩვენება ერთ ხაზზე - ეს არის ელემენტების დასაყენებლად
- თვისების ჩვენება inline ან inline-block მნიშვნელობით. ეს დააყენებს ყველა ელემენტს
- ერთ ხაზზე, სიის თითოეულ პუნქტს შორის თანაბარი ინტერვალით.
თუ ელემენტებს შორის სივრცეები
- იწვევენ პრობლემებს, მათი ამოღება შესაძლებელია იმავე ტექნიკის გამოყენებით, რომელიც განვიხილეთ გაკვეთილზე 5, პოზიციონირების შინაარსი.
უფრო ხშირად ჩვენ გამოვიყენებთ inline-block მნიშვნელობას inline მნიშვნელობის ნაცვლად. inline-block მნიშვნელობა აადვილებს ელემენტებს ვერტიკალური ბალიშის და სხვა სივრცის დამატებას
- , ხოლო inline მნიშვნელობა არა.
როდესაც ჩვენების თვისების მნიშვნელობა იცვლება inline ან inline-block , სიის მარკერი, იქნება ეს წერტილი, რიცხვი თუ სხვა, წაიშლება.
- ნარინჯისფერი
- მწვანე
- ლურჯი
Li (ჩვენება: inline-block; ზღვარი: 0 10px; )
სიის დემონსტრირება inline-ბლოკით
სიები float-ით
დისპლეის თვისების inline ან inline-block შეცვლა სწრაფია, მაგრამ ის შლის სიის მარკერებს. თუ ისინი საჭიროა, მაშინ დაამატეთ float თითოეულ ელემენტს
- არის საუკეთესო ვარიანტივიდრე ჩვენების თვისების შეცვლა.
მონტაჟი ყველა ელემენტისთვის
- float თვისებები, როგორც მარცხნივ, გაასწორებს ყველა ელემენტს ჰორიზონტალურად
- პირდაპირ ერთმანეთის გვერდით, მათ შორის ხარვეზების გარეშე. როდესაც ჩვენ ვიყენებთ float ამისთვის
- , სიის მარკერი ნაჩვენებია ნაგულისხმევად და განთავსდება ელემენტის თავზე
- მის გვერდით. იმისათვის, რომ სიის მარკერი არ გამოჩნდეს სხვა ელემენტებზე
- , ჰორიზონტალური ზღვარი ან ბალიშები უნდა დაემატოს.
- ნარინჯისფერი
- მწვანე
- ლურჯი
Li ( ათწილადი: მარცხნივ; ზღვარი: 0 20 პიქსელი; )
სიის დემონსტრირება float-ით
როგორც ნებისმიერი მოძრავი ელემენტი, ეს არღვევს გვერდის დინებას. არ უნდა დაგვავიწყდეს float-ის გასუფთავება და გვერდის ნორმალურ ნაკადზე დაბრუნება - ყველაზე გავრცელებული მეთოდია clearfix.
ნავიგაციის სიის მაგალითი
ჩვენ ხშირად ვქმნით და ვპოულობთ სანავიგაციო მენიუებს, რომლებიც იყენებენ შეუკვეთებელ სიებს. ეს სიები, როგორც წესი, განლაგებულია ჰორიზონტალურად ზემოთ ნახსენები ორი მეთოდიდან ერთ-ერთის გამოყენებით. მაგალითად, აქ არის ჰორიზონტალური სანავიგაციო მენიუ, რომელიც განლაგებულია შეუკვეთავი სიის გამოყენებით, რომელშიც არის ელემენტები
- ნაჩვენებია როგორც შიდა ბლოკი.
ნავიგაცია ul ( შრიფტი: თამამი 11px "Helvetica Neue", Helvetica, Arial, sans-serif; ზღვარი: 0; padding: 0; text-transform: uppercase; ) .navigation li ( ჩვენება: inline-block; ) .navigation a ( ფონი: #395870 წრფივი-გრადიენტი (#49708f, #293f50): 1px მყარი rgba(0, 0, padding): 12px; ფონი: #314b60 box-shadow: ჩასმული 0 0 10px rgba(0, 0, 0, .3 ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) . ბოლო შვილი a ( საზღვარი-მარჯვნივ: 0; საზღვრის-რადიუსი: 0 4px 4px 0; )
ნავიგაციის სიის დემონსტრირება
პრაქტიკაში
ახლა, როდესაც ჩვენ ვიცით, როგორ შევქმნათ სიები HTML-ში და CSS-ში, მოდით გადავხედოთ ჩვენს Styles Conference-ის საიტს და ვნახოთ, სად შეიძლება გამოვიყენოთ სიები.
- ) დააყენებს ჩვენი ნავიგაციის მენიუს სტრუქტურას. თუმცა, ეს ახალი ელემენტები ჩვენს ნავიგაციის მენიუს ვერტიკალურად აქცევს.
ჩვენ ვაპირებთ შევცვალოთ ჩვენების მნიშვნელობა ჩვენი ელემენტებისთვის
- inline-დაბლოკვა ისე, რომ ისინი ყველა ჰორიზონტალურად დადიან. როდესაც ამას ვაკეთებთ, ასევე უნდა გავითვალისწინოთ ცარიელი სივრცე მარცხნივ თითოეულ ელემენტს შორის
- . გავიხსენოთ მე-5 გაკვეთილიდან, შინაარსის პოზიციონირება, ვიცით, რომ ელემენტის ბოლოს HTML კომენტარის გახსნა
- და ელემენტის დასაწყისში კომენტარის დახურვა
- ამოიღებს ამ ადგილს.
ამის გათვალისწინებით, ჩვენი ელემენტის შიგნით ნავიგაციის მენიუს მარკირება
ასე გამოიყურება: ამავე მიმართულებით, ჩვენი ელემენტის შიგნით ნავიგაციის მენიუს მარკირება
არ დაგავიწყდეთ ამ ცვლილებების შეტანა ჩვენს ყველა HTML ფაილში.
ჩვენი ბურთულებიანი სიით, მოდით დავრწმუნდეთ, რომ სიის ელემენტები ჰორიზონტალურად არის გასწორებული და ცოტათი გავასუფთავოთ მათი სტილი. ჩვენ გამოვიყენებთ არსებულ nav კლასს ჩვენი ახალი სტილის დასაზუსტებლად.
დავიწყოთ იმით, რომ დავრწმუნდეთ, რომ ყველა ელემენტი
- ნებისმიერი ელემენტის შიგნით nav კლასის ატრიბუტის მნიშვნელობის მქონე მნიშვნელობით იყო გადმოცემული როგორც inline-block, რათა ჩართოთ ჰორიზონტალური მინდვრები და დაუშვათ ელემენტების ვერტიკალურად გასწორება.
გარდა ამისა, ჩვენ გამოვიყენებთ :last-child ფსევდოკლასს ბოლო ელემენტის დასადგენად
- და გადააყენეთ მისი მარჯვენა ზღვარი 0-ზე. ეს უზრუნველყოფს ელემენტებს შორის რაიმე ჰორიზონტალურ სივრცეს
- და მისი მშობლის კიდე გაქრება.
ჩვენს main.css ფაილში, ნავიგაციის სტილის ქვემოთ, დაამატეთ შემდეგი CSS:
Nav li ( ჩვენება: inline-block; ზღვარი: 0 10px; ვერტიკალური გასწორება: ზედა; ) .nav li:last-child (ზღვარი-მარჯვნივ: 0; )
თქვენ ალბათ გაინტერესებთ, რატომ არ შეიცავს ჩვენს სიაში ნაგულისხმევ პუნქტებს ან სტილებს. ეს სტილები ამოიღეს ჩვენი სტილის ზედა ნაწილის გადაყენებით. თუ გადავხედავთ გადატვირთვას, ვხედავთ, რომ ელემენტები
-
,
- მოიცავს ნულოვანი ზღვარი და padding და for
- და
- list-style დაყენებულია არცერთზე.
ნავიგაციის მენიუ არ არის ერთადერთი ადგილი, სადაც სიებს გამოვიყენებთ. ჩვენ ასევე გამოვიყენებთ მათ ჩვენს ზოგიერთ შიდა გვერდებზე, მათ შორის Speakers გვერდზე. მოდით დავამატოთ რამდენიმე მომხსენებელი ჩვენს კონფერენციას.
speaks.html ფაილში, შესავალი განყოფილების ქვემოთ, ჩვენ შევქმნით ახალი განყოფილება, სადაც წარმოგიდგენთ ყველა ჩვენს გამომსვლელს. ზოგიერთი არსებული სტილის ხელახალი გამოყენებით ჩვენ გამოვიყენებთ ელემენტს
მწკრივის კლასით, რომ შეფუთოთ ყველა ჩვენი დინამიკი და გამოიყენოთ თეთრი ფონიდა მინდვრები მიღმა. ელემენტის შიგნით ჩვენ დავამატებთ ელემენტს ქსელის კლასით, რათა ჩვენი დინამიკები გვერდზე ცენტრალიზდეს და ეს მოგვცემს საშუალებას შევიტანოთ რამდენიმე სვეტიც.ჯერჯერობით ჩვენი HTML შესავალი განყოფილების ქვემოთ ასე გამოიყურება:
ქსელის შიგნით, თითოეული დინამიკი მონიშნული იქნება საკუთარი ელემენტით
, რომელიც მოიცავს ორ სვეტს. პირველი სვეტი ზომავს ელემენტის ორ მესამედს და მონიშნული იქნება ელემენტით . მეორე სვეტი ზომავს ელემენტის დარჩენილ მესამედსდა მონიშნული იქნება ელემენტის გამოყენებით
- და
- მოიცავს ნულოვანი ზღვარი და padding და for
ახლა ნავიგაციის მენიუები ელემენტებში
და შეუკვეთავი სიის გამოყენება (ელემენტის მეშვეობით
- ) და ჩამოთვალეთ ელემენტები (ელემენტის საშუალებით
- ) დააყენებს ჩვენი ნავიგაციის მენიუს სტრუქტურას. თუმცა, ეს ახალი ელემენტები ჩვენს ნავიგაციის მენიუს ვერტიკალურად აქცევს.
-
.
აღსანიშნავია ისიც, რომ როდესაც სიები სხვა სიებშია ჩასმული, მათი მარკერები შეიცვლება ბუდეების სიღრმის მიხედვით. წინა მაგალითში, დანომრილი სიაში ჩასმული ბურთულებიანი სია, მარკერებად წერტილის ნაცვლად იყენებს წრეს. ეს ცვლილება ხდება იმის გამო, რომ ბურთულებიანი სია ჩასმულია დანომრილი სიის ერთ დონეზე.
საბედნიეროდ, ჩვენ შეგვიძლია ვაკონტროლოთ როგორ გამოიყურება პუნქტები ნებისმიერ დონეზე, რასაც შემდეგში განვიხილავთ.
სტილის სიის ელემენტები
ბურთულები და დანომრილი სიები ნაგულისხმევად იყენებენ სიის ელემენტის ბურთულებს. ბურთულიანი სიებისთვის, ეს, როგორც წესი, არის ფერადი წერტილები, ხოლო დანომრილი სიებისთვის ეს არის რიცხვები. გამოყენებით CSS სტილიდა ამ მარკერების პოზიციის რეგულირება შესაძლებელია.
სიის სტილის ტიპის თვისება
list-style-type თვისება გამოიყენება სიის ელემენტის მარკერის შიგთავსის დასაყენებლად. ხელმისაწვდომი მნიშვნელობები მერყეობს კვადრატიდან ათობითი რიცხვებიელემენტებს შეიძლება დაემატოს სომხური ნუმერაცია და სტილისტიკა CSS-ში
-
,
- ან
-
.
-
.
სიის ჩასართავად, სიის ელემენტის დახურვამდე დაიწყეთ ახალი სია. მას შემდეგ, რაც ჩადგმული სია დასრულდება და დაიხურება, დახურეთ თანდართული სიის ელემენტი და გააგრძელეთ ორიგინალური სია.
წყობილი სიების დემონსტრირება
იმის გამო, რომ ჩადგმული სიები შეიძლება იყოს ცოტა დამაბნეველი და არასასურველი სტილის ჩვენება, თუ არასწორად არის გაკეთებული - მოდით შევხედოთ მათ. ელემენტები
- და
- შეიძლება შეიცავდეს მხოლოდ ელემენტებს
- , არის
-
.
- ელემენტია
- და
- . გარდა ამისა, ელემენტი
იმის გამო, რომ წესრიგს აქვს მნიშვნელობა, დანომრილი სია იყენებს რიცხვებს წერტილის ნაცვლად, როგორც ნაგულისხმევი პუნქტი.
დანომრილი სიის დემონსტრირება
დანომრილ სიებს ასევე აქვთ მათთვის ხელმისაწვდომი უნიკალური ატრიბუტები, მათ შორის დაწყება და შებრუნებული.
დაწყება ატრიბუტი
დაწყების ატრიბუტი განსაზღვრავს ნომერს, რომლიდანაც უნდა დაიწყოს დანომრილი სია. ნაგულისხმევად, სიები იწყება 1-დან, მაგრამ შეიძლება იყოს სიტუაციები, როდესაც სია უნდა დაიწყოს 30 ან სხვა ნომრით. როდესაც ელემენტზე ვიყენებთ start ატრიბუტს
- , მაშინ ზუსტად შეგვიძლია განვსაზღვროთ რომელი ნომრიდან უნდა დაიწყოს დანომრილი სიის დათვლა.
დაწყების ატრიბუტი იღებს მხოლოდ მთელ მნიშვნელობებს, თუმცა მისი გამოყენება შესაძლებელია დანომრილ სიებში სხვადასხვა სისტემებინუმერაცია, მაგალითად რომაული ციფრები.
დაწყების ატრიბუტის დემონსტრირება
შებრუნებული ატრიბუტი
შებრუნებული ატრიბუტი ელემენტზე დამატებისას
- სიის ჩვენების საშუალებას იძლევა საპირისპირო მიზნით. 1-დან 5-მდე დანომრილი ხუთი ელემენტის სია შეიძლება შეიცვალოს და დანომრილი იყოს 5-დან 1-მდე.
შებრუნებული ატრიბუტი არის ლოგიკური ატრიბუტი და, როგორც ასეთი, არ იღებს რაიმე მნიშვნელობას. ეს შეიძლება იყოს მართალი ან მცდარი. False არის ნაგულისხმევი მნიშვნელობა, მნიშვნელობა ხდება true, როდესაც ელემენტზე გამოჩნდება შებრუნებული ატრიბუტი
-
.
შებრუნებული ატრიბუტის დემონსტრირება
ღირებულების ატრიბუტი
მნიშვნელობის ატრიბუტი შეიძლება გამოყენებულ იქნას ცალკეულ ელემენტებზე
- აყენებს ერთფეროვან წერტილს. ამ პუნქტს ეწოდება სიის მარკერი და შეიძლება შეიცვალოს CSS-ის გამოყენებით.