1
00:00:00,000 --> 00:00:05,660
>> [მუსიკის დაკვრა]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: მოდით კიდევ ერთი
ვიდეო ვისაუბროთ კიდევ ერთი ენა.

3
00:00:08,740 --> 00:00:10,800
ამჯერად ჩვენ ვსაუბრობთ CSS.

4
00:00:10,800 --> 00:00:13,460
ასე რომ, CSS, რომელიც მოკლე
კასკადური სტილების,

5
00:00:13,460 --> 00:00:16,149
არის კიდევ ერთი ენა ვიყენებთ
როდესაც მშენებლობას საიტებზე.

6
00:00:16,149 --> 00:00:17,190
დაფიქრდით მოსწონს ეს.

7
00:00:17,190 --> 00:00:20,900
თუ HTML არის ის, რაც ჩვენ ვიყენებთ ორგანიზება
შინაარსი ჩვენ გვინდა, რომ ჩვენს გვერდზე,

8
00:00:20,900 --> 00:00:25,390
CSS არის ინსტრუმენტი, რომელიც ჩვენ საერთოდ გამოიყენოს
სახის როგორ ჩვენი საიტები გამოიყურება,

9
00:00:25,390 --> 00:00:30,410
და როგორ მომხმარებლის, გამოცდილება ნამდვილად
არის, ინტერაქციაში ჩვენი ნახვა.

10
00:00:30,410 --> 00:00:32,535
>> მსგავსი HTML, CSS არის
არ არის პროგრამირების ენა.

11
00:00:32,535 --> 00:00:33,451
მას არ აქვს ლოგიკა.

12
00:00:33,451 --> 00:00:34,595
მას არ აქვს ცვლადი.

13
00:00:34,595 --> 00:00:38,890
მას არ აქვს რაიმე, რომ
შემოვა დაკავშირებული რამ, რომ C აკეთებს.

14
00:00:38,890 --> 00:00:40,150
ეს არის სტილის ენაზე.

15
00:00:40,150 --> 00:00:42,810
და მისი სინტაქსი საკმაოდ
მარტივი და უბრალოდ აღწერს

16
00:00:42,810 --> 00:00:46,240
როგორ ელემენტები
გვერდი აქვს გარკვეული HTML

17
00:00:46,240 --> 00:00:48,190
ელემენტები უნდა მოხდეს.

18
00:00:48,190 --> 00:00:51,170
ამ მიზნით, თუ არ
ჯერ უყურებს ჩვენი ვიდეო HTML,

19
00:00:51,170 --> 00:00:53,290
ან არ იციან
HTML, ზოგადად, თქვენ

20
00:00:53,290 --> 00:00:57,430
მოისურვეთ შევხედოთ, რომ
პირველ რიგში, იმიტომ, რომ ეს განხილვა CSS

21
00:00:57,430 --> 00:01:00,700
აპირებს დამოკიდებული
გარკვეული ცოდნა HTML.

22
00:01:00,700 --> 00:01:03,740
>> ასე რომ, აქ ნამდვილად
მარტივი CSS სტილების.

23
00:01:03,740 --> 00:01:06,480
მაშინაც კი, თუ თქვენ არასდროს
დაპროგრამებული CSS ადრე,

24
00:01:06,480 --> 00:01:10,624
მე დარწმუნებული ვარ, რომ თქვენ შეგიძლიათ გაერკვნენ
სწორედ ამ სტილების აკეთებს.

25
00:01:10,624 --> 00:01:11,290
რას აკეთებთ?

26
00:01:11,290 --> 00:01:15,470
ისე, მიმართა ორგანოს ჩვენი ვებ
გვერდი, ყველაფერი შორის სხეულის tags

27
00:01:15,470 --> 00:01:19,631
ჩვენს HTML, და იგი ადგენს
ფონის ფერი, რომ გვერდზე, ლურჯი.

28
00:01:19,631 --> 00:01:21,130
ისე, ეს ძალიან მარტივი სტილების.

29
00:01:21,130 --> 00:01:23,269
ეს, ფაქტობრივად, ძალიან ადამიანური
მეგობრული ენა, CSS.

30
00:01:23,269 --> 00:01:26,560
ასე რომ, თუ თქვენ არ გამოიყენება ეს ადრე,
თქვენ, ალბათ, ვერ ვხვდები, რა გააკეთა.

31
00:01:26,560 --> 00:01:30,140
რეალურად, თუ ჩვენ დატვირთული გვერდი, სადაც
ამ სტილების იყო ჩართული რატომღაც,

32
00:01:30,140 --> 00:01:36,240
ფონის ფერი ჩვენი გვერდი გვინდა
იყოს ლურჯი, და არა სტანდარტული თეთრი.

33
00:01:36,240 --> 00:01:37,670
>> ასე რომ, ჩვენ ავაშენოთ stylesheets?

34
00:01:37,670 --> 00:01:39,700
ისე, პირველ რიგში, ჩვენ უნდა
იდენტიფიცირება selector.

35
00:01:39,700 --> 00:01:42,970
ბოლო მაგალითად,
რომ არჩევის იყო ორგანო.

36
00:01:42,970 --> 00:01:45,050
მაშინ ჩვენ გვაქვს ღია
Curly გაუწიოს, და ჩვენ

37
00:01:45,050 --> 00:01:48,410
უნდა დაიწყოს განსაზღვრის
სტილების, რომ selector.

38
00:01:48,410 --> 00:01:51,800
შორის Curly braces, ჩვენ
უბრალოდ ჩამოთვლილია გასაღები ღირებულება წყვილი.

39
00:01:51,800 --> 00:01:56,205
წინა ღირებულება წყვილი იყო
ფონის ფერი ლურჯი მძიმით,

40
00:01:56,205 --> 00:01:57,830
მაგრამ ჩვენ შეგვიძლია გავაკეთოთ უფრო და უფრო ამ.

41
00:01:57,830 --> 00:02:02,330
თქვენ შეიძლება მრავალი რამ გამოყენების
რომ აქვს, რომ არჩევის ორგანო.

42
00:02:02,330 --> 00:02:05,960
თითოეული მათგანი არის გამოყოფილი
მძიმით, და მოვუწოდებთ თითოეულ მათგანს

43
00:02:05,960 --> 00:02:08,949
დეკლარაცია, გააჩნია CSS დეკლარაცია.

44
00:02:08,949 --> 00:02:12,410
როდესაც ჩვენ გავაკეთეთ ყველა სტილის ჩვენ
გვინდა მივმართოთ, რომ კონკრეტული tag,

45
00:02:12,410 --> 00:02:15,300
ჩვენ უბრალოდ უნდა შემოსილი
გაუწიოს, რათა დასრულდეს სტილების,

46
00:02:15,300 --> 00:02:19,640
და ჩვენ გავაკეთეთ განსაზღვრის სტილების
რომ კონკრეტული selector.

47
00:02:19,640 --> 00:02:21,341
>> რა საერთო CSS თვისებები?

48
00:02:21,341 --> 00:02:23,590
ისე, იქნებ გსურთ დააყენა
საზღვრის გარშემო რაღაც.

49
00:02:23,590 --> 00:02:26,850
ასე რომ, შეიძლება ითქვას, საზღვარი,
რომ იქნება თქვენი გასაღები,

50
00:02:26,850 --> 00:02:29,460
და შემდეგ თქვენი ღირებულებები იქნება,
რა სტილი, ფერი, და სიგანე

51
00:02:29,460 --> 00:02:30,209
გსურთ, რომ იყოს.

52
00:02:30,209 --> 00:02:33,530
ასე რომ, სტილი შეიძლება იყოს მყარი
ხაზი, dotted ხაზი, წყვეტილი ხაზით,

53
00:02:33,530 --> 00:02:36,020
ქედი ხაზი, რომელიც იქნება ტალღოვანი ონლაინ.

54
00:02:36,020 --> 00:02:38,790
იქნებ გვინდა, რომ ეს
ლურჯი ან შავი ან მწვანე.

55
00:02:38,790 --> 00:02:41,490
იქნებ მინდა რომ იყოს
1 ან 2 10 პიქსელი ფართო.

56
00:02:41,490 --> 00:02:43,254
თქვენ შეგიძლიათ მიუთითოთ ყველა იმ რამ.

57
00:02:43,254 --> 00:02:46,420
იქნებ გსურთ მითითებული ფონზე
ფერი თქვენი გვერდი კონკრეტული გზა.

58
00:02:46,420 --> 00:02:49,215
ჩვენ უკვე ვნახეთ, რომ, შექმნის
ფონზე ორგანო უნდა იყოს ლურჯი.

59
00:02:49,215 --> 00:02:52,080
>> ამის შემდეგ შეგიძლიათ გამოიყენოთ გასაღები სიტყვა,
ასე რომ, CSS აქვს გარკვეული ფერები

60
00:02:52,080 --> 00:02:55,950
რომ შენდება შევიდა, ლურჯი, მწვანე,
შავი, ძალიან მარტივი ფერები ვიცით.

61
00:02:55,950 --> 00:02:59,110
მაგრამ ასევე შეგიძლიათ მიუთითოთ ნებისმიერი
hex ფერი რომ გსურთ.

62
00:02:59,110 --> 00:03:05,190
შეგახსენებთ, რომ ფერები შეიძლება განსაზღვრული
კომპლექტი სამი hex ნომრები

63
00:03:05,190 --> 00:03:08,500
0-დან 255-rg და b,
წითელი, მწვანე, ლურჯი და კომპონენტი.

64
00:03:08,500 --> 00:03:10,590
ასე რომ, ჩვენ შეუძლია მიუთითოს
ნებისმიერი ფერი, ჩვენ გვინდა მიერ,

65
00:03:10,590 --> 00:03:15,520
ნაცვლად გამოყენებით ლურჯი ან მწვანე ან შავი,
გამოყენებით ფუნტი და შემდეგ ექვსი ციფრი ჰექს,

66
00:03:15,520 --> 00:03:18,310
და რომ მოგვცეს
ექვსი ციფრი ფერი.

67
00:03:18,310 --> 00:03:19,850
ასე რომ, ფონის ფერი.

68
00:03:19,850 --> 00:03:21,975
>> ჩვენ ასევე გვაქვს პლანზე
ფერი, რომელიც, როგორც წესი,

69
00:03:21,975 --> 00:03:24,140
იქნება ტექსტი თქვენი გვერდი.

70
00:03:24,140 --> 00:03:28,850
თქვენ შეიძლება ანალოგიურად გავაკეთოთ, რომ
გასაღები სიტყვა და ექვსი ციფრი hex.

71
00:03:28,850 --> 00:03:32,140
ასე, რომ თქვენ შეგიძლიათ მიუთითოთ ნებისმიერი ფერი
გსურთ ტექსტი თქვენი გვერდი

72
00:03:32,140 --> 00:03:36,370
წინააღმდეგ კონკრეტული
ფონის ფერი, ზემოთ.

73
00:03:36,370 --> 00:03:39,100
თქვენ ასევე შეგიძლიათ შეცვალოთ და გარიგება
შრიფტი, და გზა ტექსტი

74
00:03:39,100 --> 00:03:40,400
გაწეული გვერდზე.

75
00:03:40,400 --> 00:03:42,010
>> ასე რომ, თქვენ შეგიძლიათ შეცვალოთ თქვენი შრიფტის ზომა.

76
00:03:42,010 --> 00:03:46,320
თქვენ შეგიძლიათ გამოიყენოთ გასაღები სიტყვა, როგორიცაა ზედმეტი,
დამატებით მცირე, ან xx პატარა, ან საშუალო,

77
00:03:46,320 --> 00:03:47,660
დიდი, და ასე შემდეგ.

78
00:03:47,660 --> 00:03:50,750
თქვენ შეგიძლიათ გამოიყენოთ ფიქსირებული ქულა, 10
წერტილი, 12 ქულა, და ასე შემდეგ.

79
00:03:50,750 --> 00:03:55,850
თქვენ შეგიძლიათ გამოიყენოთ პროცენტული, 80%, 20%,
სადაც 100% არის ნაგულისხმები შრიფტის

80
00:03:55,850 --> 00:03:59,220
ზომა, რომელიც, როგორც წესი, აპირებს
იყოს რაღაც 11 ან 12 ქულა.

81
00:03:59,220 --> 00:04:01,659
ან შეგიძლიათ კი ბაზის ეს off
ყველაზე ბოლო შრიფტის ზომა.

82
00:04:01,659 --> 00:04:04,950
თუ უბრალოდ დაწერა რაღაც და თქვენ იცით,
რა გსურთ, რომ იყოს პატარა,

83
00:04:04,950 --> 00:04:08,241
მაგრამ თქვენ არ ვიცი ზუსტად რა ზომა
გვინდა, რომ იყოს, ასევე, შეგიძლიათ უბრალოდ ამბობენ,

84
00:04:08,241 --> 00:04:09,330
შრიფტის ზომა პატარა.

85
00:04:09,330 --> 00:04:14,344
და ეს ბაზის გამორთვა,
უბრალოდ ზემოთ, ეს შრიფტის ზომა.

86
00:04:14,344 --> 00:04:15,760
და შეგიძლიათ მიიღოთ მცირე ან დიდი.

87
00:04:15,760 --> 00:04:18,390
ასე რომ, არსებობს ბევრი სხვადასხვა
გზები, რათა მიუთითოთ შრიფტის ზომა.

88
00:04:18,390 --> 00:04:20,690
>> ასევე შეგიძლიათ მიუთითოთ რა
შრიფტის ოჯახი გსურთ.

89
00:04:20,690 --> 00:04:23,360
თუ თქვენ გაქვთ კონკრეტული
სახელი, არსებობს გზა CSS--

90
00:04:23,360 --> 00:04:27,270
ჩვენ არ ვაპირებთ ამაზე ლაპარაკი
აქ უნდა განსაზღვროს ძალიან კონკრეტული font

91
00:04:27,270 --> 00:04:28,980
და უთხარი, რომ თქვენს გვერდზე.

92
00:04:28,980 --> 00:04:30,620
თქვენ ასევე შეგიძლიათ გამოიყენოთ generic სახელები.

93
00:04:30,620 --> 00:04:33,540
არსებობს ბევრი ვებ უსაფრთხო შრიფტები
რომ წინასწარ განსაზღვრული CSS.

94
00:04:33,540 --> 00:04:36,352
და თუ თქვენ ხართ მომხმარებელს Microsoft
ოფისი ბოლო 20 წლის განმავლობაში,

95
00:04:36,352 --> 00:04:38,810
თქვენ ალბათ იცნობს
ბევრი ამ ვებ უსაფრთხო შრიფტები

96
00:04:38,810 --> 00:04:44,640
უკვე, Times New Roman, Arial,
კურიერი New, საქართველო, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
და ასე შემდეგ.

98
00:04:45,470 --> 00:04:47,170
ისინი ყველა განიხილება ვებ უსაფრთხო შრიფტები.

99
00:04:47,170 --> 00:04:49,169
და რეალურად, ნაწილი
მიზეზი, რომ აღმოჩნდა

100
00:04:49,169 --> 00:04:54,140
უნდა იქნას გამოყენებული, რათა web-- ყოველ გვერდზე
ჰქონდა ხელმისაწვდომობის ამ ნაგულისხმევი მითითებული შრიფტები

101
00:04:54,140 --> 00:04:58,480
სხვადასხვა serifs, და ეს ყველაფერი
შრიფტის პერსონალის ჩვენ არ მოხვდება,

102
00:04:58,480 --> 00:05:01,130
მაგრამ ეს, როგორც წესი,
ხელმისაწვდომი თქვენი CSS,

103
00:05:01,130 --> 00:05:04,029
მაშინაც კი, თუ თქვენ არ
წინააღმდეგ შემთხვევაში, განსაზღვროს შრიფტები.

104
00:05:04,029 --> 00:05:07,070
და ბოლოს, თქვენ შეგიძლიათ გასწორება თქვენი ტექსტი,
ნაცვლად იმისა, რომ იგი, ჩვეულებრივ, შეესაბამება

105
00:05:07,070 --> 00:05:09,310
მარცხენა, თქვენ შეიძლება
უერთდებიან მას უფლება,

106
00:05:09,310 --> 00:05:13,740
ან შეგიძლიათ გასწორება იგი ორიენტირებული, ან
გამართლებული ისე, რომ იგი მოხვდა ორივე მინდვრები.

107
00:05:13,740 --> 00:05:16,800
ასე რომ, ეს არის ყველა ვარიანტი შეგიძლიათ გამოიყენოთ
შეცვალოთ თქვენი ტექსტი ჰგავს,

108
00:05:16,800 --> 00:05:20,120
და როგორ ის ნაჩვენები თქვენი გვერდი.

109
00:05:20,120 --> 00:05:22,180
>> შენი სელექციონერები არ
უნდა იყოს tags მხოლოდ.

110
00:05:22,180 --> 00:05:25,539
ჩვენ ადრე დაინახა სხეულის ტეგით
არჩევის, და tag selector

111
00:05:25,539 --> 00:05:26,580
არ გამოიყურება, ისევე, როგორც, რომ.

112
00:05:26,580 --> 00:05:30,020
თქვენ ასახელებს tag, და მაშინ
განსაზღვროს სტილების, რომ აქვს.

113
00:05:30,020 --> 00:05:32,660
მაგრამ თქვენ შეგიძლიათ ამის გაკეთება რაღაც
ე.წ. ID selector.

114
00:05:32,660 --> 00:05:34,390
პირადობის არჩევის გამოიყურება საკმაოდ მსგავსია.

115
00:05:34,390 --> 00:05:38,100
მაგრამ შეამჩნია, რომ ახლა მე არ იყენებს
HTML tag, მე გამოყენებით, ამ შემთხვევაში,

116
00:05:38,100 --> 00:05:40,720
#unique, ან hash უნიკალური.

117
00:05:40,720 --> 00:05:42,930
თუ გავიხსენებთ ჩვენი
ვიდეო HTML, ჩვენ ვისაუბრეთ

118
00:05:42,930 --> 00:05:45,620
იმაზე, თუ როგორ tags შეიძლება ატრიბუტები.

119
00:05:45,620 --> 00:05:48,340
>> და კიდევ ერთი ატრიბუტი, რომელიც ეხება
საკმაოდ ბევრი ყველა HTML tags,

120
00:05:48,340 --> 00:05:51,440
მაგრამ ჩვენ არ გაიგო ამის შესახებ,
არის რაღაც მოუწოდა ID tag.

121
00:05:51,440 --> 00:05:55,250
ასე რომ, ამ კონკრეტულ CSS გვინდა
გამოიყენება მხოლოდ HTML tag, რომელსაც აქვს

122
00:05:55,250 --> 00:05:58,530
ძალიან კონკრეტული ID, რომ თქვენ დაასახელა.

123
00:05:58,530 --> 00:06:01,000
ასე რომ, თუ თქვენ გაქვთ სადღაც
თქვენი კოდი, სადღაც

124
00:06:01,000 --> 00:06:06,090
თქვენს HTML ფაილი, tag და თქვენ
დააკონკრეტა, როგორც ატრიბუტი რომ tag,

125
00:06:06,090 --> 00:06:09,060
ID ტოლია უნიკალური, ამ
კერძოდ სტილების

126
00:06:09,060 --> 00:06:15,030
აქ მხოლოდ ვრცელდება შორის
რომ tag პირადობის უნიკალური.

127
00:06:15,030 --> 00:06:17,180
>> ასევე შეგიძლიათ გააკეთოთ რაღაც
ე.წ. კლასის selector.

128
00:06:17,180 --> 00:06:19,920
ასე რომ, გარდა იმისა, რომ
ID ატრიბუტები, ასევე შეგიძლიათ

129
00:06:19,920 --> 00:06:23,130
რჩეულებში კლასის ატრიბუტი HTML tags.

130
00:06:23,130 --> 00:06:27,140
და როდესაც თქვენ იყენებთ კლასი ატრიბუტი,
ეს შეიძლება იყოს გამოყენებული სხვადასხვა tags.

131
00:06:27,140 --> 00:06:31,880
ასე რომ, თუ თქვენ გაქვთ რამდენიმე რამ, რომ
მსგავსია, იქნებ მინდა ვთქვა,

132
00:06:31,880 --> 00:06:35,890
ღია tag blah, blah, blah,
blah, კლასის შეადგენს სტუდენტებს.

133
00:06:35,890 --> 00:06:38,190
და შემდეგ ამ კონკრეტულ
სტილების მოემართებიან

134
00:06:38,190 --> 00:06:42,041
ყველა tag რომლის კლასის სტუდენტებს.

135
00:06:42,041 --> 00:06:44,290
ამ შემთხვევაში, ჩვენ გვინდა მითითებული
ფონის ფერი ყვითელი,

136
00:06:44,290 --> 00:06:46,706
და ჩვენ გვინდა მითითებული ბუნდოვანება, რომელიც
არის tag ჩვენ არ ვსაუბრობთ,

137
00:06:46,706 --> 00:06:52,510
მაგრამ მხოლოდ ეხება, რამდენად გამჭვირვალედ
არის რაღაც, 70%, ამ შემთხვევაში.

138
00:06:52,510 --> 00:06:54,430
>> არსებობს ორი ვარიანტი
წერილობით stylesheets.

139
00:06:54,430 --> 00:06:56,680
თქვენ შეგიძლიათ დაწეროთ მათ
პირდაპირ თქვენი HTML

140
00:06:56,680 --> 00:06:59,690
დებს stylesheets
შორის სტილის tags.

141
00:06:59,690 --> 00:07:03,850
და იმ სტილის tags წასვლა შიგნით
ხელმძღვანელი tags თქვენს ვებ გვერდზე.

142
00:07:03,850 --> 00:07:08,240
ალბათ უფრო სასურველი გზა უნდა გააკეთოს,
ეს არის დაწერა ცალკე .css ფაილი,

143
00:07:08,240 --> 00:07:12,360
და შემდეგ უკავშირებენ მას თქვენს
დოკუმენტის გამოყენებით ბმული tags.

144
00:07:12,360 --> 00:07:14,690
ლინკები tags, კიდევ ერთხელ, არის
განსხვავებული ბმულებს,

145
00:07:14,690 --> 00:07:16,760
თუ გახსოვთ, ჩვენი ვიდეო არის HTML.

146
00:07:16,760 --> 00:07:19,030
და ლინკი tags როგორ ჩვენ
გაიყვანოს ცალკე ფაილი.

147
00:07:19,030 --> 00:07:23,900
ეს ერთგვარი მოსწონს ეკვივალენტს
# include ვებ პროგრამირების.

148
00:07:23,900 --> 00:07:27,140
>> მოდით შევხედოთ table.HTML.

149
00:07:27,140 --> 00:07:29,380
თუ გავიხსენებთ ჩვენი
HTML ვიდეო, ვაჩვენე

150
00:07:29,380 --> 00:07:32,000
მაგალითად, ძალიან
მარტივი გამრავლება

151
00:07:32,000 --> 00:07:35,160
მაგიდა, რომელიც ჩანდა საკმაოდ
მახინჯი, და იქნებ იქ

152
00:07:35,160 --> 00:07:38,650
ისე, რომ იგი უკეთესად
CSS, რათა ის რეალურად გამოიყურება

153
00:07:38,650 --> 00:07:41,120
უფრო ჰგავს გამრავლება
მაგიდა, ან რამე

154
00:07:41,120 --> 00:07:43,730
არ არის მხოლოდ დავრჩებოდით ერთად
არ ფაქტობრივი გაყოფა

155
00:07:43,730 --> 00:07:45,532
შორის რიგები და სვეტები.

156
00:07:45,532 --> 00:07:47,490
მოდით უხელმძღვანელებს გადასცა
CS50 IDE, და შევხედოთ

157
00:07:47,490 --> 00:07:50,780
თუ როგორ CSS შეიძლება, ერთგვარი, tweak
რა ჩვენ დავიწყეთ ადრე,

158
00:07:50,780 --> 00:07:53,290
და ის, რომ რაღაც უკეთესი.

159
00:07:53,290 --> 00:07:55,650
>> ამიტომ ჩვენ CS50 IDE
ახლა, და თუ უცნობ,

160
00:07:55,650 --> 00:07:58,710
ჩვენ დახევის up ამ
მაგიდასთან რომ HTML გვერდი.

161
00:07:58,710 --> 00:08:01,090
Table.HTML ძირითადად
უბრალოდ განსაზღვრავს შინაარსი

162
00:08:01,090 --> 00:08:05,044
ერთი multiple-- ეს უნდა იყოს
ოთხი ოთხი გამრავლება მაგიდასთან.

163
00:08:05,044 --> 00:08:06,210
ეს საკმაოდ მარტივია.

164
00:08:06,210 --> 00:08:09,410
და ჩვენ ვფიქრობთ, რომ ეს იქნებოდა
გამოიყურება საკმაოდ კარგად ორგანიზებული.

165
00:08:09,410 --> 00:08:15,277
მაგრამ ფაქტია, რომ როდესაც ჩვენ წინასწარ ამ გვერდზე,
ჩვენ ვხედავთ, რომ ეს ერთგვარი მახინჯი, არა?

166
00:08:15,277 --> 00:08:16,860
ცხადია, ჩვენ გვაქვს რიგები და სვეტები აქ.

167
00:08:16,860 --> 00:08:18,350
არსებობს გარკვეული გამოყოფა.

168
00:08:18,350 --> 00:08:20,040
მაგრამ ეს არ არის მნიშვნელოვანი გამოყოფა.

169
00:08:20,040 --> 00:08:23,105
ჩვენ რეალურად არ მიღების
ძალიან ბევრი ინფორმაცია აქ.

170
00:08:23,105 --> 00:08:25,730
და არ არსებობს გამიჯვნა
რიგები და სვეტები თვალსაზრისით

171
00:08:25,730 --> 00:08:28,460
ჰორიზონტალური ან ვერტიკალური წესები.

172
00:08:28,460 --> 00:08:31,530
ჩვენ შეგვეძლო ალბათ, რომ ეს
გამოიყურება ცოტა უკეთესი.

173
00:08:31,530 --> 00:08:32,934
მოდით ცდილობენ.

174
00:08:32,934 --> 00:08:34,559
ამიტომ, მე ვაპირებ დახურვა tab აქ.

175
00:08:34,559 --> 00:08:37,434
და მე ვაპირებ დახუროს ჩემი table.HTML,
და მაქვს კიდევ ერთი ვერსია აქ

176
00:08:37,434 --> 00:08:39,490
მოუწოდა table2.HTML.

177
00:08:39,490 --> 00:08:40,655
ჩვენ გახსნა რომ.

178
00:08:40,655 --> 00:08:42,530
ორგანოს გვერდი
საკმაოდ ბევრი იგივე,

179
00:08:42,530 --> 00:08:44,238
მაგრამ მე შეიცვალა
ცოტა ზედა.

180
00:08:44,238 --> 00:08:47,132
და მე გადახვევა აქ.

181
00:08:47,132 --> 00:08:49,340
გაითვალისწინეთ, რომ ამ დროს, მე ვარ
გამოყენებით ჩადგმული სტილი tags.

182
00:08:49,340 --> 00:08:53,550
მე გახსნა სტილი აქვს, და მე ახლა
განსაზღვრის CSS სტილების უბრალოდ შიგნით

183
00:08:53,550 --> 00:08:54,310
იგი.

184
00:08:54,310 --> 00:08:56,310
მაქვს სტილების, რომელიც ამბობს, მაგიდა.

185
00:08:56,310 --> 00:08:58,170
ეს არის ჩემი tag selector.

186
00:08:58,170 --> 00:09:01,340
მე არ იყენებს dot ან hash,
რომელიც მე უნდა აკეთებს, თუ მე

187
00:09:01,340 --> 00:09:03,710
იყო გამოყენებით ID ან კლასის selector.

188
00:09:03,710 --> 00:09:06,190
მაქვს tag არჩევის აქ მაგიდასთან.

189
00:09:06,190 --> 00:09:10,090
ეს სტილი აპირებს
ვრცელდება ყოველ მაგიდაზე აქვს.

190
00:09:10,090 --> 00:09:14,950
როგორც ჩანს, მინდა, რომ ერთი
პიქსელის ფართო, მყარი ლურჯი საზღვრის,

191
00:09:14,950 --> 00:09:15,779
შიგნით ჩემი მაგიდა.

192
00:09:15,779 --> 00:09:18,320
ეს ჟღერს, როგორც ეს, ალბათ,
სიტუაციას, არა?

193
00:09:18,320 --> 00:09:20,320
ჩვენ ვაპირებთ, რომ
რამ გამოიყურება უკეთესი.

194
00:09:20,320 --> 00:09:21,190
ასე რომ, ეს ჯარიმა.

195
00:09:21,190 --> 00:09:23,540
სტილისტურად, მე უბრალოდ
ჩანერგილი ჩემი სტილების აქ.

196
00:09:23,540 --> 00:09:25,100
ეს, რა თქმა უნდა
მისაღები გზა ამის გაკეთება.

197
00:09:25,100 --> 00:09:26,391
ვნახოთ რა ამ ჰგავს.

198
00:09:26,391 --> 00:09:29,790
ასე რომ, მე დაბრუნდეს ქვემოთ აქ, და
მე იქნება წინასწარ ჩემი table2.HTML.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
ისე, რომ არ არის, რა მინდოდა,
მაგრამ ეს არის ზუსტად ის, რაც ჩვენ სთხოვა.

201
00:09:36,470 --> 00:09:39,530
ჩვენ ვთქვით, რომ ეს სტილი
აპირებს მიმართოს ჩვენს მაგიდასთან.

202
00:09:39,530 --> 00:09:43,810
ჩვენი მაგიდა ახლა ერთი pixel
ფართო, მყარი ლურჯი საზღვრის გარშემო.

203
00:09:43,810 --> 00:09:46,237
ჩვენ რეალურად არ მიღების
მაგიდასთან საკნები.

204
00:09:46,237 --> 00:09:47,570
ჩვენ უბრალოდ მიღების მაგიდასთან.

205
00:09:47,570 --> 00:09:49,310
ასე რომ, CSS მუშაობდა.

206
00:09:49,310 --> 00:09:51,890
ეს მიმართა
სტილების ჩვენს მაგიდასთან.

207
00:09:51,890 --> 00:09:53,981
მაგრამ არ საკმაოდ
ის, რაც ჩვენ გვინდოდა, რომ ეს უნდა გააკეთოს.

208
00:09:53,981 --> 00:09:55,730
როგორ შეგვიძლია ამის გაკეთება
ის, რაც ჩვენ გვინდა, რომ ეს?

209
00:09:55,730 --> 00:09:59,287
>> ისე, მოდით შევხედოთ კიდევ ერთი
მობილური ამ table3.HTML.

210
00:09:59,287 --> 00:10:00,870
ასე რომ, მე უბრალოდ აპირებს დახუროს ეს ჩანართი.

211
00:10:00,870 --> 00:10:03,890
მე ვაპირებ დაბრუნდეს მეტი აქ ჩემი
ფაილის ხე, და გახსენით table3.HTML.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
ერთხელ, ის აპირებს გამოიყურებოდეს ლამაზი
მსგავსი აქ დასაწყისში.

214
00:10:10,350 --> 00:10:14,460
მაგრამ შეამჩნია, ამ დროს, იმის მაგივრად,
სტილების ჩართული უფლება არსებობს,

215
00:10:14,460 --> 00:10:18,870
მე ვაპირებ ბმულზე
სტილების გამოყენებით რგოლი აქვს.

216
00:10:18,870 --> 00:10:22,480
ასე რომ, მე აშკარად აკავშირებს in a
სტილების მოუწოდა tables.CSS,

217
00:10:22,480 --> 00:10:25,090
და ეს კარგად ტოლია
სტილების უბრალოდ ნიშნავს, ასევე,

218
00:10:25,090 --> 00:10:28,645
რა არის ეს ფაილი შედარებით რა,
მე ვარ აკეთებს არის სტილების, რომ მე ვარ

219
00:10:28,645 --> 00:10:29,821
გამოყენებით ჩემი გვერდი.

220
00:10:29,821 --> 00:10:32,320
ასე რომ, თუ ნამდვილად გვინდა, რომ ის, რაც
მე ვაკეთებ ცენტრის აქ,

221
00:10:32,320 --> 00:10:35,010
მე უნდა წავიდეს ღია რომ
table.CSS ფაილის, ასევე.

222
00:10:35,010 --> 00:10:37,490
ასე რომ, ჩვენ დაბრუნდეს მეტი აქ
ისევ ჩვენი ფაილი ხე.

223
00:10:37,490 --> 00:10:38,660
არსებობს table.CSS.

224
00:10:38,660 --> 00:10:40,490
ჩვენ პოპ ის გახსნა.

225
00:10:40,490 --> 00:10:43,070
ახლა ჩვენ ვხედავთ ცოტა CSS.

226
00:10:43,070 --> 00:10:45,630
როგორც ჩანს, მე მაქვს რამდენიმე
რამ ხდება აქ.

227
00:10:45,630 --> 00:10:48,950
მე აშკარად უნდა დააყენოს ხუთ
პიქსელის ფართო, მყარი წითელი საზღვარი,

228
00:10:48,950 --> 00:10:50,287
ჩემს მაგიდასთან.

229
00:10:50,287 --> 00:10:52,870
ჩვენ უკვე ვიცით, რომ ის აპირებს
უბრალოდ წასვლა პერიმეტრზე.

230
00:10:52,870 --> 00:10:56,180
ჩვენ ვნახეთ, რომ table2.HTML.

231
00:10:56,180 --> 00:10:58,770
ყოველი ზედიზედ, მე
როგორც ჩანს, მინდა განსაზღვროს

232
00:10:58,770 --> 00:11:01,950
რომ ზედიზედ სიმაღლე 50 პიქსელი high.

233
00:11:01,950 --> 00:11:05,680
ასე რომ, ყოველ ზედიზედ, მახსოვს
ის, რაც tr tag აკეთებს,

234
00:11:05,680 --> 00:11:08,550
მე რაც 50 პიქსელი high.

235
00:11:08,550 --> 00:11:09,804
>> და ბოლოს, მე მაქვს ეს კომენტარი.

236
00:11:09,804 --> 00:11:11,470
და ეს არის, თუ როგორ ჩვენ კომენტარები CSS.

237
00:11:11,470 --> 00:11:16,174
ეს ძალიან ჰგავს, რათა ხელში ჩაიგდოს ბლოკი
კომენტარები სინტაქსი slash ვარსკვლავი.

238
00:11:16,174 --> 00:11:17,090
ყველა ტექსტი გსურთ.

239
00:11:17,090 --> 00:11:19,470
არ არსებობს ხაზი ხაზი, თუმცა CSS.

240
00:11:19,470 --> 00:11:23,400
მოკლე inline კომენტარი, ჩვენ გვაქვს
გამოიყენოს ეს კონკრეტული ფორმატი აქ.

241
00:11:23,400 --> 00:11:26,830
როგორც ჩანს, მე ვაკეთებ
ბევრი რამ ჩემი td tags.

242
00:11:26,830 --> 00:11:29,710
დამახსოვრება td tags, ან მაგიდასთან
მონაცემები, რომლებიც ნამდვილად არის

243
00:11:29,710 --> 00:11:32,210
სვეტები შიგნით
ჩვენი რიგები, და, როგორც ჩანს,

244
00:11:32,210 --> 00:11:35,090
თითოეული ნაჭერი მონაცემები
ჩემი მაგიდა, მინდა

245
00:11:35,090 --> 00:11:38,850
მითითებული ფონის ფერი
იყოს შავი, ფერი უნდა იყოს თეთრი,

246
00:11:38,850 --> 00:11:40,320
ფერი ტექსტის ფერი.

247
00:11:40,320 --> 00:11:42,360
ასე რომ, ეს იქნება
ტექსტის ჩემს გვერდზე.

248
00:11:42,360 --> 00:11:45,140
მინდა დიდი შრიფტის, 22
მეტიც, შრიფტი, და მე მინდა,

249
00:11:45,140 --> 00:11:47,001
ეს უნდა იყოს, შრიფტის ოჯახის, საქართველო.

250
00:11:47,001 --> 00:11:48,750
ასე რომ, მე არ ვაპირებ
ეგ შრიფტი.

251
00:11:48,750 --> 00:11:51,820
მე ვაპირებ დააკონკრეტა საქართველოში, რომელიც
ერთ-ერთი იმ ვებ უსაფრთხო შრიფტები

252
00:11:51,820 --> 00:11:53,830
რომ ჩვენ ვნახეთ ადრე.

253
00:11:53,830 --> 00:11:57,284
მინდა, რომ ჩემი იყოს ტექსტის მიუერთდა
ცენტრალიზებული, შუა ყუთი,

254
00:11:57,284 --> 00:11:59,450
მე არ მინდა, რომ ის უნდა დარჩეს
იდეებს ან მარჯვენა მიუერთდა.

255
00:11:59,450 --> 00:12:03,461
და მე მინდა, რომ ჩემი სვეტის სიგანე
50 პიქსელი ფართო ისევე.

256
00:12:03,461 --> 00:12:05,210
მოდით შევხედოთ
რა ამ ჰგავს,

257
00:12:05,210 --> 00:12:07,470
და თუ ეს შესაძლოა გაუმჯობესება.

258
00:12:07,470 --> 00:12:12,890
ამიტომ, მე ვაპირებ წასვლა table3.HTML, რომელიც
გავიხსენოთ, მოიცავს table.CSS როგორც ბმული,

259
00:12:12,890 --> 00:12:14,830
და ჩვენ წინასწარ ის.

260
00:12:14,830 --> 00:12:16,800
სწორედ ბევრი უკეთესი, სწორი?

261
00:12:16,800 --> 00:12:20,004
ეს არის რეალურად იწყება გამოიყურებოდეს
ბევრი უფრო ჰგავს გამრავლება მაგიდასთან.

262
00:12:20,004 --> 00:12:21,920
მაქვს, რომ წითელი საზღვრის
ჩემს მაგიდასთან, მაგრამ ახლა

263
00:12:21,920 --> 00:12:26,700
მე ასევე მითითებულია, რომ
სტრიქონებში 50 პიქსელი ფართო,

264
00:12:26,700 --> 00:12:30,220
ან ეს 50 პიქსელი tall-- საბაბი
ჩემთვის ყოველი სვეტი 50 პიქსელი ფართო.

265
00:12:30,220 --> 00:12:34,251
მონაცემები სვეტში, და მხოლოდ
მონაცემები, აქვს შავ ფონზე.

266
00:12:34,251 --> 00:12:36,000
ასე რომ, რატომ იმ
თეთრი ხაზების არსებობს.

267
00:12:36,000 --> 00:12:38,836
იმის გამო, რომ სივრცე
შორის ყველა იმ საკნებში,

268
00:12:38,836 --> 00:12:40,710
ეს არ არის საზღვრის
და თავისთავად, ეს მხოლოდ

269
00:12:40,710 --> 00:12:43,170
მე მხოლოდ შევსების
საკნები, რომელიც, ფაქტობრივად,

270
00:12:43,170 --> 00:12:46,310
ხდის საზღვრების მაგიდა, რომელიც
როგორც ჩანს, არსებობს ყველა ერთად,

271
00:12:46,310 --> 00:12:47,887
იყო მხოლოდ თხელი თეთრი ხაზები.

272
00:12:47,887 --> 00:12:48,720
ახლა ისინი ჩანს.

273
00:12:48,720 --> 00:12:50,380
ახლა ისინი პოპ off ეკრანზე.

274
00:12:50,380 --> 00:12:52,920
ასე რომ, ეს არის ძალიან მარტივი
სტილების, რომ მე გამოიყენება,

275
00:12:52,920 --> 00:12:56,850
და ახლა ჩემი მაგიდა გამოიყურება უფრო მოსწონს
ოთხი ოთხი გამრავლება მაგიდა,

276
00:12:56,850 --> 00:13:00,950
ნაცვლად მხოლოდ სახელებს სასადილო, სადაც
ყველაფერი ნათლად რიგები და სვეტები,

277
00:13:00,950 --> 00:13:03,717
მაგრამ არა სუპერ კარგად ორგანიზებული.

278
00:13:03,717 --> 00:13:06,800
ჩვენ რეალურად მხოლოდ scratching ზედაპირზე
რა შეგიძლიათ გააკეთოთ CSS აქ.

279
00:13:06,800 --> 00:13:10,330
საბედნიეროდ, CSS დოკუმენტაცია
არის საკმაოდ მარტივია.

280
00:13:10,330 --> 00:13:14,000
თქვენ გამოიყენოს მისი რამდენიმე
ატრიბუტები, საკმაოდ ხშირად.

281
00:13:14,000 --> 00:13:16,087
პირობა ჩვენ ვისაუბრეთ
ადრე ამ ვიდეო.

282
00:13:16,087 --> 00:13:18,170
არსებობს რამდენიმე, რომ თქვენ
ალბათ, არ გამოიყენონ ყველა.

283
00:13:18,170 --> 00:13:19,469
და ეს ჯარიმა, ძალიან.

284
00:13:19,469 --> 00:13:22,010
მაგრამ ვიცი, რომ იქ
ბევრი დოკუმენტაცია არსებობს.

285
00:13:22,010 --> 00:13:25,110
ასე რომ, თუ ჩვენ არ მოიცავს ყველაფერს,
თქვენ რა თქმა უნდა არ დაუტოვებიათ თქვენი საკუთარი.

286
00:13:25,110 --> 00:13:26,780
მაგრამ CSS მართლაც fun
ექსპერიმენტი.

287
00:13:26,780 --> 00:13:29,040
და მე მხარს ვუჭერ
ითამაშოს გარშემო თქვენი ვებ გვერდები,

288
00:13:29,040 --> 00:13:32,180
და თუ როგორ შეიძლება, რათა მათ
გამოიყურება და გრძნობს, რომ გაუმჯობესდეს შესახებ

289
00:13:32,180 --> 00:13:34,790
გამოცდილება გამოჩენის თქვენი გვერდი.

290
00:13:34,790 --> 00:13:35,710
მე Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
ეს არის CS50.

292
00:13:37,980 --> 00:13:40,151