განსხვავებები CSS-სა და HTML-ს შორის. რით განსხვავდება CSS HTML-ისგან?

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

#container ( სიგანე: 1080px; ზღვარი: 0 ავტო; ფონი: #eee ) #menu (სიმაღლე: 90px; ფონი: #ddd ) .ბმული (ფერი: #000; ტექსტის დეკორაცია: არცერთი) #კონტენტი (შეფუთვა: 20px) .ტექსტი (შრიფტის ზომა: 15 პიქსელი)

როდის გამოიყენება კლასი და როდის გამოიყენება id?

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

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

ელემენტები ასევე შეიძლება იყოს მიბმული რამდენიმე კლასში ერთდროულად. ეს ძალიან სასარგებლოა, როდესაც საჭიროა სტილის გამოყენება გარკვეული ტიპის ელემენტების ერთ ჯგუფზე. მაგალითად, არის კლასი .content, რომელიც გამოიყენება ყველა აბზაცზე. თუ საჭიროა რამდენიმე ცალკეულ აბზაცს საზღვრის ან რაიმე სხვა სტილის დამატება, ამის გაკეთება შეგიძლიათ დამატებითი CSS p კლასის .bordered :

ამ პუნქტს არ აქვს საზღვრები.

ამ პუნქტს აქვს საზღვრები.

დააკვირდით თეთრ ადგილს ორ კლასის სახელს შორის მეორე აბზაცის კლასის ატრიბუტში. ქვემოთ მოცემულია CSS კოდის მაგალითი:

კონტენტი (ზღვარი: 10 პიქსელი; შრიფტის ზომა: 15 პიქსელი; ფერი: ლურჯი). საზღვრები (საზღვრები: 2 პიქსელი მყარი #222)

მნიშვნელოვანია id და CSS კლასის სწორად გამოყენება, რადგან მათმა არასწორმა გამოყენებამ შეიძლება გამოიწვიოს შეცდომები HTML კოდის ჩვენებისას.

სტატიის თარგმანი " CSS კლასი წინააღმდეგ ID: რომელი გამოვიყენოთ” მომზადდა მეგობრული პროექტის გუნდი.

კარგი ცუდი

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

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

არსი

კლასი არის თავისუფალი ატრიბუტი, რომელიც ჩვეულებრივ ენიჭება რამდენიმე ელემენტს, რათა განასხვავოს ისინი სხვებისგან. მაგალითად, სურათებს, რომლებიც უბრალოდ თან ახლავს ტექსტს, შეიძლება მიენიჭოთ class="decor" , ხოლო სურათებს, რომლებიც მნიშვნელოვანია ტექსტის გასაგებად, შეიძლება მიენიჭოთ class="content" .

შედეგები

ამ არსიდან პირდაპირ ან ირიბად მოჰყვება სხვა განსხვავებები, რომლებიც ჩანს HTML, CSS და სკრიპტებში.

...

. მრავალი ნიშანი

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

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

/* ყველა მნიშვნელოვანი ელემენტი */ .მნიშვნელოვანი (ფერი:წითელი;)

და კომბინაციაში:

/* ელემენტები მნიშვნელოვანი და ორიენტირებული ერთდროულად */ .important.centred (საზღვარი: მყარი შავი 1px;)

გაითვალისწინეთ, რომ CSS წესში კლასებს შორის სივრცე არ არის.

...

სხვადასხვა წონა CSS-ში

CSS-ის თითოეულ წესს აქვს "წონა", რომელიც განსაზღვრავს მათი გამოყენების თანმიმდევრობას. id-ს მეტი წონა აქვს. ამიტომ, თუ ელემენტს აქვს როგორც id, ასევე კლასი:

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

#შესახებ (ფერი:მწვანე;).მნიშვნელოვანი (ფერი:წითელი;)

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

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

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

უპირატესობები:

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

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

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

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

ხარვეზები:

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

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

განსხვავებებიCSS3:

ახალი სტილები

ფსევდო სელექტორები

ანიმაცია

ტილოს მხარდაჭერა

ტრანსფორმაცია

ტეგის შინაარსის მართვა

...და მეტი

2.2.3 js ენისა და jQuery ბიბლიოთეკის მოკლე მიმოხილვა

JavaScript

JavaScript არის პროტოტიპზე ორიენტირებული სკრიპტირების პროგრამირების ენა. ეს არის ECMAScript ენის დიალექტი.

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

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

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

"JavaScript" არის Oracle Corporation-ის რეგისტრირებული სავაჭრო ნიშანი.

ენის მახასიათებლები

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

მიუხედავად იმისა, რომ სინტაქსი C-ის მსგავსია, JavaScript-ს აქვს ფუნდამენტური განსხვავებები C ენასთან შედარებით:

ობიექტები ინტროსპექციის შესაძლებლობით

ფუნქციონირებს როგორც პირველი კლასის ობიექტები

ავტომატური ტიპის ჩამოსხმა

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

ენას აკლია ისეთი სასარგებლო რამ, როგორიცაა:

მოდულური სისტემა: JavaScript არ იძლევა დამოკიდებულებების მართვის უნარს და ფარგლების იზოლაციას

სტანდარტული ბიბლიოთეკა: კერძოდ, არ არსებობს აპლიკაციის პროგრამირების ინტერფეისი ფაილურ სისტემასთან მუშაობისთვის, I/O ნაკადების მართვისთვის ან ბინარული მონაცემების ძირითადი ტიპები.

სტანდარტული ინტერფეისები ვებ სერვერებისა და მონაცემთა ბაზებისთვის

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

სემანტიკა და სინტაქსი:

JavaScript ენის სინტაქსი მრავალი თვალსაზრისით მოგვაგონებს C და Java-ს სინტაქსს, მაგრამ სემანტიკურად ენა ბევრად უფრო ახლოსაა Self-თან, Smalltalk-თან ან თუნდაც Lisp-თან.

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

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

ცვლადების სახელები არ შეიძლება დაიწყოს რიცხვით

ერთსტრიქონიანი კომენტარების დასაფორმებლად გამოიყენება // მრავალსტრიქონიანი და სტრიქონიანი კომენტარები იწყება /*-ით და მთავრდება */-ით;

ენის სტრუქტურა:

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

ბირთვი (ECMAScript)

ბრაუზერის ობიექტის მოდელი (BOM)

დოკუმენტის ობიექტის მოდელი (DOM)

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

Document Object Model ზოგჯერ განიხილება, როგორც ცალკეული ერთეული JavaScript-ისგან, რაც შეესაბამება DOM-ის განმარტებას, როგორც ენიდან დამოუკიდებელი დოკუმენტის ინტერფეისი. ამის საპირისპიროდ, მრავალი ავტორი მიიჩნევს, რომ BOM და DOM მჭიდრო კავშირშია.

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

ბრაუზერის ობიექტის მოდელი

ბრაუზერის ობიექტის მოდელი არის ენის ბრაუზერის სპეციფიკური ნაწილი, რომელიც წარმოადგენს ფენას ბირთვსა და დოკუმენტის ობიექტის მოდელს შორის. ბრაუზერის ობიექტის მოდელის მთავარი მიზანია ბრაუზერის ფანჯრების მართვა და მათი ურთიერთქმედების უზრუნველყოფა. თითოეული ბრაუზერის ფანჯარა წარმოდგენილია ფანჯრის ობიექტით, ცენტრალური DOM ობიექტით. ბრაუზერის ობიექტის მოდელი ამჟამად არ არის სტანდარტიზებული, მაგრამ სპეციფიკაცია დამუშავების პროცესშია WHATWG და W3C მიერ

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

ჩარჩოს მართვა

მხარს უჭერს კოდის შესრულების შეფერხებას და დაყოვნების მარყუჟს

სისტემის დიალოგები

ღია გვერდის მისამართის მართვა

ბრაუზერის ინფორმაციის მართვა

მონიტორის პარამეტრების ინფორმაციის მართვა

დათვალიერების ისტორიის შეზღუდული მართვა

HTTP ქუქიების მხარდაჭერა

დოკუმენტის ობიექტის მოდელი

Document Object Model არის აპლიკაციის პროგრამირების ინტერფეისი HTML და XML დოკუმენტებისთვის. DOM-ის მიხედვით, დოკუმენტი (მაგალითად, ვებ გვერდი) შეიძლება იყოს წარმოდგენილი, როგორც ობიექტების ხე, რომელსაც აქვს მრავალი თვისება, რაც საშუალებას აძლევს მას სხვადასხვა მანიპულირებას:

კვანძების გენერირება და დამატება

კვანძების მიღება

კვანძების შეცვლა

კვანძებს შორის კავშირების შეცვლა

კვანძების ამოღება.

jQuery არის JavaScript ბიბლიოთეკა, რომელიც ფოკუსირებულია JavaScript-ისა და HTML-ის ურთიერთქმედებაზე. jQuery ბიბლიოთეკა დაგეხმარებათ მარტივად შეხვიდეთ ნებისმიერ DOM ელემენტზე, შეხვიდეთ და მანიპულიროთ DOM ელემენტების ატრიბუტებითა და შინაარსით. jQuery ბიბლიოთეკა ასევე უზრუნველყოფს მოსახერხებელ API-ს AJAX-თან მუშაობისთვის.

შესაძლებლობები

ჯვარედინი ბრაუზერი CSS ამომრჩევი ძრავა Sizzle, დაყოფილია ცალკე პროექტში

DOM ხის გავლა, XPath-ის, როგორც მოდულის მხარდაჭერის ჩათვლით

მოვლენები

ვიზუალური ეფექტები

AJAX დანამატები

JavaScript დანამატები

jQuery-თან მუშაობა შეიძლება დაიყოს 2 ტიპად:

jQuery ობიექტის მიღება $() ფუნქციის გამოყენებით. მაგალითად, მასში CSS სელექტორის გადაცემით, შეგიძლიათ მიიღოთ jQuery ობიექტი ყველა HTML ელემენტისგან, რომელიც ექვემდებარება კრიტერიუმს და შემდეგ იმუშაოთ მათთან jQuery ობიექტის სხვადასხვა მეთოდების გამოყენებით. იმ შემთხვევაში, თუ მეთოდმა არ უნდა დააბრუნოს რაიმე მნიშვნელობა, ის აბრუნებს მითითებას jQuery ობიექტზე, რაც საშუალებას გაძლევთ დააკავშიროთ მეთოდის ზარები სითხის ინტერფეისის კონცეფციის მიხედვით.

გლობალური მეთოდების გამოძახება $ ობიექტზე, მაგალითად, მოსახერხებელი მასივის იტერატორები.

იმისათვის, რომ გაიგოთ განსხვავება CSS-სა და HTML-ს შორის, თქვენ უნდა გესმოდეთ რა არის CSS და რა არის HTML.
ინგლისურიდან თარგმნილი CSS ნიშნავს "კასკადური სტილის ფურცლები". CSS არის ვებ გვერდის დიზაინის მართვის ტექნოლოგია, ის გთავაზობთ მრავალ ვარიანტს გვერდის გარეგნობის აღწერისთვის და ასევე საშუალებას გაძლევთ მნიშვნელოვნად გაამარტივოთ HTML გვერდის გარეგნობა გვერდის ელემენტების დიზაინის CSS ფაილში გადატანით. . CSS შესაძლებელს ხდის ერთი დიზაინის გამოყენებას HTML გვერდის ელემენტების შეუზღუდავი რაოდენობით. ეს საშუალებას გაძლევთ შეცვალოთ დიზაინი საიტის ყველა გვერდზე ყველა გვერდზე, რომლებიც იყენებენ ერთ კლასს დიზაინისთვის, ერთხელ შეცვალოთ იგი CSS ფაილში, ეს ძალიან მოსახერხებელია, თუ საიტს აქვს 50 გვერდზე მეტი, თქვენ არ გჭირდებათ შეცვლა. ელემენტის დიზაინი თითოეულ მათგანში.
რა არის HTML? ინგლისურიდან თარგმნილი HTML ნიშნავს „ჰიპერტექსტის მარკირების ენას“. HTML არის სტანდარტული მარკირების ენა HTML დოკუმენტებისთვის. ჰიპერტექსტის მარკირების ენა გამოიყენება უშუალოდ HTML გვერდის შინაარსის სტრუქტურირებისთვის. მისი დახმარებით შეგიძლიათ შექმნათ ცხრილები, დააპროექტოთ ისინი, შექმნათ დიზაინი ტექსტებისთვის და ა.შ.
HTML გვერდები გამოყენების გარეშე CSSგახდეს რთული და დამაბნეველი, რადგან თითოეული ელემენტის დიზაინი თავიდან იწერება, რაც მნიშვნელოვნად ზრდის ტექსტის მოცულობას. მაგალითად, არის HTML გვერდი, რომელიც შეიცავს ტექსტის 3 ნაწილს, რომლებიც უნდა იყოს ფორმატირებული იმავე გზით (ზომა, ფერი), მაგრამ შეუძლებელია HTML ტეგების გამოყენება სამივეს ერთდროულად დასაფორმებლად, რადგან ეს ფრაგმენტები მდებარეობს. HTML გვერდზე სხვადასხვა ადგილას. ასეთი ტექსტების ფორმატირებისთვის საჭირო იქნება კოდის გამოყენება ყოველ ჯერზე, თითოეული ფრაგმენტისთვის ცალკე.
CSS-ის გამოყენებისას ჩვენ შევქმნით კლასის დიზაინს ერთხელ, შემდეგ კი HTML გვერდის კოდში ჩვენ უბრალოდ მივანიჭებთ ამ კლასს სამივე ფრაგმენტიდან თითოეულს. ახლა HTML კოდი ახლა ნაკლებად მოცულობით გამოიყურება, არა? მხოლოდ ერთი CSS ელემენტის შეცვლით, ჩვენ შეგვიძლია შევცვალოთ საიტის ყველა გვერდის დიზაინი ერთდროულად. და შეიძლება იყოს ათასობით ასეთი გვერდი.

დასკვნების საიტი

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

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

ID

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

მაგალითი 1: როგორ არ არის მიზანშეწონილი იდენტიფიკატორების (ID) გამოყენება

<p id = "my_id_r7t" >არჩეული ტექსტური ბლოკი</p>

<p id = "my_id_r7t" >არჩეული ტექსტური ბლოკი</p>

მაგალითი 2: როგორ არ გამოვიყენოთ იდენტიფიკატორები (ID)

<p id = "my_id_r7t" id = "my_id_r9t" > 1 ელემენტისთვის ორი ან მეტი ID-ის მინიჭება დაუშვებელია</p>

ID-ისა და კლასის ერთ ელემენტზე ერთდროულად გამოყენების შემთხვევაში, ID-ის პრიორიტეტი უფრო მაღალი იქნება, ვიდრე კლასის:

CSS სტილის განსაზღვრა

#my_id_r7t (ფერი: მწვანე; შრიფტის წონა: თამამი;)

ამ აბზაცს ენიჭება კლასი my_class და იდენტიფიკატორი my_id.

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

თუ დესკრიპტორს დავამატებთ <p>ასევე სტილი: <p class = "my_class_r7t" style = "ფერი: ნაცრისფერი" id = "my_id_r7t" >, მაშინ შედეგი იქნება ასეთი:

აღწერისთვის მინიჭებული სტილი style="..."-ის გამოყენებით აქვს უმაღლესი პრიორიტეტი.

პრიორიტეტების კარგი მაგალითი მოცემულია CSS-ის ოფიციალურ დოკუმენტაციაში (eng). მოკლედ, პრიორიტეტები კლებადობით არის: style, id, class, tag style.

id ელემენტი შეიძლება გამოყენებულ იქნას როგორც HTML წამყვანი, უფრო ძველი კონსტრუქციის ნაცვლად <a name = "name_jakorya" > , ასე რომ თქვენ შეგიძლიათ დაუკავშირდეთ გვერდის კონკრეტულ ნაწილს მისი გამოყენებით გადატვირთვის გარეშე <a href = "#imya_jakorya" >ზედა</a>. თუ გვერდზე რამდენიმე იდენტური იდენტიფიკატორია, წარმოიქმნება ორაზროვანი სიტუაცია.

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

კლასი

გამოყენებისას კლასი, ერთ HTML დესკრიპტორს შეიძლება მიენიჭოს სტილი რამდენიმე კლასიდან ერთდროულად:

My_class_r7t (ფერი: ლურჯი; შრიფტის სტილი: დახრილი;)
.my_class_ffR5 (ფერი: შავი; ფონის ფერი: #fafafa; padding: 3px; კონტური: 1px მყარი #757575; ზღვარი-მარცხნივ: 30px; )

სხვადასხვა კლასების სახელები იწერება დაშორებული ადგილებით:

<p class = "my_class_ffR5 my_class_r7t" > 1 HTML ტეგისთვის 2 განსხვავებული კლასის გამოყენების მაგალითი.</p>

ორი განსხვავებული კლასის გამოყენების შედეგი 1 HTML დესკრიპტორზე.

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

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

My_class_bbbb755 (შრიფტის წონა: თამამი;)
.my_class_ffR5 .my_class_bbbb755 (ტექსტის გასწორება: მარჯვნივ ;)

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

"my_class_ffR5 my_class_bbbb755"> კომპოზიციურ კლასებში სტილის გამოყენების მაგალითი

იხილეთ ქვემოთ, თუ როგორ გამოიყურება:

კომპოზიციურ კლასებში სტილის გამოყენების მაგალითი

ერთი და იგივე კლასი, id-ისგან განსხვავებით, ადვილად შეიძლება მიეკუთვნოს შეუზღუდავი რაოდენობის სხვადასხვა ელემენტებს:

<div class = "my_class_ffR5" >...</div>
<p class = "my_class_ffR5" >...</p>
<h5 class = "my_class_ffR5" >...</h5>
<div class = "my_class_ffR5" >...</div>
<p class = "my_class_ffR5" >...</p>

კლასი ან პირადობის მოწმობა - რა გამოვიყენოთ?

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