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, што з'яўляецца абрэвіятурай
Каскадныя табліцы стыляў,

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
Ідэнтыфікатар селектара выглядае даволі падобныя.

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
вельмі спецыфічная 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
, Магчыма, больш пераважны спосаб зрабіць
гэта напісаць асобны файл .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
Я не выкарыстоўваю кропку або хэш,
якія я буду рабіць, калі я

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
і гэта добра роўна
стыляў проста азначае: добра,

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
Падобна на тое, што я раблю
Шмат рэчаў у маіх тэгах тд.

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