WEBVTT

00:00:00.831 --> 00:00:05.211
ჩვენ დავბრუნდით და ახლა ჩვენს გვერდზე
არის ცნობილი ნახატების სიების ბმულები.

00:00:05.211 --> 00:00:11.743
CSS იწყება წესით, რომ ძირითად ნაწილში 
მთელი ტექსტის ფონტი არის sans-serif

00:00:11.743 --> 00:00:17.114
შემდეგ გვაქვს წესი, რომელიც ცვლის
 და  პარაგრაფების სტილს.

00:00:17.114 --> 00:00:24.737
შემდეგ კიდევ რამდენიმე წესი გვაქვს, 
რომელიც მანამდე, ალბათ, არ გინახავს.

00:00:24.737 --> 00:00:29.967
ყველა იწყება ასე: 
a: რაღაც–სიტყვა

00:00:29.967 --> 00:00:35.504
რას ნიშნავს a: ?
რას მიესადაგება ეს წესები?

00:00:35.504 --> 00:00:41.065
ყველაფერი, რაც ასე გამოიყურება 
მიემართება ფსევდო–კლასებს.

00:00:41.065 --> 00:00:48.002
ფსევდო–კლასი ირჩევს ელემენტებს ინფორმაციით
რომელიც არაა მოცემული გვერდის სტრუქტურაში

00:00:48.002 --> 00:00:51.826
ან უბრალოდ ვერ გადმოიცემა სხვს სელექტორებით.

00:00:51.826 --> 00:00:57.430
აქ ფსევდო–კლასებს ვირჩევ ბმულების სტილის 
შესაცვლელად მათი მდგომარეობის მიხედვით.

00:00:57.430 --> 00:01:03.449
ფსევდო–კლასი link აირჩევს ყველა ბმულს,
რომელზეც მომხმარებელი ჯერ არ გადასულა.

00:01:03.449 --> 00:01:06.582
ჩვეულებრივ, ასეთი ბმული ლურჯია.

00:01:06.582 --> 00:01:10.405
ფსევდო–კლასი visited აირჩევს იმ ბმულებს,
რომელთაც მომხმარებელი უკვე ეწვია.

00:01:10.405 --> 00:01:13.294
ასეთ ბმულებს ბრაუზერები, წესით,
იისფრად აღნიშნავენ.

00:01:13.294 --> 00:01:16.121
თუ ძალიან გვინდა,
შეგვიძლია შევცვალოთ ფერები.

00:01:16.121 --> 00:01:18.083
მაგრამ ამისთვის კარგი მიზეზი უნდა გვქონდეს

00:01:18.083 --> 00:01:22.954
ადამიანები შეეჩვივნენ ლურჯსა და იისფერს და
ასე განსაზღვრავენ, რა ნახეს უკვე, და რა – ჯერ არა.

00:01:22.954 --> 00:01:25.549
ზოგადად, ეს ძალიან სასარგებლო ფუნქციაა

00:01:25.549 --> 00:01:28.474
და ტყუილ–უბრალოდ არ ღირს მისი შეცვლა.

00:01:28.474 --> 00:01:31.092
ამიტომ, მე უბრალოდ წავშლი ამ წესებს.

00:01:31.092 --> 00:01:34.221
მათ შეცვლას, ჩემი აზრით, წაშლა სჯობს.

00:01:34.221 --> 00:01:38.972
შემდეგი წესი არის a:hover

00:01:38.972 --> 00:01:46.138
hover ფსევდო–კლასი აირჩევს ელემენტს, თუ
მომხმარებელი მას მაუსს მიუახლოვებს.

00:01:46.138 --> 00:01:48.408
თვისებები ამ ელემენტს მხოლოდ ასეთ
შემთხვევაში გადაეცემა.

00:01:48.408 --> 00:01:53.353
დააპაუზეთ ვიდეო და ნახეთ, რა მოხდება 
თუ ბმულებთან მაუსს მიიტანთ.

00:01:53.353 --> 00:01:57.406
მიდით, მე დაგიცდით.

00:01:57.406 --> 00:02:01.165
ნახეთ, როგორ იცვლიდა ფონი ფერს?
ძალიან მაგარი ეფექტია.

00:02:01.165 --> 00:02:05.073
ამ hover პსევდო–კლასის გამოყენება შეგიძლია
ნებისმიერ ელემენტზე, არა მარტო ბმულზე

00:02:05.073 --> 00:02:07.662
მაგრამ ის არ იმუშავბს ყველა მოწყობილობაზე

00:02:07.662 --> 00:02:11.421
მაგალითად, თუ ტელეფონით ხარ, მაუსს ვერ 
მიიტან: ან ეხები, ან არა

00:02:11.421 --> 00:02:15.298
კარგია, როცა ეს ეფექტი ბონუსად გაქვს,
მაგრამ სერიოზული ფუნქცია არ უნდა დააკისრო

00:02:15.298 --> 00:02:20.503
გადავიდეთ ბოლო ორზე. 
ისინი გვანან hover-ს

00:02:20.503 --> 00:02:23.067
მოქმედებენ მომხმარებლის მიმდინარე
ქცევის შესაბამისად

00:02:23.067 --> 00:02:27.191
პსევდო–კლასი active ირჩევს მიმდინარე
გააქტიურებულ ელემენტებს

00:02:27.191 --> 00:02:34.076
მაგალითად, ბმულს, რომელსაც ზუსტად ახლა 
აჭერენ, გადასვლამდე

00:02:34.076 --> 00:02:38.614
პსევდო–კლასი focus ირჩევს ფოკუსში მყოფ
ელემენტებს;

00:02:38.614 --> 00:02:42.394
მაგალითად, თუ tab ღილაკს იყენებ
ინტერფეისზე სამოძრაოდ

00:02:42.394 --> 00:02:47.744
დააპაუზე ვიდეო და სცადე გადახვიდე ბმულებზე
ან გამოიყენო მათ ირგვლივ tab ღილაკი

00:02:47.744 --> 00:02:51.497
შეამჩნიე, როგორ იცვლებოდა ფონი?

00:02:51.497 --> 00:02:56.415
hover, active და focus – სამივესთვის იგივე
თვისება შევარჩიე, იმიტომ რომ მსგავსი ქმდებებია

00:02:56.415 --> 00:02:58.842
მომხმარებელი რაღაცნაირად ზემოქმედებს
ბმულზე

00:02:58.842 --> 00:03:03.655
ბევრი დიზაინერი სწორედ ამის გამო იყენებს 
სამივესთვის ერთსა და იმავე თვისებას

00:03:03.655 --> 00:03:07.114
დავუშვათ, მინდა შევცვალო ამ ფონის
ფერი

00:03:07.114 --> 00:03:13.552
შემიძლია შევცავლო ის ცალ–ცალკე
ყოველისთვის

00:03:13.552 --> 00:03:15.885
ან გამოვიყენო ის, რაც ახლახან ვისწავლეთ

00:03:15.885 --> 00:03:20.140
შემიძლია გავაერთიანო სელექტორები, ჩავსვა 
ისინი ერთ წესში და გამოვყო მძიმეებით

00:03:20.140 --> 00:03:27.214
აქ დავსვამ მძიმეს და ჩავსვამ 
"a:active", "a:focus".

00:03:27.214 --> 00:03:37.418
ახლა წავშალოთ ესენი და შევცვალოთ სამივე
ერთდროულად. კარგია

00:03:37.418 --> 00:03:41.531
პსევდო–კლასები ამ რამდენიმეთი არ იწურება

00:03:41.531 --> 00:03:45.123
შეგიძლია დაძებნო დანარჩენები ინტერნეტში

00:03:45.123 --> 00:03:48.653
ან დაიცადო, სანამ აქ გასწავლით მეტს.