საიტის ელემენტებისთვის სტილის მინიჭება

მხოლოდ HTML ტეგებში დაწერილი საიტი ძალიან უსახურად გამოიყურება. საიტს სილამაზეს აძლევს CSS სტილები. საიტისთვის სტილების მინიჭების სამი ხერხი არსებობს: 1) მიბმული სტილების ფაილით, 2) "ჰედერში" სტილის ჩასმით და 3) პირდაპირ  HTML ტეგში სტილის ჩასმით.
ყველაზე ხშირად გამოიყენება პირველი ვარიანტი. მეორე ვარიანტი გამოიყენება, როცა სტილის ფაილი მცირე სიდიდისაა, ხოლო მესამე ვარიანტი განსაკუთრებულ შემთხვევებში. 
პირველ სურათზე მოცემულია საიტის ნიმუშის კოდი

საიტის ელემენტებისთვის სტილის მინიჭება

თქვენ ხედავთ სტილის მინიჭების სამივე შემთხვევას: მიბმული main.css ფაილით, "ჰედერში" ჩასმული სტილით h1-თვის და პირდაპირ  HTML ტეგში (style="color:#50FF6D; font-size:28px;")  ჩასმით.

მეორე სურათზე ნაჩვენებია main.css ფაილის შიგთავსი. აქ გვაქვს სტილების მინიჭების უპირატესობის ვარიანტები

 


 

 სტილის მინიჭება ზოგადი ტეგის საშუალებით. მაგ; ყველა P აბზაცს მინიჭებული აქვს ფონტის ზომა 16 პიქსელი და შერჩეული ფერი. მაგრამ ეს სტილი ჩვენ შეგვიძლია შევცვალოთ რამდენიმე აბზაცისთვის კლასის საშუალებით: .abzaci არის კლასი, სადაც შრიფტის სხვა ზომა და ფერია ჩასმული. ყველა იმ აბზაცს, რომელსაც  HTML კოდში ჩასმული აქვს შესაბამისი კლასი ექნება მოცემული სტილი. თუ ჩვენ გვინდა ერთი აბზაცი გამოირჩეოდეს ყველა დანარჩენისგან განსაკუთრებული სტილით, მაშინ მას გამოვყოფთ იდენტიფიკატორის საშუალებით და ვანიჭებთ განსხვავებულ სტილს. ჩვენ მაგალითში #abzaci, რომელსაც ლურჯი ფერი აქვს. (ორი ერთნაირი სახელის იდენტიფიკატორის დარქმევა არ შეიძლება). 

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

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

საიტის ელემენტებისთვის სტილის მინიჭება