თქვენ არ შემოიფარგლება მხოლოდ ერთი CSS კლასის ელემენტზე.
კასკადური სტილების ცხრილები (CSS) საშუალებას გაძლევთ განსაზღვროთ ელემენტის გამოჩენა, რომელიც მიეკუთვნება ამ ელემენტს. ეს ატრიბუტები შეიძლება იყოს ან პირადობის ან კლასისა და, როგორც ყველა ატრიბუტის მსგავსად, ისინი დაამატებენ სასარგებლო ინფორმაციას იმ ელემენტებზე, რომლებსაც თან ერთვის. დამოკიდებულია იმაზე, თუ რომელი ელემენტის დამატებას ანიჭებთ ელემენტს, შეგიძლიათ დაწეროთ CSS სელექტორი იმისათვის, რომ გამოიყენოს აუცილებელი ვიზუალური სტილები, რომლებიც აუცილებელია ამ ელემენტისა და ვებსაიტის ნახვასა და გრძნობის მისაღწევად.
მიუხედავად იმისა, რომ პირადობის მოწმობები ან კლასები იმუშავებენ CSS- ის წესებით, თანამედროვე ვებ დიზაინის მეთოდები უპირატესობას ანიჭებს კლასებს პირადობის მოწმობების გამო, ნაწილობრივ იმიტომ, რომ ისინი ნაკლებად კონკრეტული და ადვილია საერთო მუშაობისთვის. დიახ, თქვენ იპოვით ბევრ საიტს, რომლებიც იყენებენ პირადობის მოწმობებს, მაგრამ ამ ატრიბუტებს უფრო მეტად იყენებენ, ვიდრე წარსულში, ხოლო კლასები თანამედროვე ვებ-გვერდებზე გადაიღეს.
ერთჯერადი ან მრავალჯერადი კლასები CSS- ში?
უმეტეს შემთხვევებში შენს კლასს მიეკუთვნება ელემენტის ატრიბუტი, მაგრამ რეალურად არ შემოიფარგლება მხოლოდ ერთი კლასით, რომლითაც ისინი ხართ პირადობის მოწმობით. მიუხედავად იმისა, რომ ელემენტს შეუძლია მხოლოდ ერთი ID ატრიბუტი, შეგიძლიათ აბსოლუტურად მისცეს ელემენტის მრავალჯერადი კლასები და, ზოგიერთ შემთხვევაში, ამის გაკეთება გახდის თქვენს გვერდზე უფრო ადვილად სტილი და ბევრად უფრო მოქნილი!
თუ საჭიროა რამდენიმე კლასში ელემენტის მინიჭება, შეგიძლიათ დაამატოთ დამატებითი კლასები და გაასწოროთ მათ თქვენი ატრიბუტის სივრცე.
მაგალითად, ამ პუნქტს აქვს სამი კლასი:
pullquote featured left "> ეს იქნება პუნქტის ტექსტი
ეს განსაზღვრავს შემდეგ სამ კლასს პუნქტის tag:
- Pullquote
- რჩეული
- მარცხენა
გაითვალისწინეთ ფართები თითოეული ამ კლასის ღირებულებებს შორის. ეს ფართები არის ის, რაც ადგენს მათ განსხვავებულ, ცალკეულ კლასებს. ეს არის ის, რის გამოც კლასების სახელები არ შეიძლება ჰქონდეს ფართები მათში, რადგან ამის გაკეთება მათ ცალკე კლასებად აყენებდნენ.
მაგალითად, თუ სივრცეში არ არის გამოყენებული "pullquote-featured-left", ეს იქნება ერთი კლასის ღირებულება, მაგრამ ზემოთ მოყვანილი მაგალითი, სადაც ეს სამი სიტყვა გამოყოფილია სივრცეში, ადგენს მათ ინდივიდუალურ ღირებულებებს. მნიშვნელოვანია ეს კონცეფციის გაგება, როგორც თქვენ გადაწყვიტეთ, რომელი კლასის ღირებულებები გამოიყენოთ თქვენს ვებ-გვერდზე.
მას შემდეგ, რაც თქვენ გაქვთ თქვენი კლასის ღირებულებების HTML, შეგიძლიათ შემდეგ მივანიჭოთ როგორც კლასების თქვენს CSS და ვრცელდება სტილის თქვენ გსურთ დაამატოთ. მაგალითად.
.pullquote {...}
.featured {...}
p.left {...}
ამ მაგალითში, CSS დეკლარაციები და ღირებულებები წყვილი იქნება curly braces, რაც იმას ნიშნავს, რომ ეს სტილის გამოყენებული იქნება შესაბამისი selector.
შენიშვნა - თუ თქვენ შექმნით კლასს კონკრეტულ ელემენტს (მაგალითად, p.left), შეგიძლიათ ისარგებლოთ როგორც კლასების სიაში. თუმცა, გაითვალისწინეთ, რომ ის მხოლოდ იმ ელემენტებს იმოქმედებს, რომლებიც მითითებულია CSS- ში. სხვა სიტყვებით რომ ვთქვათ, p.left სტილი მხოლოდ ამ კლასთან ერთად ვრცელდება, რადგან თქვენი სელექტორია, ფაქტობრივად, "მარცხენა" კლასის კლასთან ერთად გამოიყენოს. ამის საპირისპიროდ, სხვა ორი სელექტორი მაგალითში არ აკონკრეტებს გარკვეულ ელემენტს, რათა მათ გამოიყენონ ნებისმიერი ელემენტი, რომელიც იყენებს ამ კლასის ღირებულებებს.
მრავალჯერადი კლასების უპირატესობები
მრავალჯერადი კლასების შეუძლია გაუადვილოს დაამატოთ სპეციალური ეფექტები ელემენტებს გარეშე შექმნას მთელი ახალი სტილის ამ ელემენტს.
მაგალითად, თქვენ შეიძლება გქონდეთ შესაძლებლობა, რომ ელემენტებს მარცხენა ან მარჯვენა სწრაფად მიედინება . თქვენ შეიძლება დაწეროთ ორი კლასი მარცხნივ და მარჯვნივ მხოლოდ float: მარცხენა; და float: უფლება; მათში. მაშინ, როცა ელემენტს ჰქონდა მარცხენა ფირფიტა, თქვენ უბრალოდ კლასში "მარცხენა" კლასს დავამატებ.
მართალია, გასეირნება ჯარიმა. გახსოვდეთ, რომ ვებ-სტანდარტებს უკარნახობენ სტილი და სტრუქტურას. სტრუქტურა HTML- ის მეშვეობით ხდება, ხოლო სტილი არის CSS- ში.
თუ თქვენი HTML დოკუმენტი ივსება ელემენტებით, რომლებსაც აქვთ "წითელი" ან "მარცხნივ" ისეთი კლასების სახელები, რომლებიც გვკარნახობენ, თუ რა ელემენტები უნდა გამოიყურებოდეს, ვიდრე ის, რაც თქვენ ხართ, გადაკვეთთ ამ ხაზს სტრუქტურასა და სტილს შორის. მე ვცდილობ, რომ ჩემი არასამთავრობო არასამეწარმეო კლასის სახელების მაქსიმალურად შეზღუდვა ამ მიზეზით.
მრავალჯერადი კლასები, სემანტიკა და JavaScript
კიდევ ერთი უპირატესობა გამოიყენოთ მრავალჯერადი კლასების გამოყენება, რაც ბევრ უფრო ინტერაქტიულ შესაძლებლობას გაძლევთ.
შეგიძლიათ გამოიყენოთ ახალი კლასები JavaScript- ის გამოყენებით არსებულ ელემენტებზე, რომელიც არ იშლება ნებისმიერი საწყისი კლასებისგან. ასევე შეგიძლიათ გამოიყენოთ კლასები ელემენტის სემანტიკაში . ეს ნიშნავს, რომ თქვენ შეგიძლიათ დაამატოთ დამატებითი კლასები, რათა დადგინდეს, რა ელემენტს ნიშნავს სემანტიკურად. ასე მუშაობს მიკროფორმები.
მრავალჯერადი კლასების ნაკლოვანებები
ყველაზე დიდი მინუსი გამოიყენოს მრავალი კლასების თქვენი ელემენტები არის ის, რომ მათ შეუძლიათ ცოტა unwieldy შევხედოთ და მართოს დროთა განმავლობაში. შეიძლება რთული გახდეს იმის განსაზღვრა, თუ რა სტილი გავლენას ახდენს ელემენტზე და თუ რომელიმე სკრიპტი გავლენას ახდენს მასზე. დღესდღეობით ბევრი ჩარჩო ხელმისაწვდომია, როგორც Bootstrap- ის მსგავსად, მრავალ კლასში ელემენტების მძიმე გამოყენებაა. ეს კოდი შეიძლება გამოვიდეს და ძნელია მუშაობა ძალიან სწრაფად, თუ არ ხართ ფრთხილად.
როდესაც თქვენ იყენებთ მრავალ კლასს, თქვენ ასევე აწარმოებთ რისკს, რომ სტილი ერთი კლასის გადალახვა კიდევ ერთი სტილის შემთხვევაშიც კი, თუ არ აპირებთ ამის გაკეთებას. ამის შემდეგ შეიძლება გაუჭირდეს გაერკვია, თუ რატომ არ არის გამოყენებული თქვენი სტილის გამოყენება, თუნდაც, როგორც ჩანს, მათ უნდა.
თქვენ უნდა იცოდეს სპეციფიკის, თუნდაც ატრიბუტები მიმართა ამ ერთ ელემენტს!
გამოყენებით ინსტრუმენტი, როგორიცაა Webmaster ინსტრუმენტები Chrome, შეგიძლიათ უფრო ადვილად ვნახოთ, როგორ თქვენი კლასების გავლენას ახდენს თქვენი სტილის და თავიდან ეს პრობლემა კონფლიქტის სტილი და ატრიბუტები.
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 8/7/17