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
Можете да използвате ключови думи, като допълнително,
особено малък, или хх малка или средна,

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
с различни серифи и всичко това
шрифта неща, които няма да влязат в,

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
Но можете да направите нещо
наречено селектор ID.

114
00:05:32,660 --> 00:05:34,390
Един селектор ID изглежда доста сходни.

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
но ние не говорим за това,
е нещо, наречено маркер ID.

121
00:05:51,440 --> 00:05:55,250
Така че този конкретен CSS би
прилага само за HTML таг, който има

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 файл, етикет и вие
зададени като атрибут на този етикет,

125
00:06:06,090 --> 00:06:09,060
ID равнява уникален, този
специално стилове

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
Така в допълнение към като
ID атрибути, можете също

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
The може би още по-предпочитан начин да се направи
тя е да се напише отделен .css файл,

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

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

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 може, нещо, ощипвам
това, което ние започнахме с преди,

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
ние ще спра в тази
таблица, която 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
Аз не съм с точка или хашиш,
което аз ще се прави, ако I

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

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
Сега ние виждаме малко на СГО.

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
С всеки ред I
Очевидно искате да зададете

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
Запомни TD тагове, или маса
данни, които наистина са само

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