CSS სელექტორებით უკვე ბევრი რამის გაკეთბა მოვასწარით:
ვარჩევდით ელემენტებს თეგით, ID–ით, კლასის მიხედვით.
მოკლედ გავიხსენოთ ყველა ამ ვებ–გვერდის მაგალითზე.
ეს გვერდი არის დონატებზე.
მას აქვს.. სათაური, პარაგრაფები
ზოგი პარაგრაფი არის მოკლე, ერთხაზიანი ფაქტი.
CSS იწყება წესით, რომელიც ირჩევს გვერდზე ყველა თეგს
და ცვლის მათ ფონტს sans-serif–ზე
უცებ შევცვლი მნიშვნელობას monospace-ით – შერჩევა რომ დაინახოთ.
ხედავთ?
შემდეგი წესი ირჩევს ყველა ელემენტს, თუ მისი ID არის donut-header
ვიცით, რომ შერჩევა არის ID–ით, იმიტომ რომ წინ ეს # სიმბოლო აქვს.
ID–ს სახელიდან გამომდინარე ვხვდებით,
რომ ეს წესი ირჩევს ამ სათაურს
და ცვლის მის ფონტს.
მაგრამ მაინც, ჩამოვსქროლოთ და დავრწმუნდეთ, რომ -ს მართლაც აქვს ეს ID
კი, ასეა
ბოლო წესი ირჩევს ყველა ელემენტს, რომელთა კლასის სახელიც არის fact
ვიცით, რომ კლასის სახელით ეძებს, იმიტომ რომ იწყება წერტილით.
თუ მინდა გავიგო, რომელ ელემენტებს აერთიანებს ეს კლასი
შემიძლია ან ვნახო, რას აკეთებს წესი ––
მაგალითად, დავუმატო საზღვრები და განლაგება––
ან მოვძებნო ეს კლასი HTML–ში,
როგორც ვხედავ, ამ კლასში შედის ეს პარაგრაფი
და აი, ეს პარაგრაფიც.
ეს ორი ერთხაზიანი პარაგრაფი.
ამიტომ გაუჩნდათ მათ საზვარი.
ელემენტების კლასებად გაერთიანება
ძალიან მოსახერხებელია ელემენტების სტილის შესაცვლელად.
მაგრამ კლასების გამოყენებით სხვა რაღაცების გაკეთებაც შეიძლება.
ახლავე გაჩვენებთ.
გვაქვს გვერდი დონატების შესახებ.
ისე, დონატები სულაც არაა სასარგებლო.
მავნებელიც კი არის.
და შაქრის გამო მიჩვევასაც იწვევენ.
ამიტომ, თუ მაინც და მაინც მათ შესახებ ვაკეთებთ გვერდს
ალბათ, უნდა გავაფრთხილოთ ხალხი, რომ ეს არაჯანსაღი საკვებია.
მაგალითად, ზემოთა ფაქტი წითლად რომ გამოვყოთ? მართლა გაფრთხილებას რომ ჰგავდეს?
როგორ ვქნათ ეს?
შეგვიძლია CSS წესს fact–ს დავუმატოთ ფერის თვისება
მაგრამ ასე
ორივე ფაქტი გახდება წითელი; მეორე კი სულაც არ არის გაფრთხილება.
სულ სხვა რამეზეა სინამდვილეში.
და არ მინდა, რომ წითელი იყოს.
შეგვიძლია დავამატოთ ID
მაგრამ მერე თუ სხვა გაფრთხილებების დამატება მოგვინდა
და მათი ასევე წითლად გამოყოფა
სულ მოგვიწევს დავამატოთ ID და ამ ID–ს წესები
ასეთ შემთხვევებში ყველაზე კარგია, რომ თეგს კიდევ ერთი კლასი დავუმატოთ
ერთ თეგზე შეუზღუდავად შეგვიძლია კლასების დამატება
უბრალოდ ვსვამთ კურსორს კლასის სახელის მერე
ვსვამთ ჰარის და ვწერთ ახალი კლასის სახლეს მაგ. warning
ახლა შევქმნათ წესი warning–ისთვის
და გადავიტანოთ ფერის თვისება მასზე
ახლა ზემოთა ფაქტი წითელია, ქვემოთა კი არა
მშვენიერია.
კლასის სახელი, ისევე, როგორც ადრე ბევრ ელემენტს შეგვიძლია, დავურთოთ
შეიძლება, გვინდა გავაფერადოთ გამოყოფილი ტექსტი "deep fried"
გვინდა გამოვყოთ ის წითლად
იმიტომ რომ ძლიერად შემწვარი ხშირად ასოცირდება არაჯანსაღ საჭმელთან
ამიტომ, დავურთოთ class = "warning"
ესეც გაწითლდა
დააკვირდით, რომ ამ გაფრთხილებას აქვს წითელი ფერი
და ასევე border: top` და `border: bottom
ასე ხდება ბევრი კლასის გამოყენებისას
ბრაუზერი მათ ყველას აკვირდება
და ყველას წესს იყენებს.
ზოგი ადამიანი ვერ არჩევს ფერებს
ამიტომ მხოლოდ ფერი არ უნდა გამოვიყენოთ მნიშვნელობის ხაზგასასმელად
ზოგი ადამიანი ვერ ასხვავებს წითელსა და შავს –
შეიძლება, ვერც შენ ასხვავებ მათ
ამიტომ, შევცვალოთ ჩვენი კლასი ისე, რომ ყველამ შეამჩნიოს
ეს ფერი ისევ ფონის ფერზე შეცვალოთ
იმიტომ რომ სხვაობას ყველა შეამჩნევს
სხვაობა და კონტრასტი კი
კარგად გამოყოფს აბზაცს ყველასთვის.
ტექსტის ფერი კი შეცვალოთ თეთრით
ახლა ყველაფერი კონტრასტულია
და ასევე გვაქვს წითელი ფონი იმათთვის, ვინც ასხვავებს წითელს
და რაგანაც კლასს ვიყენებდით, ორივე გამაფრთხილებელ თეგს იგივე სტილი აქვს
ახლა, მადლობა CSS კლასებს,
სამყარო შეიტყობს დონატების საშიშროების შესახებ.