1
00:00:00,000 --> 00:00:05,660
>> [音樂播放]

2
00:00:05,660 --> 00:00:08,740
>> 道格·勞埃德：那麼，讓我們多了一個
視頻談多了一個語言。

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和b，所述
紅色，綠色和藍色分量。

64
00:03:08,500 --> 00:03:10,590
因此，我們可以指定
我們希望通過任何顏色，

65
00:03:10,590 --> 00:03:15,520
代替使用藍色或綠色或黑色，
使用英鎊，然後六個內六角的數字，

66
00:03:15,520 --> 00:03:18,310
這將給予我們
六個數字顏色。

67
00:03:18,310 --> 00:03:19,850
所以這是背景色。

68
00:03:19,850 --> 00:03:21,975
>> 我們也有前台
顏色，這通常是

69
00:03:21,975 --> 00:03:24,140
要在您的網頁的文本。

70
00:03:24,140 --> 00:03:28,850
你可以同樣做到這一點
與關鍵字和六個兩位數的十六進制。

71
00:03:28,850 --> 00:03:32,140
所以，你可以指定任何顏色，你
想為你的網頁的文本

72
00:03:32,140 --> 00:03:36,370
針對一個特定的
背景色，同比增長上面。

73
00:03:36,370 --> 00:03:39,100
您還可以更改和處理
與字體，以及文本的方式

74
00:03:39,100 --> 00:03:40,400
呈現在網頁上。

75
00:03:40,400 --> 00:03:42,010
>> 所以，你可以改變您的字體大小。

76
00:03:42,010 --> 00:03:46,320
您可以使用關鍵詞，如額外的，
額外的小，或者XX小或中等，

77
00:03:46,320 --> 00:03:47,660
大，等等。

78
00:03:47,660 --> 00:03:50,750
您可以使用固定點，10
點，12點，依此類推。

79
00:03:50,750 --> 00:03:55,850
可以使用百分比，80％，20％，
其中100％是默認的字體

80
00:03:55,850 --> 00:03:59,220
大小，通常要
是像11或12分。

81
00:03:59,220 --> 00:04:01,659
或者，你甚至可以作為它的基礎關閉
的最新的字體大小。

82
00:04:01,659 --> 00:04:04,950
如果你只是寫東西，你知道的
你想要的是它要小一些，

83
00:04:04,950 --> 00:04:08,241
但你不知道到底是什麼大小你
希望它是，好了，你可以說，

84
00:04:08,241 --> 00:04:09,330
字體大小更小。

85
00:04:09,330 --> 00:04:14,344
它將基地起飛的，
剛起來上面，它的字體大小。

86
00:04:14,344 --> 00:04:15,760
你可以變得更小或更大。

87
00:04:15,760 --> 00:04:18,390
所以這是一個很大的不同
方法來指定字體大小。

88
00:04:18,390 --> 00:04:20,690
>> 您還可以指定哪些
你想字體系列。

89
00:04:20,690 --> 00:04:23,360
如果你有一個特別的
名字，還有在某種程度上CSS--

90
00:04:23,360 --> 00:04:27,270
我們不會談論它
這裡 - 定義一個非常特定的字體

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
如果你是微軟的用戶
辦公室在過去的20年中，

95
00:04:36,352 --> 00:04:38,810
你可能熟悉
很多這些Web安全字體

96
00:04:38,810 --> 00:04:44,640
目前，宋體​​，Arial字體，
宋體，格魯吉亞，宋體，宋體，

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
我們之前看到一個body標籤
選擇器和標籤選擇器

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
這裡將僅適用於間
該標籤具有獨特的ID。

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
而那些風格標籤去內
你的網頁的head標籤。

142
00:07:03,850 --> 00:07:08,240
該或許更優選的方式做
這是寫一個單獨的.css文件，

143
00:07:08,240 --> 00:07:12,360
然後將其鏈接到您的
使用link標籤記錄。

144
00:07:12,360 --> 00:07:14,690
鏈接標籤，再次，是
從超鏈接不同，

145
00:07:14,690 --> 00:07:16,760
如果從我們的視頻回憶的HTML。

146
00:07:16,760 --> 00:07:19,030
而link標籤是我們如何
拉在不同的文件。

147
00:07:19,030 --> 00:07:23,900
它有點像相當於
＃包括用於網頁編程的。

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
我有一個標籤選擇這裡 - 表。

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
它看起來像我做一個
很多事情在我的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--藉口
我 - 每列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