ჩვენ დავბრუნდით და ახლა ჩვენს გვერდზე არის ცნობილი ნახატების სიების ბმულები.
CSS იწყება წესით, რომ ძირითად ნაწილში მთელი ტექსტის ფონტი არის sans-serif
შემდეგ გვაქვს წესი, რომელიც ცვლის და პარაგრაფების სტილს.
შემდეგ კიდევ რამდენიმე წესი გვაქვს, რომელიც მანამდე, ალბათ, არ გინახავს.
ყველა იწყება ასე: a: რაღაც–სიტყვა
რას ნიშნავს a: ? რას მიესადაგება ეს წესები?
ყველაფერი, რაც ასე გამოიყურება მიემართება ფსევდო–კლასებს.
ფსევდო–კლასი ირჩევს ელემენტებს ინფორმაციით რომელიც არაა მოცემული გვერდის სტრუქტურაში
ან უბრალოდ ვერ გადმოიცემა სხვს სელექტორებით.
აქ ფსევდო–კლასებს ვირჩევ ბმულების სტილის შესაცვლელად მათი მდგომარეობის მიხედვით.
ფსევდო–კლასი link აირჩევს ყველა ბმულს, რომელზეც მომხმარებელი ჯერ არ გადასულა.
ჩვეულებრივ, ასეთი ბმული ლურჯია.
ფსევდო–კლასი visited აირჩევს იმ ბმულებს, რომელთაც მომხმარებელი უკვე ეწვია.
ასეთ ბმულებს ბრაუზერები, წესით, იისფრად აღნიშნავენ.
თუ ძალიან გვინდა, შეგვიძლია შევცვალოთ ფერები.
მაგრამ ამისთვის კარგი მიზეზი უნდა გვქონდეს
ადამიანები შეეჩვივნენ ლურჯსა და იისფერს და ასე განსაზღვრავენ, რა ნახეს უკვე, და რა – ჯერ არა.
ზოგადად, ეს ძალიან სასარგებლო ფუნქციაა
და ტყუილ–უბრალოდ არ ღირს მისი შეცვლა.
ამიტომ, მე უბრალოდ წავშლი ამ წესებს.
მათ შეცვლას, ჩემი აზრით, წაშლა სჯობს.
შემდეგი წესი არის a:hover
hover ფსევდო–კლასი აირჩევს ელემენტს, თუ მომხმარებელი მას მაუსს მიუახლოვებს.
თვისებები ამ ელემენტს მხოლოდ ასეთ შემთხვევაში გადაეცემა.
დააპაუზეთ ვიდეო და ნახეთ, რა მოხდება თუ ბმულებთან მაუსს მიიტანთ.
მიდით, მე დაგიცდით.
ნახეთ, როგორ იცვლიდა ფონი ფერს? ძალიან მაგარი ეფექტია.
ამ hover პსევდო–კლასის გამოყენება შეგიძლია ნებისმიერ ელემენტზე, არა მარტო ბმულზე
მაგრამ ის არ იმუშავბს ყველა მოწყობილობაზე
მაგალითად, თუ ტელეფონით ხარ, მაუსს ვერ მიიტან: ან ეხები, ან არა
კარგია, როცა ეს ეფექტი ბონუსად გაქვს, მაგრამ სერიოზული ფუნქცია არ უნდა დააკისრო
გადავიდეთ ბოლო ორზე. ისინი გვანან hover-ს
მოქმედებენ მომხმარებლის მიმდინარე ქცევის შესაბამისად
პსევდო–კლასი active ირჩევს მიმდინარე გააქტიურებულ ელემენტებს
მაგალითად, ბმულს, რომელსაც ზუსტად ახლა აჭერენ, გადასვლამდე
პსევდო–კლასი focus ირჩევს ფოკუსში მყოფ ელემენტებს;
მაგალითად, თუ tab ღილაკს იყენებ ინტერფეისზე სამოძრაოდ
დააპაუზე ვიდეო და სცადე გადახვიდე ბმულებზე ან გამოიყენო მათ ირგვლივ tab ღილაკი
შეამჩნიე, როგორ იცვლებოდა ფონი?
hover, active და focus – სამივესთვის იგივე თვისება შევარჩიე, იმიტომ რომ მსგავსი ქმდებებია
მომხმარებელი რაღაცნაირად ზემოქმედებს ბმულზე
ბევრი დიზაინერი სწორედ ამის გამო იყენებს სამივესთვის ერთსა და იმავე თვისებას
დავუშვათ, მინდა შევცვალო ამ ფონის ფერი
შემიძლია შევცავლო ის ცალ–ცალკე ყოველისთვის
ან გამოვიყენო ის, რაც ახლახან ვისწავლეთ
შემიძლია გავაერთიანო სელექტორები, ჩავსვა ისინი ერთ წესში და გამოვყო მძიმეებით
აქ დავსვამ მძიმეს და ჩავსვამ "a:active", "a:focus".
ახლა წავშალოთ ესენი და შევცვალოთ სამივე ერთდროულად. კარგია
პსევდო–კლასები ამ რამდენიმეთი არ იწურება
შეგიძლია დაძებნო დანარჩენები ინტერნეტში
ან დაიცადო, სანამ აქ გასწავლით მეტს.