1
00:00:00,000 --> 00:00:05,660
>> [Музички]

2
00:00:05,660 --> 00:00:08,740
>> Даг LLOYD: Значи, да се земе уште еден
видео да се зборува за уште еден јазик.

3
00:00:08,740 --> 00:00:10,800
Овој пат ние ќе зборуваме за CSS.

4
00:00:10,800 --> 00:00:13,460
Значи, CSS, која е краток за
Cascading Style Sheets,

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
Па, се применува на телото на нашата веб-
страница, сè помеѓу таговите тело

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
>> Па, како да се изгради адаптери?

34
00:01:37,670 --> 00:01:39,700
Па прво, ние треба да
идентификуваат со менувачот.

35
00:01:39,700 --> 00:01:42,970
Во последниот пример,
кој беше селектор тело.

36
00:01:42,970 --> 00:01:45,050
Тогаш имаме отворена
кадрава голема заграда, и ние сме

37
00:01:45,050 --> 00:01:48,410
ќе започне дефинирање на
интерфејс за тоа копче.

38
00:01:48,410 --> 00:01:51,800
Помеѓу големи загради, ние
само да има листа на клучните вредност парови.

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
Кога ќе завршиш со стил сите ние на
сакате да аплицирате за таа одредена ознака,

45
00:02:12,410 --> 00:02:15,300
ние само имаат затворање кадрава
се подготвуваат да се стави крај на интерфејс,

46
00:02:15,300 --> 00:02:19,640
и ние сме направиле дефинирање на интерфејс
за тоа особено менувачот.

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
Па стилот може да биде солидна
линија, испрекината линија, испрекината линија,

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
Но исто така можете да внесувате
хексадецимален боја, кои би сакале.

62
00:02:59,110 --> 00:03:05,190
Потсетиме дека бои може да се идентификува
од страна на група од три хексадецимален број

63
00:03:05,190 --> 00:03:08,500
0-255, rg и б,
црвена, зелена и сина компонента.

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
И можете да го направите тоа на сличен начин
со клучен збор и или шест цифрен хексадецимален.

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
Или дури и да го базираме исклучување
од најновите големина на фонтот.

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
ние нема да зборуваме за тоа
here-- да се дефинира многу специфичен фонт

91
00:04:27,270 --> 00:04:28,980
и да го вградите во вашата страница.

92
00:04:28,980 --> 00:04:30,620
Можете да ги користите генерички имиња.

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,
Courier 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
>> Вашиот селектори не
мора да биде само ознаки.

110
00:05:22,180 --> 00:05:25,539
Ние претходно видел телото таг
селектор, а таг селектор

111
00:05:25,539 --> 00:05:26,580
изгледа исто како што.

112
00:05:26,580 --> 00:05:30,020
Можете името на ознаката, и тогаш ќе се
дефинира интерфејс за таа ознака.

113
00:05:30,020 --> 00:05:32,660
Но вие исто така може да се направи нешто
нарекува селектор проект.

114
00:05:32,660 --> 00:05:34,390
На менувачот проект изгледа прилично слични.

115
00:05:34,390 --> 00:05:38,100
Но се забележи, дека сега јас не сум со користење на
една HTML таг, јас сум со користење, во овој случај,

116
00:05:38,100 --> 00:05:40,720
#unique, или хаш уникатен.

117
00:05:40,720 --> 00:05:42,930
Ако се сеќавате од нашите
видео на HTML, ние разговаравме

118
00:05:42,930 --> 00:05:45,620
за тоа како тагови може да има атрибути.

119
00:05:45,620 --> 00:05:48,340
>> И еден атрибут, кој се однесува
до доста на сите HTML тагови,

120
00:05:48,340 --> 00:05:51,440
но ние не се зборува за тоа,
нешто што се нарекува таг проект.

121
00:05:51,440 --> 00:05:55,250
Па ова особено CSS би
се применуваат само на HTML таг, кој има

122
00:05:55,250 --> 00:05:58,530
многу специфичен проект, дека сте именуван.

123
00:05:58,530 --> 00:06:01,000
Значи, ако имате некаде
во вашиот код, некаде

124
00:06:01,000 --> 00:06:06,090
во HTML датотеката, ознака и ти
одредите како атрибут на таа ознака,

125
00:06:06,090 --> 00:06:09,060
Проект еднаква уникатен, овој
особено со дизајни

126
00:06:09,060 --> 00:06:15,030
тука ќе се однесува само помеѓу
таа ознака со проект на уникатен.

127
00:06:15,030 --> 00:06:17,180
>> Можете исто така да се направи нешто
наречен селектор класа.

128
00:06:17,180 --> 00:06:19,920
Така што во прилог на постоењето
Проект атрибути, можете исто така да

129
00:06:19,920 --> 00:06:23,130
додадете атрибут класа да HTML тагови.

130
00:06:23,130 --> 00:06:27,140
И кога користите атрибут класа,
тоа може да се примени на неколку тагови.

131
00:06:27,140 --> 00:06:31,880
Значи, ако имаш неколку работи кои
се слични, можеби сакате да се каже,

132
00:06:31,880 --> 00:06:35,890
отворена таг бла, бла, бла,
бла, класа еднаква студенти.

133
00:06:35,890 --> 00:06:38,190
А потоа овој конкретен
интерфејс ќе се применуваат

134
00:06:38,190 --> 00:06:42,041
до секој таг чија класа е студенти.

135
00:06:42,041 --> 00:06:44,290
Во овој случај, ние ќе се постави на
боја на позадината на жолта,

136
00:06:44,290 --> 00:06:46,706
и ние би го поставите непроѕирноста, која
е таг ние не се зборува за,

137
00:06:46,706 --> 00:06:52,510
туку само се занимава со тоа како транспарентни
нешто не е, до 70%, во овој случај.

138
00:06:52,510 --> 00:06:54,430
>> Има две опции за
пишување адаптери.

139
00:06:54,430 --> 00:06:56,680
Можете да ги пишувам
директно во вашата HTML

140
00:06:56,680 --> 00:06:59,690
со поставување на адаптери
помеѓу стил тагови.

141
00:06:59,690 --> 00:07:03,850
И оние кои се во стил-тагови оди во внатрешноста на
тагови главата на вашиот веб-страница.

142
00:07:03,850 --> 00:07:08,240
Можеби повеќе склопот на начин да се направи
е да се напише посебна .css датотека,

143
00:07:08,240 --> 00:07:12,360
а потоа ја врската во вашиот
документ користејќи линк ознаки.

144
00:07:12,360 --> 00:07:14,690
Линк ознаки, повторно, се
различен од хиперлинкови,

145
00:07:14,690 --> 00:07:16,760
ако се потсетиме на нашите видео на HTML.

146
00:07:16,760 --> 00:07:19,030
И линк како ние се користат тагови кои се
повлече во посебни документи.

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 ИРО
сега и ако непознат,

160
00:07:55,650 --> 00:07:58,710
ние ќе се повлече до овој
маса која 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
Па јас ќе одам да се затвори ова јазиче се овде.

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
Забележете дека овој пат, јас сум
користење на вграден тагови стил.

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
Тоа е мојот таг селектор.

186
00:08:58,170 --> 00:09:01,340
Јас не сум со користење на точка или хаш,
кој јас ќе се прави, ако јас

187
00:09:01,340 --> 00:09:03,710
бил со користење на проект или селектор класа.

188
00:09:03,710 --> 00:09:06,190
Имам таг селектор here-- табелата.

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
Нашата маса сега има еден пиксел
широк, солидна сината граница околу неа.

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
Па јас сум очигледно поврзување во
интерфејс наречен tables.CSS,

217
00:10:22,480 --> 00:10:25,090
и ова и е еднаква на
интерфејс само means-- добро,

218
00:10:25,090 --> 00:10:28,645
она што е оваа датотека однос на она што
Јас сум doing-- е интерфејс дека сум

219
00:10:28,645 --> 00:10:29,821
користење на мојата страница.

220
00:10:29,821 --> 00:10:32,320
Значи, ако јас навистина сакате да се види она што
Јас го правам со CSS тука,

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 пиксели висока.

233
00:11:01,950 --> 00:11:05,680
Значи за секој ред, се сеќавам
тоа е она што на ознаки tr прави,

234
00:11:05,680 --> 00:11:08,550
Јас сум што го прави 50 пиксели висока.

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
Тоа е многу сличен да ги искористи блок
коментари синтакса коса црта ѕвезда.

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
За краток РЕГИСТРАЦИЈА коментари, имаме
да го користите овој особено формат овде.

241
00:11:23,400 --> 00:11:26,830
Тоа изгледа како јас го правам на
многу работи во мојот TD таговите.

242
00:11:26,830 --> 00:11:29,710
Се сеќавам ТД тагови, или на маса
податоци, кои, навистина, се само

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-- изговор
me-- секоја колона е 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
Сега што се појави надвор од екранот.

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
Ние сме навистина само гребење по површината
на она што можете да направите со 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 е навистина забавно
да експериментира.

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
Јас сум Даг Лојд.

291
00:13:35,710 --> 00:13:37,980
Ова е CS50.

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