1
00:00:00,326 --> 00:00:02,079
შევხედოთ ჩვენს ვებგვერდს.

2
00:00:02,284 --> 00:00:04,540
მას აქვს ზედა სათაურები,

3
00:00:04,540 --> 00:00:07,581
პარაგრაფი რომელიც აღწერს კურდღლებს,

4
00:00:07,581 --> 00:00:10,588
რეალურად, რამდენიმე პარაგრაფი,

5
00:00:10,588 --> 00:00:13,416
ჩემი საყვარელი სიმღერის
ტექსტით კურდღლებზე.

6
00:00:13,543 --> 00:00:17,554
ბოლოს პირველი სიმღერის ტექსტის
პარაგრაფი id-ს გამოყენებით შევქმენით.

7
00:00:17,857 --> 00:00:21,016
რადგან ახლა ტექსტების
რამდენიმე პარაგრაფი გვაქვს,

8
00:00:21,016 --> 00:00:24,613
მინდა ყველა მათგანს
მივანიჭოთ ყვითელი ფონი.

9
00:00:24,613 --> 00:00:28,221
როგორ მოვახერხოთ ეს
ჩვენი ახლანდელი ცოდნით?

10
00:00:28,221 --> 00:00:33,002
პირველი რაც ვისწავლეთ, იყო
ყველა მსგავსი ტიპის tag-ის მონიშვნა,

11
00:00:33,002 --> 00:00:34,659
როგორც 'p' მომნიშვნელით,

12
00:00:34,886 --> 00:00:39,120
მაგრამ ამით ყველა პარაგრაფი შეიღება და
არა მხოლოდ ტექსტიანი პარაგრაფები.

13
00:00:39,226 --> 00:00:41,290
გვჭირდება რამე უფრო კონკრეტული.

14
00:00:41,507 --> 00:00:44,898
შემდეგ, ვისწავლეთ tag-ების
კონკრეტული id-ებით მონიშვნა,

15
00:00:44,898 --> 00:00:48,140
მაგალითად, პარაგრაფის არჩევა, რომელშიც
"სიმღერა კურდღელზე" შედის,

16
00:00:48,368 --> 00:00:50,920
მაგრამ ამან მხოლოდ
პირველი პარაგრაფი მონიშნა.

17
00:00:51,120 --> 00:00:53,725
ამ id-ს დამატება არცერთ
პარაგრაფზე არ შეგვიძლია,

18
00:00:53,725 --> 00:00:57,657
რადგან უფლება არ გვაქვს ერთი და
იმავე id რამდენიმე tag-ზე გამოვიყენოთ.

19
00:00:57,867 --> 00:01:00,202
რომ ვდომებოდა სხვა პარაგრაფის არჩევა,

20
00:01:00,202 --> 00:01:02,881
მოგვიწევდა
თითოეულისთვის ახალი ID-ს მიცემა.

21
00:01:02,881 --> 00:01:05,717
(მაგალითად "სიმღერის-ტექსტი2"
და "სიმღერის-ტექსტი3"),

22
00:01:05,717 --> 00:01:07,458
რადგან ყველა ID უნიკალური უნდა იყოს.

23
00:01:07,458 --> 00:01:09,808
შემდეგ კი თითოეულისთვის
წესების დამატებაა საჭირო.

24
00:01:09,808 --> 00:01:12,398
შეგვიძლია ეს ვქნათ.
მაგრამ ეს ბევრი სამუშაოა!

25
00:01:12,398 --> 00:01:14,691
თან, ყოველ ჯერზე
სიმღერისთვის ტაეპის დამატება

26
00:01:14,691 --> 00:01:17,279
ახალი ID-ს და HTML-ს დამატებას ნიშნავს,

27
00:01:17,279 --> 00:01:19,168
ახალი ID-სა და CSS-ის წესების დამატებას

28
00:01:19,168 --> 00:01:22,830
და ასობით ტაეპის დამატება
უკვე გადამღლელი გახდება.

29
00:01:22,980 --> 00:01:24,315
გამოიცანით რას ვიზამთ.

30
00:01:24,492 --> 00:01:27,383
არსებობს უკეთესი გზა,
რომელსაც "კლასები" ეწოდება.

31
00:01:27,599 --> 00:01:32,162
კლასი ფაქტობრივად კონკრეტული ჯგუფისთვის
ელემენტის მინიჭებას ნიშნავს.

32
00:01:32,162 --> 00:01:35,150
შეგიძლია ჯგუფს იმდენი ელემენტი
მიანიჭო, რამდენიც მოგესურვება.

33
00:01:35,352 --> 00:01:39,928
კლასის დასამატებლად საჭიროა კლასის
ატრიბუტის დამატება, როგორც ID-ებისთვის.

34
00:01:40,362 --> 00:01:44,705
პირველ რიგში წავშალოთ
ეს რადგან შეცვლას ვაპირებთ.

35
00:01:44,705 --> 00:01:47,915
ახლა გვაქვს კურსორი საწყის '' tag-ში.

36
00:01:47,915 --> 00:01:53,183
დავამატებ გამოტოვებულ
ადგილს და დავწერ: class = "

37
00:01:53,183 --> 00:01:56,927
ახლა კლასის სახელი უნდა მოვიფიქრო,
რომელიც კლასს კარგად აღწერს.

38
00:01:56,927 --> 00:01:59,294
მოდი დავარქვათ "სიმღერის-ტექსტი".

39
00:01:59,658 --> 00:02:01,449
ესეც ასე.

40
00:02:01,665 --> 00:02:04,335
რა ელემენტები უნდა
ჰქონდეს ამ კლასის სახელს?

41
00:02:04,416 --> 00:02:06,420
უნდა შედიოდეს ყველა სხვა პარაგრაფი.

42
00:02:06,510 --> 00:02:13,061
ამიტომ ჩავიდეთ ქვემოთ და დავამატოთ
ატრიბუტი თითოეულ პარაგრაფის კლასს.

43
00:02:13,061 --> 00:02:14,540
("სიმღერის-ტექსტი")

44
00:02:14,836 --> 00:02:18,003
მშვენიერია. ახლა მზად ვართ
CSS წესის დასამატებლად.

45
00:02:18,217 --> 00:02:26,157
დავუბრუნდეთ '' tag-ს და წავშალოთ
id მნიშვნელი რადგან მას ვცვლით.

46
00:02:26,157 --> 00:02:28,594
ახლა კი კლასის მნიშვნელი უნდა მოვიფიქროთ.

47
00:02:28,931 --> 00:02:34,039
კლასის მნიშვნელის
დასაწყებად ვიყენებთ წერტილს.

48
00:02:34,426 --> 00:02:39,027
შემდეგ ვწერთ კლასის
სახელს: სიმღერის-ტექსტი,

49
00:02:39,027 --> 00:02:47,821
და როგორც ყოველთვის: ფიგურილი ფრჩხილები,
თვისება, წერტილმძიმე, მნიშვნელობა.

50
00:02:47,821 --> 00:02:51,007
ახლა ყველა ტექსტს ყვითელი ფონი აქვს.

51
00:02:51,343 --> 00:02:55,143
რა მოხდება აქ თუ s-ს დიდად დავწერთ?

52
00:02:55,240 --> 00:02:56,398
არ მუშაობს.

53
00:02:56,491 --> 00:02:58,950
ეს იმიტომ, რომ კლასის
სახელები case-sensitive არის.

54
00:02:58,966 --> 00:03:01,771
მნიშვნელობა აქვს რომელი ასო
იქნება დიდი და რომელი პატარა,

55
00:03:01,771 --> 00:03:03,558
როგორც ID-ების შემთხვევაში.

56
00:03:04,323 --> 00:03:08,295
რა მოხდება თუ წერტილის
მაგივრად #-ს გამოვიყენებთ?

57
00:03:08,542 --> 00:03:09,666
არ იმუშავებს.

58
00:03:09,774 --> 00:03:13,085
იმიტომ, რომ ბრაუზერი
"სიმღერის-ტექსტი"-ს ID-იდ აღიქვამს

59
00:03:13,085 --> 00:03:18,471
და ვერაფერს იპოვის სიმღერის
ტექსტებში ამ id ატრიბუტით.

60
00:03:18,471 --> 00:03:24,512
რა მოხდება თუ კლასის სახელებს შორის
გამოტოვებული ადგილები ჩავსვით?

61
00:03:25,248 --> 00:03:30,192
არც ეს იმუშავებს, რადგან თავისუფალი
სივრცე არ უნდა გვქონდეს.

62
00:03:30,192 --> 00:03:31,649
ამას მოგვიანებით შევხვდებით.

63
00:03:31,649 --> 00:03:34,972
თავისუფალი სივრცე
CSS-ში სპეციფიურ რამეს ნიშნავს.

64
00:03:35,868 --> 00:03:38,776
-- დავაბრუნოთ როგორც იყო --

65
00:03:39,523 --> 00:03:41,110
კიდევ ერთხელ:

66
00:03:41,110 --> 00:03:43,387
როცა გვსურს კლასის დამატება,

67
00:03:43,387 --> 00:03:45,589
უნდა მოვიფიქროთ კლასის სახელი,

68
00:03:45,589 --> 00:03:49,000
დავამატოთ HTML-ში კლასის ატრიბუტებში,

69
00:03:49,248 --> 00:03:51,317
შემდეგ ვწერთ სტილის წესს,

70
00:03:51,317 --> 00:03:54,691
ვიწყებთ წერტილით,
შემდეგ კი კლასის სახელით.

71
00:03:55,216 --> 00:03:58,428
ახლა შენი CSS
გაცილებით უკეთესი სტილისაა!