0:00:00.531,0:00:04.192
CSS სელექტორებით[br]უკვე ბევრი რამის გაკეთბა მოვასწარით:

0:00:04.192,0:00:08.006
ვარჩევდით ელემენტებს თეგით, ID–ით,[br]კლასის მიხედვით.

0:00:08.290,0:00:11.028
მოკლედ გავიხსენოთ ყველა[br]ამ ვებ–გვერდის მაგალითზე.

0:00:11.257,0:00:13.655
ეს გვერდი არის დონატებზე.

0:00:13.789,0:00:15.963
მას აქვს.. სათაური, პარაგრაფები

0:00:15.963,0:00:18.944
ზოგი პარაგრაფი არის მოკლე, [br]ერთხაზიანი ფაქტი.

0:00:19.242,0:00:23.142
CSS იწყება წესით, რომელიც ირჩევს გვერდზე[br]ყველა  თეგს

0:00:23.142,0:00:25.611
და ცვლის მათ ფონტს sans-serif–ზე

0:00:26.074,0:00:30.063
უცებ შევცვლი მნიშვნელობას monospace-ით –[br]შერჩევა რომ დაინახოთ.

0:00:30.785,0:00:31.808
ხედავთ?

0:00:34.102,0:00:37.836
შემდეგი წესი ირჩევს ყველა ელემენტს, თუ[br]მისი ID არის donut-header

0:00:38.034,0:00:41.913
ვიცით, რომ შერჩევა არის ID–ით, იმიტომ[br]რომ წინ ეს # სიმბოლო აქვს.

0:00:42.029,0:00:43.759
ID–ს სახელიდან გამომდინარე [br]ვხვდებით,

0:00:43.759,0:00:46.688
რომ ეს წესი ირჩევს ამ სათაურს

0:00:46.688,0:00:47.747
და ცვლის მის ფონტს.

0:00:47.974,0:00:51.417
მაგრამ მაინც, ჩამოვსქროლოთ და დავრწმუნდეთ,[br]რომ -ს მართლაც აქვს ეს ID

0:00:51.453,0:00:53.184
კი, ასეა

0:00:53.387,0:00:56.790
ბოლო წესი ირჩევს ყველა ელემენტს, რომელთა[br]კლასის სახელიც არის fact

0:00:56.896,0:01:00.384
ვიცით, რომ კლასის სახელით ეძებს, იმიტომ [br]რომ იწყება წერტილით.

0:01:00.488,0:01:02.956
თუ მინდა გავიგო, რომელ ელემენტებს[br]აერთიანებს ეს კლასი

0:01:02.956,0:01:05.230
შემიძლია ან ვნახო, რას აკეთებს წესი ––

0:01:05.230,0:01:07.833
მაგალითად, დავუმატო საზღვრები და[br]განლაგება––

0:01:07.833,0:01:10.462
ან მოვძებნო ეს კლასი HTML–ში,

0:01:10.619,0:01:13.148
როგორც ვხედავ, ამ კლასში შედის [br]ეს პარაგრაფი

0:01:13.148,0:01:14.300
და აი, ეს პარაგრაფიც.

0:01:14.300,0:01:16.461
ეს ორი ერთხაზიანი პარაგრაფი.

0:01:16.461,0:01:18.315
ამიტომ გაუჩნდათ მათ საზვარი.

0:01:18.448,0:01:20.218
ელემენტების კლასებად გაერთიანება

0:01:20.218,0:01:22.883
ძალიან მოსახერხებელია ელემენტების[br]სტილის შესაცვლელად.

0:01:22.883,0:01:26.026
მაგრამ კლასების გამოყენებით[br]სხვა რაღაცების გაკეთებაც შეიძლება.

0:01:26.026,0:01:27.368
ახლავე გაჩვენებთ.

0:01:27.368,0:01:29.136
გვაქვს გვერდი დონატების შესახებ.

0:01:29.136,0:01:31.361
ისე, დონატები სულაც არაა სასარგებლო.

0:01:31.436,0:01:34.007
მავნებელიც კი არის.

0:01:34.030,0:01:36.963
და შაქრის გამო მიჩვევასაც იწვევენ.

0:01:37.009,0:01:39.644
ამიტომ, თუ მაინც და მაინც მათ შესახებ[br]ვაკეთებთ გვერდს

0:01:39.644,0:01:42.421
ალბათ, უნდა გავაფრთხილოთ ხალხი,[br]რომ ეს არაჯანსაღი საკვებია.

0:01:42.539,0:01:47.257
მაგალითად, ზემოთა ფაქტი წითლად რომ [br]გამოვყოთ? მართლა გაფრთხილებას რომ ჰგავდეს?

0:01:47.626,0:01:49.015
როგორ ვქნათ ეს?

0:01:49.200,0:01:53.401
შეგვიძლია CSS წესს fact–ს დავუმატოთ[br]ფერის თვისება

0:01:53.401,0:01:55.099
მაგრამ ასე

0:01:55.650,0:02:00.326
ორივე ფაქტი გახდება წითელი;[br]მეორე კი სულაც არ არის გაფრთხილება.

0:02:00.326,0:02:01.847
სულ სხვა რამეზეა სინამდვილეში.

0:02:02.051,0:02:03.845
და არ მინდა, რომ წითელი იყოს.

0:02:04.169,0:02:05.578
შეგვიძლია დავამატოთ ID

0:02:05.578,0:02:09.573
მაგრამ მერე თუ [br]სხვა გაფრთხილებების დამატება მოგვინდა

0:02:09.573,0:02:10.958
და მათი ასევე წითლად გამოყოფა

0:02:10.958,0:02:14.185
სულ მოგვიწევს დავამატოთ ID[br]და ამ ID–ს წესები

0:02:14.391,0:02:19.806
ასეთ შემთხვევებში ყველაზე კარგია, რომ[br] თეგს კიდევ ერთი კლასი დავუმატოთ

0:02:20.104,0:02:24.151
ერთ თეგზე შეუზღუდავად შეგვიძლია კლასების[br]დამატება

0:02:24.541,0:02:28.532
უბრალოდ ვსვამთ კურსორს კლასის სახელის მერე

0:02:28.532,0:02:33.196
ვსვამთ ჰარის და ვწერთ ახალი კლასის სახლეს[br]მაგ. warning

0:02:33.984,0:02:36.329
ახლა შევქმნათ წესი warning–ისთვის

0:02:37.119,0:02:40.243
და გადავიტანოთ ფერის თვისება მასზე

0:02:40.835,0:02:44.001
ახლა ზემოთა ფაქტი წითელია, [br]ქვემოთა კი არა

0:02:44.218,0:02:45.411
მშვენიერია.

0:02:45.852,0:02:49.285
კლასის სახელი, ისევე, როგორც ადრე[br]ბევრ ელემენტს შეგვიძლია, დავურთოთ

0:02:49.643,0:02:54.121
შეიძლება, გვინდა გავაფერადოთ გამოყოფილი[br]ტექსტი "deep fried"

0:02:54.121,0:02:56.986
გვინდა გამოვყოთ ის წითლად

0:02:56.986,0:02:59.872
იმიტომ რომ ძლიერად შემწვარი ხშირად [br]ასოცირდება არაჯანსაღ საჭმელთან

0:03:00.025,0:03:03.692
ამიტომ, დავურთოთ class = "warning"

0:03:03.692,0:03:04.626
ესეც გაწითლდა

0:03:05.035,0:03:10.820
დააკვირდით, რომ ამ გაფრთხილებას აქვს [br]წითელი ფერი

0:03:10.820,0:03:14.653
და ასევე border: top`[br]და `border: bottom

0:03:14.795,0:03:17.545
ასე ხდება ბევრი კლასის გამოყენებისას

0:03:17.545,0:03:20.578
ბრაუზერი მათ ყველას აკვირდება

0:03:20.578,0:03:22.340
და ყველას წესს იყენებს.

0:03:22.733,0:03:26.810
ზოგი ადამიანი ვერ არჩევს ფერებს

0:03:26.810,0:03:28.563
ამიტომ მხოლოდ ფერი არ უნდა გამოვიყენოთ[br]მნიშვნელობის ხაზგასასმელად

0:03:28.636,0:03:31.298
ზოგი ადამიანი ვერ ასხვავებს წითელსა და [br]შავს –

0:03:31.298,0:03:33.815
შეიძლება, ვერც შენ ასხვავებ მათ

0:03:33.899,0:03:37.463
ამიტომ, შევცვალოთ ჩვენი კლასი ისე,[br]რომ ყველამ შეამჩნიოს

0:03:38.070,0:03:40.711
ეს ფერი ისევ ფონის ფერზე შეცვალოთ

0:03:40.711,0:03:44.740
იმიტომ რომ სხვაობას ყველა შეამჩნევს

0:03:45.104,0:03:47.564
სხვაობა და კონტრასტი კი

0:03:47.564,0:03:51.304
კარგად გამოყოფს აბზაცს ყველასთვის.

0:03:51.400,0:03:54.080
ტექსტის ფერი კი შეცვალოთ თეთრით

0:03:54.785,0:03:56.811
ახლა ყველაფერი კონტრასტულია

0:03:56.811,0:03:59.611
და ასევე გვაქვს წითელი ფონი იმათთვის,[br]ვინც ასხვავებს წითელს

0:03:59.994,0:04:04.497
და რაგანაც კლასს ვიყენებდით,[br]ორივე გამაფრთხილებელ თეგს იგივე სტილი აქვს

0:04:04.774,0:04:07.787
ახლა, მადლობა CSS კლასებს,

0:04:07.787,0:04:10.735
სამყარო შეიტყობს დონატების საშიშროების[br]შესახებ.