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