WEBVTT

00:00:00.531 --> 00:00:04.192
CSS სელექტორებით
უკვე ბევრი რამის გაკეთბა მოვასწარით:

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

00:00:08.290 --> 00:00:11.028
მოკლედ გავიხსენოთ ყველა
ამ ვებ–გვერდის მაგალითზე.

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

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

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

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

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

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

00:00:30.785 --> 00:00:31.808
ხედავთ?

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

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

00:00:42.029 --> 00:00:43.759
ID–ს სახელიდან გამომდინარე 
ვხვდებით,

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

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

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

00:00:51.453 --> 00:00:53.184
კი, ასეა

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

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

00:01:00.488 --> 00:01:02.956
თუ მინდა გავიგო, რომელ ელემენტებს
აერთიანებს ეს კლასი

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

00:01:05.230 --> 00:01:07.833
მაგალითად, დავუმატო საზღვრები და
განლაგება––

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

00:01:10.619 --> 00:01:13.148
როგორც ვხედავ, ამ კლასში შედის 
ეს პარაგრაფი

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

00:01:14.300 --> 00:01:16.461
ეს ორი ერთხაზიანი პარაგრაფი.

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

00:01:18.448 --> 00:01:20.218
ელემენტების კლასებად გაერთიანება

00:01:20.218 --> 00:01:22.883
ძალიან მოსახერხებელია ელემენტების
სტილის შესაცვლელად.

00:01:22.883 --> 00:01:26.026
მაგრამ კლასების გამოყენებით
სხვა რაღაცების გაკეთებაც შეიძლება.

00:01:26.026 --> 00:01:27.368
ახლავე გაჩვენებთ.

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

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

00:01:31.436 --> 00:01:34.007
მავნებელიც კი არის.

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

00:01:37.009 --> 00:01:39.644
ამიტომ, თუ მაინც და მაინც მათ შესახებ
ვაკეთებთ გვერდს

00:01:39.644 --> 00:01:42.421
ალბათ, უნდა გავაფრთხილოთ ხალხი,
რომ ეს არაჯანსაღი საკვებია.

00:01:42.539 --> 00:01:47.257
მაგალითად, ზემოთა ფაქტი წითლად რომ 
გამოვყოთ? მართლა გაფრთხილებას რომ ჰგავდეს?

00:01:47.626 --> 00:01:49.015
როგორ ვქნათ ეს?

00:01:49.200 --> 00:01:53.401
შეგვიძლია CSS წესს fact–ს დავუმატოთ
ფერის თვისება

00:01:53.401 --> 00:01:55.099
მაგრამ ასე

00:01:55.650 --> 00:02:00.326
ორივე ფაქტი გახდება წითელი;
მეორე კი სულაც არ არის გაფრთხილება.

00:02:00.326 --> 00:02:01.847
სულ სხვა რამეზეა სინამდვილეში.

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

00:02:04.169 --> 00:02:05.578
შეგვიძლია დავამატოთ ID

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

00:02:09.573 --> 00:02:10.958
და მათი ასევე წითლად გამოყოფა

00:02:10.958 --> 00:02:14.185
სულ მოგვიწევს დავამატოთ ID
და ამ ID–ს წესები

00:02:14.391 --> 00:02:19.806
ასეთ შემთხვევებში ყველაზე კარგია, რომ
 თეგს კიდევ ერთი კლასი დავუმატოთ

00:02:20.104 --> 00:02:24.151
ერთ თეგზე შეუზღუდავად შეგვიძლია კლასების
დამატება

00:02:24.541 --> 00:02:28.532
უბრალოდ ვსვამთ კურსორს კლასის სახელის მერე

00:02:28.532 --> 00:02:33.196
ვსვამთ ჰარის და ვწერთ ახალი კლასის სახლეს
მაგ. warning

00:02:33.984 --> 00:02:36.329
ახლა შევქმნათ წესი warning–ისთვის

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

00:02:40.835 --> 00:02:44.001
ახლა ზემოთა ფაქტი წითელია, 
ქვემოთა კი არა

00:02:44.218 --> 00:02:45.411
მშვენიერია.

00:02:45.852 --> 00:02:49.285
კლასის სახელი, ისევე, როგორც ადრე
ბევრ ელემენტს შეგვიძლია, დავურთოთ

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

00:02:54.121 --> 00:02:56.986
გვინდა გამოვყოთ ის წითლად

00:02:56.986 --> 00:02:59.872
იმიტომ რომ ძლიერად შემწვარი ხშირად 
ასოცირდება არაჯანსაღ საჭმელთან

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

00:03:03.692 --> 00:03:04.626
ესეც გაწითლდა

00:03:05.035 --> 00:03:10.820
დააკვირდით, რომ ამ გაფრთხილებას აქვს 
წითელი ფერი

00:03:10.820 --> 00:03:14.653
და ასევე border: top`
და `border: bottom

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

00:03:17.545 --> 00:03:20.578
ბრაუზერი მათ ყველას აკვირდება

00:03:20.578 --> 00:03:22.340
და ყველას წესს იყენებს.

00:03:22.733 --> 00:03:26.810
ზოგი ადამიანი ვერ არჩევს ფერებს

00:03:26.810 --> 00:03:28.563
ამიტომ მხოლოდ ფერი არ უნდა გამოვიყენოთ
მნიშვნელობის ხაზგასასმელად

00:03:28.636 --> 00:03:31.298
ზოგი ადამიანი ვერ ასხვავებს წითელსა და 
შავს –

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

00:03:33.899 --> 00:03:37.463
ამიტომ, შევცვალოთ ჩვენი კლასი ისე,
რომ ყველამ შეამჩნიოს

00:03:38.070 --> 00:03:40.711
ეს ფერი ისევ ფონის ფერზე შეცვალოთ

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

00:03:45.104 --> 00:03:47.564
სხვაობა და კონტრასტი კი

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

00:03:51.400 --> 00:03:54.080
ტექსტის ფერი კი შეცვალოთ თეთრით

00:03:54.785 --> 00:03:56.811
ახლა ყველაფერი კონტრასტულია

00:03:56.811 --> 00:03:59.611
და ასევე გვაქვს წითელი ფონი იმათთვის,
ვინც ასხვავებს წითელს

00:03:59.994 --> 00:04:04.497
და რაგანაც კლასს ვიყენებდით,
ორივე გამაფრთხილებელ თეგს იგივე სტილი აქვს

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

00:04:07.787 --> 00:04:10.735
სამყარო შეიტყობს დონატების საშიშროების
შესახებ.