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 down შევიდა 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
ეს ნიშნავს, ყველაფერი შრიფტის of ტექსტი პოზიციონირების შინაარსი გვერდი

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

14
00:00:43,800 --> 00:00:48,230
თქვენ კი გააკეთოს Crazy რამ, როგორიცაა მიიღოს რამ 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
თუ რობ იყო შევხედოთ ამ საიტიდან ახლავე, ის მინდა ვთქვა, ალბათ რაღაც მსგავსი,

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

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

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

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
მოჰყვა მსხვილი ნაწლავის მოჰყვა ახალი ღირებულების ქონება და მძიმით დასასრულს.

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

27
00:01:36,600 --> 00:01:40,040
ჩვენ პირველი დააყენა სტილის ატრიბუტი ჩართულია რობ ს 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
>> თუ გვინდა მრავალჯერადი სტილის შესახებ ელემენტს, დაწერეთ ამ დეკლარაციების რიგით.

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

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

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

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

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

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

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

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
CSS ალბათ შეუძლია ამის გაკეთება.

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
Plus არის თქვენი 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 selectors.

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

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
შემდეგი, Selector.

61
00:04:00,020 --> 00:04:03,490
დავიწყოთ off გამოყენებით ერთი მარტივი selectors, 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
ჩვენ დაამატოთ ღია და მჭიდრო braces და გადაიტანოს ჩვენი ადრე inline დეკლარაციებს რობ ს div

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

68
00:04:26,880 --> 00:04:34,160
და, ზემოთ, რობ ს 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 ავურიოთ მარტივი selectors.

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

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

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 მარტივი selectors, გამოყენებისათვის ყველა CSS დეკლარაციების

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

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

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

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
შემიძლია კი გაიყვანოს ამ სტილის out შევიდა სხვადასხვა ფაილის საერთოდ.

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
ახლა ჩემი HTML მარკირებას და CSS ეწყობა ლამაზად სრულიად ცალკე ფაილი

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

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

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

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

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

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
და მძიმეები გამოირჩეოდნენ selectors.

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
>> კომბინაციით ამ selectors და combinators,

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

106
00:07:22,910 --> 00:07:25,050
და დაწეროთ CSS უფრო ეფექტურად.

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

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. უკაცრავად.