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