1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [CSS]

2
00:00:02,000 --> 00:00:04,810
[ჯოზეფ Ong - ჰარვარდის უნივერსიტეტი]

3
00:00:04,810 --> 00:00:07,160
[ეს არის CS50. - CS50.TV]

4
00:00:07,160 --> 00:00:11,430
>> დღეს ჩვენ ვისაუბრებთ CSS ან კასკადური სტილების.

5
00:00:11,430 --> 00:00:14,330
>> ასე რომ, რა არის CSS?

6
00:00:14,330 --> 00:00:17,120
ისე, მოდით შესვენება ვადა CSS ქვემოთ შევიდა 2 ნაწილად:

7
00:00:17,120 --> 00:00:19,510
კასკადური და სტილების.

8
00:00:19,510 --> 00:00:23,900
კასკადური არის ცოტა უფრო რთული, და ეს რაღაც ჩვენ მოიცავს კიდევ ერთი ვიდეო.

9
00:00:23,900 --> 00:00:27,930
მაგრამ დამწყებთათვის, სტილების ძალიან მინიშნებები რა CSS აკეთებს.

10
00:00:27,930 --> 00:00:30,880
ეს აძლიერებს სტილის HTML of ვებ გვერდზე,

11
00:00:30,880 --> 00:00:33,720
შეცვლის თუ როგორ ვებ გვერდზე ესთეტიურად გამოიყურება.

12
00:00:33,720 --> 00:00:38,310
ეს იმას ნიშნავს, ყველაფერი შრიფტის ტექსტის განლაგების შინაარსი გვერდი

13
00:00:38,310 --> 00:00:43,800
სხვა მაგარი რამ, როგორიცაა მიღების კუთხეში ყუთი მომრგვალებული ან დასძინა ჩრდილში ტექსტი.

14
00:00:43,800 --> 00:00:48,230
თქვენ კი გააკეთოს გიჟები რამ, როგორიცაა რამ animate ეკრანზე.

15
00:00:48,230 --> 00:00:51,700
>> ასე რომ, როგორ ვიყენებთ CSS HTML-თან ერთად?

16
00:00:51,700 --> 00:00:53,620
ეს ცუდი, ლამაზი საიტი უბრალოდ დაწერა.

17
00:00:53,620 --> 00:00:57,290
თუ Rob იყო შევხედოთ ამ საიტზე სწორედ ახლა, ის ალბათ ამბობენ, რომ მსგავსი რამ,

18
00:00:57,290 --> 00:01:01,730
"Wow! ჩემი დანერგვა გამოიყურება საშინელი. იოსებ, თქვენ საშინელ დიზაინერი."

19
00:01:01,730 --> 00:01:05,110
"გამოყენება სტანდარტულ Times font? Helvetica არის ბევრად უკეთესი."

20
00:01:05,110 --> 00:01:09,600
>> ასე რომ, რაც შეიძლება მარტივი უნდა მიმართონ სტილის Rob სურს?

21
00:01:09,600 --> 00:01:13,530
ყველაზე თვალსაჩინო გზა უამრავი ადამიანი თავიდანვე წერს CSS

22
00:01:13,530 --> 00:01:17,470
იყო იმისათვის, რომ რაც ჩვენ მოვუწოდებთ სტილი დეკლარაციების უფლება ელემენტს თავად

23
00:01:17,470 --> 00:01:20,560
გამოყენებით HTML სტილი ატრიბუტი.

24
00:01:20,560 --> 00:01:26,420
სტილი დეკლარაციის უბრალოდ შედგება HTML ელემენტის CSS ქონების გვინდა შევცვალოთ

25
00:01:26,420 --> 00:01:32,140
მოჰყვა მსხვილი ნაწლავის მოჰყვა new ქონების ღირებულებას და მძიმით ბოლოს.

26
00:01:32,140 --> 00:01:36,600
მაგალითად, ვთქვათ Rob სურს შავი საზღვრის გარშემო მისი გაჩენა.

27
00:01:36,600 --> 00:01:40,040
ჩვენ პირველი დააყენა სტილი ატრიბუტი ჩართულია Rob-ს div აქ

28
00:01:40,040 --> 00:01:43,830
შემდეგ შიგნით ორმაგი შეთავაზებებს დააყენა CSS განცხადება:

29
00:01:43,830 --> 00:01:47,880
"საზღვრის: 1px მყარი შავი"

30
00:01:47,880 --> 00:01:52,480
1 pixel ეხება სიგანე საზღვარზე, მყარი ეხება სტილი საზღვარი,

31
00:01:52,480 --> 00:01:56,640
და ფერი დასასრულს განსაზღვრავს, თუ რა საზღვრის ნახვა ფერი არის.

32
00:01:56,640 --> 00:02:01,220
>> თუ ჩვენ გვინდა მრავალი სტილის on ელემენტის, წერენ ამ დეკლარაციების თანმიმდევრობით.

33
00:02:01,220 --> 00:02:05,650
მაგალითად, თუ Rob სურს მისი თავით ტექსტი Helvetica ერთად ცისფერ ფონზე

34
00:02:05,650 --> 00:02:09,270
და მეტი სივრცე გარშემო ტექსტი, ჩვენ შეგვიძლია ამის გაკეთება:

35
00:02:09,270 --> 00:02:19,800
style = "font-family: Helvetica; ფონზე-ფერი: ლურჯი; padding: 5px"

36
00:02:22,150 --> 00:02:28,010
ბოლო მძიმით ფაქტიურად სურვილისამებრ, მაგრამ ხალხი, როგორც წესი, შევინარჩუნოთ ის შემდეგ მდგრადობა გულისთვის.

37
00:02:28,010 --> 00:02:32,180
>> ჩვენ ამას გადარჩენა აეხსნა ზოგიერთი ქულერი და უფრო რთული სოციალურ მეცნიერებათა ცენტრის თვისებები

38
00:02:32,180 --> 00:02:34,140
კიდევ ერთი ვიდეო.

39
00:02:34,140 --> 00:02:38,780
თუ თქვენ გაქვთ რაიმე გათვალისწინებით, უბრალოდ Googling ეფექტი გსურთ მოჰყვა სოციალურ მეცნიერებათა ცენტრი

40
00:02:38,780 --> 00:02:41,590
ალბათ გაძლევთ საკმაოდ კარგი შედეგები.

41
00:02:41,590 --> 00:02:44,530
მაგარი ისაა, რომ CSS არის საკმაოდ ფართო,

42
00:02:44,530 --> 00:02:48,470
ასე რომ შანსი თუ რამე გსურთ - ფარგლებში მიზეზის გამო -

43
00:02:48,470 --> 00:02:51,350
სოციალურ მეცნიერებათა ცენტრის ალბათ ამის გაკეთება.

44
00:02:51,350 --> 00:02:54,750
ჩვენ მოვუწოდებთ ამ სახის სწავლება inline სტილის.

45
00:02:54,750 --> 00:02:59,030
ელემენტს სტილი, ასევე, შეესაბამება საწყისი ტეგით.

46
00:02:59,030 --> 00:03:01,770
>> იყიდება დაკარგულია ნამდვილად უნდა იყოს ორგანიზებული,

47
00:03:01,770 --> 00:03:05,800
თქვენ ალბათ დაიწყება მიღება ცოტა peeved, თუ როგორ ბინძურ ეს ყველაფერი გამოიყურება.

48
00:03:05,800 --> 00:03:09,810
წარმოიდგინეთ, თუ ეს უნდა გააკეთოს ყოველ ელემენტს გვერდზე,

49
00:03:09,810 --> 00:03:13,690
პლუს ახლა თქვენი HTML და CSS ყველა intermixed და cluttered.

50
00:03:13,690 --> 00:03:15,500
მთლიანი, არა?

51
00:03:15,500 --> 00:03:21,110
დაფიქსირება ამ, ადამიანები, საბოლოოდ დაიწყო catching შესახებ, რომ ჰყოფს მათ HTML markup

52
00:03:21,110 --> 00:03:26,370
მათი CSS სტილის გამოყენებით რაღაც მოუწოდა CSS სელექციონერები.

53
00:03:26,370 --> 00:03:31,780
სოციალურ მეცნიერებათა ცენტრის სელექციონერები გამოიყენება აირჩიოს ელემენტები, რომლის დეკლარაციების გამოიყენება.

54
00:03:31,780 --> 00:03:38,600
არჩევის ერთად ჩამონათვალი CSS დეკლარაციების ხშირად მოიხსენიებენ, როგორც CSS წესით.

55
00:03:38,600 --> 00:03:43,260
ეს წესები იქნება დააყენა შორის ღია და მჭიდრო HTML სტილი tags,

56
00:03:43,260 --> 00:03:46,120
ხშირად ხელმძღვანელი დოკუმენტი.

57
00:03:46,120 --> 00:03:49,000
>> ეს ბევრად უფრო ადვილად ვხედავ ერთად მაგალითად,

58
00:03:49,000 --> 00:03:53,000
მოდით დავიწყოთ შექმნით უბრალო CSS წესით.

59
00:03:53,000 --> 00:03:58,180
თავიდან, მოდით დააყენა სტილი tags სათაო მონაკვეთზე ჩვენი HTML.

60
00:03:58,180 --> 00:04:00,020
შემდეგი, არჩევის.

61
00:04:00,020 --> 00:04:03,490
დავიწყოთ off გამოყენებით ერთი მარტივი სელექციონერები, hash სიმბოლო,

62
00:04:03,490 --> 00:04:08,080
რომელიც ირჩევს HTML ელემენტს თავისი ID ატრიბუტი.

63
00:04:08,080 --> 00:04:11,850
ამ შემთხვევაში ჩვენ შერჩევა div რომელიც წარმოადგენს Rob-ის დანერგვა

64
00:04:11,850 --> 00:04:16,740
აკრეფით hash სიმბოლო მოჰყვა div პირადობის, ძარცვას.

65
00:04:16,740 --> 00:04:18,579
ახლა დეკლარაციებს.

66
00:04:18,579 --> 00:04:24,090
ჩვენ დავამატებთ ღია და მჭიდრო აფრთხილებს და გადაიტანოს ჩვენი ადრე inline დეკლარაციებს Rob-ს div

67
00:04:24,090 --> 00:04:26,880
შიგნით ამ აფრთხილებს, განახლების,

68
00:04:26,880 --> 00:04:34,160
და, ზემოთ, Rob-ს intro ჯერ კიდევ შავ საზღვრის გარშემო მინუსი ბინძურ inline უშნო.

69
00:04:34,160 --> 00:04:39,380
>> ახლა, რა, თუ გვინდოდა შესარჩევად h1 შიგნით Rob-ის intro?

70
00:04:39,380 --> 00:04:44,400
თქვენ ალბათ ფიქრობთ, "მოდით დააყენა ID მასზე და შემდეგ გადავა ჩვენი ადრინდელი სტილის."

71
00:04:44,400 --> 00:04:48,760
რომელიც მუშაობს, მაგრამ CSS აქვს სხვა გზები გაქირავების თქვენ აირჩიეთ ელემენტები

72
00:04:48,760 --> 00:04:53,490
გამოყენებით, რაც ჩვენ მოვუწოდებთ combinators ავურიოთ მარტივი სელექციონერები.

73
00:04:53,490 --> 00:04:57,740
მაგალითად, whitespace ხასიათი შეიძლება იქნას გამოყენებული როგორც combinator

74
00:04:57,740 --> 00:05:03,510
დაზუსტება ყველა ინსტანციის 1 არჩევის მცხოვრები შიგნით კიდევ ერთი მეთოდი.

75
00:05:03,510 --> 00:05:06,630
რომ ჟღერს ბევრად უფრო რთული, ვიდრე ის რეალურად არის.

76
00:05:06,630 --> 00:05:08,830
აი მაგალითად.

77
00:05:08,830 --> 00:05:13,900
ჩვენ აკრიფოთ # ძარცვა, დამატება სივრცეში, და შემდგომ იგი h1,

78
00:05:13,900 --> 00:05:18,840
კიდევ ერთი მარტივი არჩევის მოუწოდა tag არჩევის რომ შეარჩევს ტიპის ელემენტები

79
00:05:18,840 --> 00:05:21,200
ისევე როგორც divs ან მუხლს მოიცავს.

80
00:05:21,200 --> 00:05:26,140
სივრცეში აერთიანებს ჩვენი 2 მარტივი სელექციონერები, გამოყენების ყველა CSS დეკლარაციების

81
00:05:26,140 --> 00:05:32,560
და curly აფრთხილებს, რომ h1 tags მცხოვრები შიგნით ელემენტს საიტი "ძარცვა".

82
00:05:32,560 --> 00:05:38,290
უბრალოდ დარწმუნება იმაში, რომ მუშაობს, მე შეცვლის შრიფტის ფერი თეთრი, განახლების,

83
00:05:38,290 --> 00:05:42,090
და, აჰა, Rob-ს თავით არის თეთრი.

84
00:05:42,090 --> 00:05:47,510
>> ყველა ამ ნამუშევრის ღებულობენ აჩვენებს, რომ გამოყენებით წესების ნაცვლად inline სტილის

85
00:05:47,510 --> 00:05:50,510
ჩვენ შეიძლება კიდევ უფრო სუფთა კოდი.

86
00:05:50,510 --> 00:05:53,900
რეალურად, თუ ამ სტილის ბლოკი იწყება მისაღებად ცოტა დიდი,

87
00:05:53,900 --> 00:05:58,340
მე კი გაიყვანოს ამ სტილის შევიდა სხვადასხვა ფაილის საერთოდ.

88
00:05:58,340 --> 00:06:05,120
>> რომ მოიცავს ეს ახალი ფაილი, როგორც CSS ამ დოკუმენტში მე მხოლოდ გამოიყენოთ HTML-ის რგოლი აქვს.

89
00:06:05,120 --> 00:06:10,320
აქ მე ვეუბნებოდი მას, რომ მე დამაკავშირებელი გარე სტილის ფურცელი, rel ატრიბუტი,

90
00:06:10,320 --> 00:06:14,840
და მიუთითებს ფაილის გეზი, რომ ჩემს href ატრიბუტი.

91
00:06:14,840 --> 00:06:20,290
ახლა ჩემი საყვარელი markup და CSS ეწყობა ლამაზად სრულიად ცალკე ფაილი

92
00:06:20,290 --> 00:06:26,090
რომელიც თითქმის ყოველთვის გზა დიზაინერებს ურჩევნია მუშაობის HTML და CSS.

93
00:06:26,090 --> 00:06:30,180
>> იმ შემთხვევაში თუ თქვენ გაინტერესებთ, მარტივი სელექციონერები მოიცავს ID სელექციონერები

94
00:06:30,180 --> 00:06:33,100
და tag სელექციონერები მოსწონს პირობა ჩვენ უბრალოდ დაინახა

95
00:06:33,100 --> 00:06:38,610
ისევე როგორც კლასი სელექციონერები შერჩევის ელემენტების გარკვეული კლასის,

96
00:06:38,610 --> 00:06:44,000
ატრიბუტები სელექციონერები შერჩევის ელემენტების სხვა ატრიბუტები, როგორიცაა ივერიის "რადიო"

97
00:06:44,000 --> 00:06:49,180
რადიოს ღილაკს პორტები, და pseudoselectors მოსწონს hover და ფოკუსირება

98
00:06:49,180 --> 00:06:55,260
ამისთვის მიუთითებს სტილის როდესაც ურთიერთქმედების like mousing მეტი ელემენტს მოხდეს.

99
00:06:55,260 --> 00:06:58,950
>> საერთო combinators მოიცავს whitespace ყველა ბავშვები

100
00:06:58,950 --> 00:07:02,080
და მძიმეები ზღვარის სელექციონერები.

101
00:07:02,080 --> 00:07:06,370
სხვა შეგიძლიათ ექმნებათ მოიცავს arrow პირდაპირი ბავშვების,

102
00:07:06,370 --> 00:07:10,440
tilde ყველა ძმა, რომ მოხდეს შემდეგ ელემენტის,

103
00:07:10,440 --> 00:07:16,010
და პლუს ნიშანი, 1 ძმა, რომ მოდის მაშინვე ელემენტს.

104
00:07:16,010 --> 00:07:18,540
>> კომბინაციით ეს სელექციონერები და combinators,

105
00:07:18,540 --> 00:07:22,910
შეგიძლიათ გაფართოების სპექტრს სტილის შეგიძლიათ მისაღწევად მოცემულ ვებ გვერდზე

106
00:07:22,910 --> 00:07:25,050
და წერა სოციალურ მეცნიერებათა ცენტრის უფრო ეფექტურად.

107
00:07:25,050 --> 00:07:28,370
მხოლოდ რამდენიმე ხაზი CSS ხედავთ me ბეჭდვის აქ,

108
00:07:28,370 --> 00:07:34,460
მე შემიძლია სწრაფად გააკეთოს მსგავსი რამ გამოიყურება, როგორც რაღაც მსგავსი.

109
00:07:34,460 --> 00:07:37,080
>> მე ვარ იოსებ, და ეს არის CS50.

110
00:07:37,080 --> 00:07:39,260
>> [CS50.TV]

111
00:07:39,260 --> 00:07:40,780
>> Uh, სადაც დავიწყო?

112
00:07:40,780 --> 00:07:44,140
ნება მომეცით გავაკეთოთ, რომ გარეშე - [იცინის] Okay.

113
00:07:44,140 --> 00:07:47,300
დამატება - ნება მომეცით შეცვლის ფორმულირება.

114
00:07:50,580 --> 00:07:52,470
Ooh. ბოდიში.