1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,500
>> [音樂播放]

3
00:00:04,500 --> 00:00:10,099

4
00:00:10,099 --> 00:00:12,224
ALLISON BUCHHOLTZ-AU：那麼
我們基本上只是要

5
00:00:12,224 --> 00:00:14,629
給你一個破敗
CSS的，因為我們知道

6
00:00:14,629 --> 00:00:16,420
它不是蓋的
在所有的部分。

7
00:00:16,420 --> 00:00:20,090
我們真的要確保你
你們有這個工具在您的處置，

8
00:00:20,090 --> 00:00:24,790
因為它有使能力
您的網站看起來更漂亮。

9
00:00:24,790 --> 00:00:28,660
>> 如果你正在建設一個網站，然後
你可能希望把它漂亮。

10
00:00:28,660 --> 00:00:31,372
我的意思是，你不必，
但我建議它。 （笑）

11
00:00:31,372 --> 00:00:35,430
如果你希望用戶使用它，你可能
想讓它一點[聽不清]。

12
00:00:35,430 --> 00:00:39,130
所以我們要嘗試給你剛才
一些基本的工具和理解，

13
00:00:39,130 --> 00:00:42,340
所以，當你走出去，你
研究的事情有關CSS，

14
00:00:42,340 --> 00:00:45,902
它沒有完成胡言亂語，
像CSS有時候是。

15
00:00:45,902 --> 00:00:47,240
>> TOMAS賴默斯：是的。

16
00:00:47,240 --> 00:00:49,930
佳佳說，這非常好。

17
00:00:49,930 --> 00:00:53,250
所以我想的第一件事我們
應該是什麼是CSS開始？

18
00:00:53,250 --> 00:00:55,750
所以CSS是真棒。

19
00:00:55,750 --> 00:00:56,250
CSS--

20
00:00:56,250 --> 00:00:58,320
>> ALLISON BUCHHOLTZ-AU：那是
我們研討會的名稱。

21
00:00:58,320 --> 00:00:58,434
>> TOMAS賴默斯：是的。

22
00:00:58,434 --> 00:01:00,130
這真的很重要
你明白了吧。

23
00:01:00,130 --> 00:01:03,090
如果你只拿走1
的事情，那就是CSS，如果真棒。

24
00:01:03,090 --> 00:01:06,180
二是CSS代表
層疊樣式表。

25
00:01:06,180 --> 00:01:10,380
因此，在其核心，就是CSS
一個樣式表，這意味著

26
00:01:10,380 --> 00:01:13,200
它可以讓你風格的網頁。

27
00:01:13,200 --> 00:01:16,609
然後這意味著什麼，這是一個
的方式來添加樣式到你的網站。

28
00:01:16,609 --> 00:01:18,900
因此，通過造型，我們意味著一切
這不是structural--

29
00:01:18,900 --> 00:01:24,350
這樣的事情般的色彩，背景
圖像，邊框等，填充，

30
00:01:24,350 --> 00:01:25,040
利潤率。

31
00:01:25,040 --> 00:01:27,310
我們將談論什麼
所有這意味著在一個位。

32
00:01:27,310 --> 00:01:30,110
>> 因此，我們剛剛經歷進取，
打開這兩個在gedit中的。

33
00:01:30,110 --> 00:01:32,680
所以這是的index.html。

34
00:01:32,680 --> 00:01:34,800
這是的main.css。

35
00:01:34,800 --> 00:01:36,829
所以的main.css無關。

36
00:01:36,829 --> 00:01:38,412
ALLISON BUCHHOLTZ-AU：沒有風格至今。

37
00:01:38,412 --> 00:01:39,245
TOMAS賴默斯：無。

38
00:01:39,245 --> 00:01:42,577
正如你所看到的，這是
一個真正醜陋的網站。

39
00:01:42,577 --> 00:01:44,160
ALLISON BUCHHOLTZ-AU：這只是普通的。

40
00:01:44,160 --> 00:01:45,820
TOMAS賴默斯：是的。

41
00:01:45,820 --> 00:01:49,150
是的，這是不醜，
它只是最低限度的。

42
00:01:49,150 --> 00:01:53,430
然後我們在這裡有index.html的。

43
00:01:53,430 --> 00:01:55,729
等了快
HTML，佳佳的回顧一下，

44
00:01:55,729 --> 00:01:57,270
你只想談談網頁？

45
00:01:57,270 --> 00:01:58,395
>> ALLISON BUCHHOLTZ-AU：是的。

46
00:01:58,395 --> 00:02:01,100
所以，很顯然，我們有我們的HTML
標籤，它只是名字HTML文件。

47
00:02:01,100 --> 00:02:07,080
我們有我們的頭在這裡，與CSS
迷死人，which--如果你回去。

48
00:02:07,080 --> 00:02:07,720
哪裡是？

49
00:02:07,720 --> 00:02:09,136
>> TOMAS賴默斯：哦。

50
00:02:09,136 --> 00:02:10,301
是的，你可以看到。

51
00:02:10,301 --> 00:02:12,092
ALLISON BUCHHOLTZ-AU：
並注意頭

52
00:02:12,092 --> 00:02:14,120
這片頭部右側在這裡。

53
00:02:14,120 --> 00:02:17,130
然後“你好，世界！”是
我們剛才文

54
00:02:17,130 --> 00:02:19,620
顯示在網絡上
頁面，這is--回去。

55
00:02:19,620 --> 00:02:21,290
返回。

56
00:02:21,290 --> 00:02:24,287
這僅僅是在我們的身體
這裡 - 純文本。

57
00:02:24,287 --> 00:02:26,120
此外，一件事
請注意，如果你看這裡，

58
00:02:26,120 --> 00:02:29,410
托馬斯交換了這些
兩個來自我們的幻燈片。

59
00:02:29,410 --> 00:02:32,035
所以只要你擁有所有
這三種，你的罰款。

60
00:02:32,035 --> 00:02:34,044
他們可以在任何以他們想要的。

61
00:02:34,044 --> 00:02:39,368
什麼是最重要的就是這樣
你有每個這樣的三件事情。

62
00:02:39,368 --> 00:02:40,340
>> TOMAS賴默斯：酷。

63
00:02:40,340 --> 00:02:41,111
添加文檔類型？

64
00:02:41,111 --> 00:02:42,235
ALLISON BUCHHOLTZ-AU：是的。

65
00:02:42,235 --> 00:02:43,068
TOMAS賴默斯：是的。

66
00:02:43,068 --> 00:02:43,769
酷。

67
00:02:43,769 --> 00:02:46,102
ALLISON BUCHHOLTZ-AU：顯然，
我的麥克風不喜歡我。

68
00:02:46,102 --> 00:02:49,650
TOMAS賴默斯：哦，給大家一個秒只
而佳佳切換了她的麥克風。

69
00:02:49,650 --> 00:02:50,500
所以，是的。

70
00:02:50,500 --> 00:02:52,030
因此，我們有我們的主頁。

71
00:02:52,030 --> 00:02:53,890
這是一種無樣式。

72
00:02:53,890 --> 00:02:54,780
我們沒有多少。

73
00:02:54,780 --> 00:02:57,110
我們只需要基本的文字。

74
00:02:57,110 --> 00:02:59,470
我們有樣式表。

75
00:02:59,470 --> 00:03:00,220
我們擁有的稱號。

76
00:03:00,220 --> 00:03:04,020
因此，只要裸去骨
組件使一個網站。

77
00:03:04,020 --> 00:03:08,880
>> 因此，從那裡，讓我們
說說什麼是CSS

78
00:03:08,880 --> 00:03:11,270
和什麼樣子，所有這一切。

79
00:03:11,270 --> 00:03:12,047
因此，對於that--

80
00:03:12,047 --> 00:03:13,755
ALLISON BUCHHOLTZ-AU：
回到幻燈片。

81
00:03:13,755 --> 00:03:15,200
TOMAS賴默斯：回到幻燈片。

82
00:03:15,200 --> 00:03:17,240
和Allison可以接管。

83
00:03:17,240 --> 00:03:18,720
>> ALLISON BUCHHOLTZ-AU：嗚。

84
00:03:18,720 --> 00:03:19,220
好不好。

85
00:03:19,220 --> 00:03:22,360
因此，在你的CSS文件，
你將有

86
00:03:22,360 --> 00:03:25,010
很多這些東西叫做選擇。

87
00:03:25,010 --> 00:03:27,420
這只會是
依據你的CSS文件。

88
00:03:27,420 --> 00:03:29,480
它只是將是
很多很多的這些。

89
00:03:29,480 --> 00:03:30,780
如此選擇。

90
00:03:30,780 --> 00:03:32,649
這僅僅是一般的解剖結構。

91
00:03:32,649 --> 00:03:35,190
我們將通過
例子，因為如果你們永遠

92
00:03:35,190 --> 00:03:38,400
看著我的部分，我覺得
類似的事情在抽象

93
00:03:38,400 --> 00:03:39,400
沒有真正意義。

94
00:03:39,400 --> 00:03:41,110
它總是幫助，看例子。

95
00:03:41,110 --> 00:03:42,420
>> 所以，我們有一些選擇。

96
00:03:42,420 --> 00:03:49,120
這將是一些標識符
我們想要的樣式應用到。

97
00:03:49,120 --> 00:03:52,220
然後我們就可以有
設置的規則和價值觀。

98
00:03:52,220 --> 00:03:55,680
所以，選擇你可能會看到
可能是這樣的身體，

99
00:03:55,680 --> 00:04:00,262
或P段，
或標題，或什麼的，

100
00:04:00,262 --> 00:04:02,000
你希望你的HTML標籤是什麼。

101
00:04:02,000 --> 00:04:03,570
>> 因此，在這種情況下，我們有身體。

102
00:04:03,570 --> 00:04:06,985
我們有一些規則，
此對應

103
00:04:06,985 --> 00:04:09,610
以你的風格適用於。

104
00:04:09,610 --> 00:04:12,720
因此，在這種情況下，我們有
背景顏色和字體的重量。

105
00:04:12,720 --> 00:04:16,200
因此，這將改變
任何事物的背景

106
00:04:16,200 --> 00:04:19,640
在我們的HTML文件的任何body標籤。

107
00:04:19,640 --> 00:04:22,810
而且它要給
這本淡藍色值。

108
00:04:22,810 --> 00:04:24,820
>> 因此，這將令
背景淺藍色。

109
00:04:24,820 --> 00:04:28,660
然後在身體什麼是
將有一個字體粗細大膽。

110
00:04:28,660 --> 00:04:31,142
所以它只是要
大膽的所有文字。

111
00:04:31,142 --> 00:04:32,970
而這僅僅是一個選擇。

112
00:04:32,970 --> 00:04:34,680
但是你可以有非常多的了。

113
00:04:34,680 --> 00:04:38,730
正如我們將要展示
越到後來，一點點變成怎樣

114
00:04:38,730 --> 00:04:40,709
該作品和更多的例子在那裡。

115
00:04:40,709 --> 00:04:41,750
任何你想補充的嗎？

116
00:04:41,750 --> 00:04:42,499
>> TOMAS賴默斯：第

117
00:04:42,499 --> 00:04:43,500
佳佳得到了它。

118
00:04:43,500 --> 00:04:46,144
我們只是削減了一個
例如在這裡我們的例子網站。

119
00:04:46,144 --> 00:04:47,310
因此，讓我們真正需要這一點。

120
00:04:47,310 --> 00:04:48,620
這是完美的。

121
00:04:48,620 --> 00:04:54,460
所以我只是去複製和粘貼
這種權利到我們的main.css文件。

122
00:04:54,460 --> 00:04:56,530
而且我要保存它。

123
00:04:56,530 --> 00:04:59,190
然後，我們將運行它。

124
00:04:59,190 --> 00:05:01,600
所以側面說明，之一
最令人沮喪的事情

125
00:05:01,600 --> 00:05:04,490
是，如果你不保存文件，並
那麼你一樣，重新加載頁面，

126
00:05:04,490 --> 00:05:07,450
而像，為什麼不
變化發生？

127
00:05:07,450 --> 00:05:07,950
它發生。

128
00:05:07,950 --> 00:05:14,230
所以在這裡我們看到，我們取得了我們的
網站上的淡藍色背景

129
00:05:14,230 --> 00:05:16,560
有的黑體字。

130
00:05:16,560 --> 00:05:20,730
>> 我還要提到，如果你
男人對什麼問題

131
00:05:20,730 --> 00:05:23,622
我們正在做的，請隨時
免費阻止我們，問我們。

132
00:05:23,622 --> 00:05:25,330
我們完全願意
到現場的問題。

133
00:05:25,330 --> 00:05:27,951

134
00:05:27,951 --> 00:05:31,930
>> ALLISON BUCHHOLTZ-AU：顯然，與
CSS，一切都建立在本身。

135
00:05:31,930 --> 00:05:34,107
所以，如果有一件事不
道理現在，我們

136
00:05:34,107 --> 00:05:35,690
不想那以後陷入你失望。

137
00:05:35,690 --> 00:05:38,390

138
00:05:38,390 --> 00:05:41,930
>> TOMAS賴默斯：讓我們
種剖析這一點。

139
00:05:41,930 --> 00:05:44,210
所以，你想開始
這裡的選擇？

140
00:05:44,210 --> 00:05:45,979
>> ALLISON BUCHHOLTZ-AU：是的。

141
00:05:45,979 --> 00:05:48,270
正如我說之前，身體
只是我們在這裡選擇。

142
00:05:48,270 --> 00:05:50,950
所以，如果我們回到了我們的index--啊。

143
00:05:50,950 --> 00:05:53,245
>> TOMAS賴默斯：我剛才關閉。

144
00:05:53,245 --> 00:05:54,530
給我一秒鐘。

145
00:05:54,530 --> 00:05:58,286
所以文件，打開，index.html的。

146
00:05:58,286 --> 00:05:59,410
ALLISON BUCHHOLTZ-AU：酷。

147
00:05:59,410 --> 00:06:02,710
所以，如果你在這裡看到，我們
有這些body標籤，對不對？

148
00:06:02,710 --> 00:06:06,270
所以選擇只對應於
我們正在談論的標籤。

149
00:06:06,270 --> 00:06:07,670
所以身體就在這裡。

150
00:06:07,670 --> 00:06:10,315
所以，我們在說什麼是
一切 - 我們能回去嗎？

151
00:06:10,315 --> 00:06:12,065
我希望我可以只
像觸摸屏幕。

152
00:06:12,065 --> 00:06:14,410
它會是這麼涼爽。

153
00:06:14,410 --> 00:06:17,150
>> 所以，在這些事情
身體標記，這是我們看到的

154
00:06:17,150 --> 00:06:19,637
只是，像，文，
和主體的一般

155
00:06:19,637 --> 00:06:20,970
指，喜歡的背景。

156
00:06:20,970 --> 00:06:22,720
如果你想
改變背景，

157
00:06:22,720 --> 00:06:25,090
這將是在body標籤。

158
00:06:25,090 --> 00:06:27,120
只是有這些規則適用於他們。

159
00:06:27,120 --> 00:06:32,040
>> 所以，如果我們去
index.html的還有 - 實際上，

160
00:06:32,040 --> 00:06:33,840
我們可以有一些
身體的外？

161
00:06:33,840 --> 00:06:37,340
如果我們有，像，頁腳或
的東西，它並不適用於這一點。

162
00:06:37,340 --> 00:06:40,900
但在任何
這些body標籤是怎麼回事

163
00:06:40,900 --> 00:06:44,960
受到影響這身
選擇器，我們已經取得了。

164
00:06:44,960 --> 00:06:47,405
所以，如果你輸入
別的那裡 - 

165
00:06:47,405 --> 00:06:49,400
>> TOMAS賴默斯：讓我們開車的那家。

166
00:06:49,400 --> 00:06:55,330
所以，如果我們有一個div--所以這是
只是一個標籤，你可以有。

167
00:06:55,330 --> 00:06:56,350
我要關閉它。

168
00:06:56,350 --> 00:06:58,280
還是讓我們做這一個段落。

169
00:06:58,280 --> 00:07:01,430
所以，p表示段落。

170
00:07:01,430 --> 00:07:02,560
而該段內。

171
00:07:02,560 --> 00:07:05,650
然後我說，“這是文本”。

172
00:07:05,650 --> 00:07:06,369
酷。

173
00:07:06,369 --> 00:07:09,160
然後我做了這個規則適用於
一個段，而不是身體。

174
00:07:09,160 --> 00:07:12,390

175
00:07:12,390 --> 00:07:17,320
你會看到它是如何僅適用於
新成立的段落，權利，

176
00:07:17,320 --> 00:07:18,892
不是整個事情。

177
00:07:18,892 --> 00:07:20,090
這是否有意義？

178
00:07:20,090 --> 00:07:21,840
>> ALLISON BUCHHOLTZ-AU：
所以，這是所有身體，

179
00:07:21,840 --> 00:07:24,450
但現在我們只選擇
對應於該段。

180
00:07:24,450 --> 00:07:27,050
所以，我們只能大膽和藍色
對於此特定段

181
00:07:27,050 --> 00:07:30,760
因為這是唯一的事
這是p標籤內封閉。

182
00:07:30,760 --> 00:07:35,349
>> TOMAS賴默斯：這是否有意義排序
事情如何封裝其他的東西呢？

183
00:07:35,349 --> 00:07:38,140
ALLISON BUCHHOLTZ-AU：另外，剛
說一樣，最好的方法之一

184
00:07:38,140 --> 00:07:40,889
要真正獲得舒適與CSS
是剛剛做這樣的事情，

185
00:07:40,889 --> 00:07:42,050
只是嘗試一下。

186
00:07:42,050 --> 00:07:46,700
這是非常簡單的事情型
出，擊中刷新，看看會發生什麼。

187
00:07:46,700 --> 00:07:48,940
而且，與大多數的CS，
實驗往往能

188
00:07:48,940 --> 00:07:51,790
導致一個更好的
直觀的了解。

189
00:07:51,790 --> 00:07:54,432
甚至比我們剛剛，
喜歡，跟你說話。

190
00:07:54,432 --> 00:07:58,350
>> TOMAS賴默斯：絕對
100％同意這一點。

191
00:07:58,350 --> 00:08:02,430
所以，如果我們回到這一點，讓我們開始
解剖正是這兩個事情。

192
00:08:02,430 --> 00:08:04,550
因此，我們必須在這兩個規則。

193
00:08:04,550 --> 00:08:07,420
所以，第一個是背景顏色。

194
00:08:07,420 --> 00:08:10,590
你可以看到，我們已經設置
等於一個值，淡藍色。

195
00:08:10,590 --> 00:08:15,009
>> 因此，在CSS，CSS是排序
非常寬鬆的關於如何

196
00:08:15,009 --> 00:08:16,300
你可以定義顏色。

197
00:08:16,300 --> 00:08:17,800
所以，你可以通過名稱來定義它們。

198
00:08:17,800 --> 00:08:20,650
你也可以這樣做“紅”。

199
00:08:20,650 --> 00:08:25,270
然後如果我們回到這一點，
你會看到，背景是紅色的。

200
00:08:25,270 --> 00:08:29,040
您還可以得到really--我想你
可以得到相當的創意與此，

201
00:08:29,040 --> 00:08:29,540
不是嗎？

202
00:08:29,540 --> 00:08:31,170
>> ALLISON BUCHHOLTZ-AU：我
想你可以使用十六進制。

203
00:08:31,170 --> 00:08:31,250
不是嗎？

204
00:08:31,250 --> 00:08:32,083
>> TOMAS賴默斯：是的。

205
00:08:32,083 --> 00:08:32,969
所以，你可以使用十六進制。

206
00:08:32,969 --> 00:08:34,490
但我想的名字明智的。

207
00:08:34,490 --> 00:08:35,385
不是嗎？

208
00:08:35,385 --> 00:08:37,260
ALLISON BUCHHOLTZ-AU：
你可以做不少。

209
00:08:37,260 --> 00:08:43,350
幾乎最喜歡的顏色，你
可以像名稱 - 我認為鮭魚就是其中之一。

210
00:08:43,350 --> 00:08:45,322
>> TOMAS賴默斯：我們要去嘗試鮭魚。

211
00:08:45,322 --> 00:08:47,530
ALLISON BUCHHOLTZ-AU：我
認為黃綠色就在那裡。

212
00:08:47,530 --> 00:08:48,050
TOMAS賴默斯：是的。

213
00:08:48,050 --> 00:08:48,550
看到了嗎？

214
00:08:48,550 --> 00:08:50,080
這樣你就可以得到相當的創意。

215
00:08:50,080 --> 00:08:52,246
>> ALLISON BUCHHOLTZ-AU：你
能得到相當的創意。

216
00:08:52,246 --> 00:08:55,750
喜歡，如果你能想到的
顏色名稱，它可能是在那裡。

217
00:08:55,750 --> 00:08:57,840
如果你真的想細
細節，你可以去十六進制。

218
00:08:57,840 --> 00:08:58,673
>> TOMAS賴默斯：是的。

219
00:08:58,673 --> 00:08:59,390
所以十六進制。

220
00:08:59,390 --> 00:09:05,280
如果你們還記得這回
從舊PSET，圖像恢復，

221
00:09:05,280 --> 00:09:08,300
你們不得不處理
這些十六進制值。

222
00:09:08,300 --> 00:09:15,280
排序，並回顧一下那是什麼，
六角具有存儲在其中的三個值。

223
00:09:15,280 --> 00:09:17,250
所以，這兩種增量組。

224
00:09:17,250 --> 00:09:19,300
前兩個代表紅色值。

225
00:09:19,300 --> 00:09:22,420
第二個代表
綠色的價值。

226
00:09:22,420 --> 00:09:25,020
最後一個是藍色的？

227
00:09:25,020 --> 00:09:30,050
>> 所以FF恰好代表
一個十六進制的255。

228
00:09:30,050 --> 00:09:35,480
所以，你有255紅，255
綠色和0為藍色。

229
00:09:35,480 --> 00:09:37,670
和值的範圍為0至255。

230
00:09:37,670 --> 00:09:38,350
>> 聽眾：是的。

231
00:09:38,350 --> 00:09:41,472
所以基本上，我們可以搜索
互聯網為我們想要的任何顏色，

232
00:09:41,472 --> 00:09:43,912
並確定所述實際的已知
彩色光譜組合，

233
00:09:43,912 --> 00:09:45,130
然後我們可以把它？

234
00:09:45,130 --> 00:09:46,380
ALLISON BUCHHOLTZ-AU：沒錯。

235
00:09:46,380 --> 00:09:52,900
所以，你必須非常全面控制
在顏色你想在CSS。

236
00:09:52,900 --> 00:09:55,069
我們要說說
背景圖片以後呢？

237
00:09:55,069 --> 00:09:56,110
還是我們想要做的是什麼？

238
00:09:56,110 --> 00:09:56,240
>> TOMAS賴默斯：是的。

239
00:09:56,240 --> 00:09:57,010
當然可以。

240
00:09:57,010 --> 00:10:00,830
因此，首先，只是為了顯示
紅色和綠色是黃色的。

241
00:10:00,830 --> 00:10:03,120
如果你需要一些
幫助尋找，你

242
00:10:03,120 --> 00:10:05,575
可以谷歌的東西
像“拾色器”。

243
00:10:05,575 --> 00:10:07,200
ALLISON BUCHHOLTZ-AU：哦，它是那麼好。

244
00:10:07,200 --> 00:10:09,090
我愛拾色器。

245
00:10:09,090 --> 00:10:11,360
>> TOMAS賴默斯：colorpicker.com
就是一個​​很好的例子。

246
00:10:11,360 --> 00:10:14,580
在這裡，你會看到你有
一個完整的Photoshop般的顏色選擇器。

247
00:10:14,580 --> 00:10:14,920
>> ALLISON BUCHHOLTZ-AU：嗯。

248
00:10:14,920 --> 00:10:16,980
此外，很酷的事情是你
可以生成配色方案

249
00:10:16,980 --> 00:10:18,896
這樣你就不用，
像，衝突的色彩。

250
00:10:18,896 --> 00:10:22,780
TOMAS賴默斯：然後
這裡是這裡的十六進制值了。

251
00:10:22,780 --> 00:10:27,800
所以，你可以隨時在網上找到基本
地方得到的十六進制值。

252
00:10:27,800 --> 00:10:31,667
它不是那種只是，像我們
看到在數字世界的顏色。

253
00:10:31,667 --> 00:10:34,000
它更是我們上網
並找到我們想要的顏色，

254
00:10:34,000 --> 00:10:36,850
然後取數下降。

255
00:10:36,850 --> 00:10:39,590
因為它只是一個非常簡單的
的方式來引用CS的東西。

256
00:10:39,590 --> 00:10:40,350
>> ALLISON BUCHHOLTZ-AU：
然後還有also--

257
00:10:40,350 --> 00:10:41,630
我忘記了網站的確切名稱。

258
00:10:41,630 --> 00:10:43,838
但有絕對的，我
認為，從Adobe的東西

259
00:10:43,838 --> 00:10:48,350
生成的配色方案適合你，
這是真的很酷，因為你

260
00:10:48,350 --> 00:10:50,580
definitely--它有時
很難搞清楚，

261
00:10:50,580 --> 00:10:53,729
哦，如果我想用這個顏色，
什麼可能是另一種有用的

262
00:10:53,729 --> 00:10:56,395
在我的網站上的其他地方使用，
狀，使其漂亮和凝聚力​​。

263
00:10:56,395 --> 00:11:00,430

264
00:11:00,430 --> 00:11:04,260
>> TOMAS賴默斯：佳佳的談論
1由Adobe所謂的Kuler，我想。

265
00:11:04,260 --> 00:11:04,885
這是K-U-L-E-R上。

266
00:11:04,885 --> 00:11:06,259
ALLISON BUCHHOLTZ-AU：我認為是這樣。

267
00:11:06,259 --> 00:11:07,610
我敢肯定，這是一個。

268
00:11:07,610 --> 00:11:11,050
>> TOMAS賴默斯：我最喜歡的有
一向顏色方案設計師。

269
00:11:11,050 --> 00:11:13,998
>> ALLISON BUCHHOLTZ-AU：哦。

270
00:11:13,998 --> 00:11:16,010
>> TOMAS賴默斯：這是now--

271
00:11:16,010 --> 00:11:16,860
>> ALLISON BUCHHOLTZ-AU：
啊，這是美麗的。

272
00:11:16,860 --> 00:11:18,818
>> TOMAS賴默斯：你
基本上可以說，喜歡，

273
00:11:18,818 --> 00:11:21,700
我想彼此相鄰三種顏色。

274
00:11:21,700 --> 00:11:25,030
然後讓我們做一件好事。

275
00:11:25,030 --> 00:11:29,210
然後你就可以得到一個例子
什麼可能的樣子。

276
00:11:29,210 --> 00:11:32,470
然後，如果你在懸停的任何
其中，它給你的十六進制值。

277
00:11:32,470 --> 00:11:35,010
>> 因此，正如一個很好的方式開始
想著配色方案

278
00:11:35,010 --> 00:11:39,570
或者是什麼顏色的網站
可能會去得很好。

279
00:11:39,570 --> 00:11:45,655
因為這更是出奇地
如你想像的那麼容易上手。

280
00:11:45,655 --> 00:11:48,280
然後其他很酷的事情
我總是發現這個網站

281
00:11:48,280 --> 00:11:51,480
是，如果你打的例子，它會
展示一下一個例子網站

282
00:11:51,480 --> 00:11:54,800
可能看起來像使用的配色方案。

283
00:11:54,800 --> 00:11:56,270
反正。

284
00:11:56,270 --> 00:11:57,863
>> 回到實際的CSS。

285
00:11:57,863 --> 00:12:01,112
ALLISON BUCHHOLTZ-AU：但很明顯，我們
知道這些引用可能是有用的。

286
00:12:01,112 --> 00:12:03,195
TOMAS賴默斯：不，他們
肯定是有幫助的。

287
00:12:03,195 --> 00:12:04,720
所以，第二條規則，佳佳？

288
00:12:04,720 --> 00:12:05,844
>> ALLISON BUCHHOLTZ-AU：是的。

289
00:12:05,844 --> 00:12:08,280
第二條規則就是
對應我們的字體。

290
00:12:08,280 --> 00:12:11,520
所以，字體粗細僅僅是一種
of--所以重量會

291
00:12:11,520 --> 00:12:15,220
，如果你只想要一樣，
正常或像，更薄的字體，

292
00:12:15,220 --> 00:12:17,251
或在此情況下，象，粗體。

293
00:12:17,251 --> 00:12:17,750
我忘記了。

294
00:12:17,750 --> 00:12:21,557
有什麼，如果你想它 - 有
更薄的人比剛一樣，正常嗎？

295
00:12:21,557 --> 00:12:24,140
TOMAS賴默斯：我實際上並不
知道如果有一個薄的。

296
00:12:24,140 --> 00:12:24,680
ALLISON BUCHHOLTZ-AU：我忘了。

297
00:12:24,680 --> 00:12:26,300
所以，字體粗細，我們一般
只需使用大膽。

298
00:12:26,300 --> 00:12:29,010
如果你想獲得真正進入
它，我們要告訴你。

299
00:12:29,010 --> 00:12:34,317
W3Schools的有各種不同
事情你可以做的字體。

300
00:12:34,317 --> 00:12:36,900
但基本上，如果你想
要改變有關字體什麼，

301
00:12:36,900 --> 00:12:39,330
它總是將是，
像，字體什麼的。

302
00:12:39,330 --> 00:12:43,450
所以它會是這樣，font-family的，如果你
試圖改變實際類型。

303
00:12:43,450 --> 00:12:47,390
這將是字體的風格，如果你
想讓它像草書，

304
00:12:47,390 --> 00:12:49,710
或斜體，或諸如此類的東西。

305
00:12:49,710 --> 00:12:53,570
甚至字體顏色，如果
我們想改變這種狀況。

306
00:12:53,570 --> 00:12:55,621
>> TOMAS賴默斯：是啊。

307
00:12:55,621 --> 00:12:56,925
所以，你可以改變這種狀況。

308
00:12:56,925 --> 00:12:59,360
和排序只是為了
現在回顧一下，這樣你就可以

309
00:12:59,360 --> 00:13:01,400
看到我們選擇了這裡。

310
00:13:01,400 --> 00:13:03,000
我們有這些大括號。

311
00:13:03,000 --> 00:13:06,735
然後我們有規矩
用分號分隔。

312
00:13:06,735 --> 00:13:08,100
這是否有意義？

313
00:13:08,100 --> 00:13:09,130
是嗎？

314
00:13:09,130 --> 00:13:10,500
酷。

315
00:13:10,500 --> 00:13:13,200
因此，如果這是good--

316
00:13:13,200 --> 00:13:14,424
>> ALLISON BUCHHOLTZ-AU：返回。

317
00:13:14,424 --> 00:13:17,590
TOMAS賴默斯：讓我們來談談具體
什麼樣的選擇，我們有。

318
00:13:17,590 --> 00:13:19,790
“原因，現在我們已經
只是有點所示的標籤。

319
00:13:19,790 --> 00:13:21,696
但是你們可以看到它似是而非。

320
00:13:21,696 --> 00:13:23,570
說你有兩​​個段落
一個頁面，你

321
00:13:23,570 --> 00:13:26,087
希望能夠以風格
之一，但不是其他，

322
00:13:26,087 --> 00:13:29,170
你不就是想限制自己
不得不使用不同的實際的HTML

323
00:13:29,170 --> 00:13:33,410
標籤給他們不同的風格。

324
00:13:33,410 --> 00:13:35,995
>> 因此，我們有三個基本
類型選擇器。

325
00:13:35,995 --> 00:13:37,120
ALLISON BUCHHOLTZ-AU：是的。

326
00:13:37,120 --> 00:13:39,828
因此，我們有標籤，這是什麼
我們一直在談論現在。

327
00:13:39,828 --> 00:13:42,430
所以這有點像你的身體或p。

328
00:13:42,430 --> 00:13:46,280
然後我們有一流的，這是
當我們在CSS文件中定義它，

329
00:13:46,280 --> 00:13:49,907
它總是會被點，無論
你想成為你的類的名稱。

330
00:13:49,907 --> 00:13:51,490
這可以應用到多個的東西。

331
00:13:51,490 --> 00:13:54,610

332
00:13:54,610 --> 00:13:57,610
>> 說你有五段
其中兩個三個

333
00:13:57,610 --> 00:14:00,580
需要被樣式相同，
你會一類適用於它。

334
00:14:00,580 --> 00:14:03,040
而這僅僅是我們做的方式。

335
00:14:03,040 --> 00:14:05,600
我們會給你一個例子
其中，這實際上顯示了。

336
00:14:05,600 --> 00:14:11,030
但是，如果你有或許有些標籤
P，之後，你會寫，

337
00:14:11,030 --> 00:14:14,170
級等於什麼班
要應用它。

338
00:14:14,170 --> 00:14:19,280
我們希望所以，無論類選擇
適用於本具體段落，

339
00:14:19,280 --> 00:14:21,300
我們可以只寫這樣的。

340
00:14:21,300 --> 00:14:24,080
當然，我覺得一個例子
將使它更具體。

341
00:14:24,080 --> 00:14:27,270
>> 另一個我們有
是的id，我們表示

342
00:14:27,270 --> 00:14:29,707
用哈希或磅，或包括hashtag。

343
00:14:29,707 --> 00:14:30,790
TOMAS賴默斯：井號。

344
00:14:30,790 --> 00:14:32,430
ALLISON BUCHHOLTZ-AU：井號。

345
00:14:32,430 --> 00:14:34,550
這樣的作品，太。

346
00:14:34,550 --> 00:14:36,640
而這一次真的應該是唯一的。

347
00:14:36,640 --> 00:14:39,880
他們應該只適用於
有一件事您的網頁上。

348
00:14:39,880 --> 00:14:43,820
因此，無論這是一個特定的段落，
或在列表中的某些項目，或什麼的，

349
00:14:43,820 --> 00:14:45,090
這應該是唯一的。

350
00:14:45,090 --> 00:14:48,730
並以同樣的方式，我們只是
說，喜歡的class =“class1的類class2，”

351
00:14:48,730 --> 00:14:51,577
這可能僅僅是，無論我們有ID。

352
00:14:51,577 --> 00:14:52,410
TOMAS賴默斯：是的。

353
00:14:52,410 --> 00:14:54,330
因此，讓我們談談肯定
這裡的例子。

354
00:14:54,330 --> 00:14:58,170
而我只是去潛水
直回代碼。

355
00:14:58,170 --> 00:15:02,090
所以，讓我們來看看我們的HTML。

356
00:15:02,090 --> 00:15:03,960
因此，我們現在有一個段落。

357
00:15:03,960 --> 00:15:05,510
這是文字。

358
00:15:05,510 --> 00:15:09,151
我只是要修改
它。 “這是文本1.”

359
00:15:09,151 --> 00:15:11,150
然後我們要
有一個“這是文2”。

360
00:15:11,150 --> 00:15:12,525
>> ALLISON BUCHHOLTZ-AU：第二個。

361
00:15:12,525 --> 00:15:13,540
TOMAS賴默斯：是啊。

362
00:15:13,540 --> 00:15:16,810
所以，我們現在有“這是文2”吧？

363
00:15:16,810 --> 00:15:21,560
而且我們要看到，如果我們刷新
該頁面中，我們要怎麼找

364
00:15:21,560 --> 00:15:23,067
就是我們要find--

365
00:15:23,067 --> 00:15:24,150
ALLISON BUCHHOLTZ-AU：哦。

366
00:15:24,150 --> 00:15:24,983
TOMAS賴默斯：是的。

367
00:15:24,983 --> 00:15:27,570
我們要找到一個“這是
文本1“和”這是文本2“。

368
00:15:27,570 --> 00:15:28,650
>> ALLISON BUCHHOLTZ-AU：而
出可愛的黃色。

369
00:15:28,650 --> 00:15:31,066
>> TOMAS賴默斯：你會看到
我們的選擇，現在，

370
00:15:31,066 --> 00:15:34,940
它適用於P的，或者
段落，影響了他們兩個，

371
00:15:34,940 --> 00:15:38,700
因為他們兩人的見面
條件是他們倆一個p標籤。

372
00:15:38,700 --> 00:15:40,360
這使得總感覺。

373
00:15:40,360 --> 00:15:43,340
所以，問題是，好了，有什麼
如果我們想只有一次？

374
00:15:43,340 --> 00:15:46,350
所以，酷似佳佳說的話，
我們有兩個方法可以做到這一點。

375
00:15:46,350 --> 00:15:47,320
我將開始與ID。

376
00:15:47,320 --> 00:15:48,405
>> ALLISON BUCHHOLTZ-AU：
讓我們先從ID。

377
00:15:48,405 --> 00:15:50,405
>> TOMAS賴默斯：而且兩者
這些都是屬性。

378
00:15:50,405 --> 00:15:53,200
因此，在HTML存在的屬性。

379
00:15:53,200 --> 00:15:55,600
而且他們都是
您添加的東西

380
00:15:55,600 --> 00:15:58,840
這是標籤內
從標籤名稱分開。

381
00:15:58,840 --> 00:16:01,301
所以，你可以有多個屬性。

382
00:16:01,301 --> 00:16:01,800
是嗎？

383
00:16:01,800 --> 00:16:03,950
>> ALLISON BUCHHOLTZ-AU：我正要
從PSET 7說，從你的榜樣，

384
00:16:03,950 --> 00:16:06,650
如果你們嘗試調整
事情為中心，

385
00:16:06,650 --> 00:16:08,550
你可能已經使用
“文字對齊=中心”。

386
00:16:08,550 --> 00:16:10,550
你可能注意到了這一點
應該居中

387
00:16:10,550 --> 00:16:12,650
你的文字或您的導航欄。

388
00:16:12,650 --> 00:16:15,499
所以，這也只是一個屬性
你可能很熟悉。

389
00:16:15,499 --> 00:16:18,040
TOMAS賴默斯：有一堆
屬性，你會看到的。

390
00:16:18,040 --> 00:16:18,539
是啊。

391
00:16:18,539 --> 00:16:21,250
像很好的參考PSET 7。

392
00:16:21,250 --> 00:16:23,150
我們有ID。

393
00:16:23,150 --> 00:16:25,080
你也可以有
一流的，像這樣的事情。

394
00:16:25,080 --> 00:16:27,250
單個標籤可以有很多屬性。

395
00:16:27,250 --> 00:16:33,140
所以，開始的ID，讓我們假裝我們
想擁有一個id of--我不知道。

396
00:16:33,140 --> 00:16:35,140
我們會打電話給它特殊的，
因為這一次，我們是

397
00:16:35,140 --> 00:16:37,867
要大膽，和
下劃線，等等。

398
00:16:37,867 --> 00:16:39,950
ALLISON BUCHHOLTZ-AU：這是
要成為超級特殊。

399
00:16:39,950 --> 00:16:42,360
TOMAS賴默斯：所以這
1，我們有特殊的標識。

400
00:16:42,360 --> 00:16:48,140
這樣的方式來選擇，那麼，是
在的main.css，而不是有一個p標籤，

401
00:16:48,140 --> 00:16:51,500
你做#special，OK？

402
00:16:51,500 --> 00:16:55,538
而且，其選擇
id為特別的東西。

403
00:16:55,538 --> 00:16:57,295
這是否有意義給大家？

404
00:16:57,295 --> 00:16:57,920
聽眾：是的。

405
00:16:57,920 --> 00:16:59,110
TOMAS賴默斯：酷。

406
00:16:59,110 --> 00:17:04,440
所以現在，如果我們回去，
我們將see--哎呦。

407
00:17:04,440 --> 00:17:06,240
是啊。

408
00:17:06,240 --> 00:17:09,460
我們會看到，它只是選擇
一個id為特殊。

409
00:17:09,460 --> 00:17:10,622
是嗎？

410
00:17:10,622 --> 00:17:11,900
聽起來很酷。

411
00:17:11,900 --> 00:17:12,570
是。

412
00:17:12,570 --> 00:17:15,456
>> 聽眾：可以的東西有一個
這兩個類和一個id屬性？

413
00:17:15,456 --> 00:17:16,359
>> TOMAS賴默斯：是的。

414
00:17:16,359 --> 00:17:16,900
聽眾：OK。

415
00:17:16,900 --> 00:17:20,887
然後會發生什麼，如果你再給
它在CSS衝突的一些規則？

416
00:17:20,887 --> 00:17:21,970
TOMAS賴默斯：當然。

417
00:17:21,970 --> 00:17:23,940
我們肯定會
談論這一點。

418
00:17:23,940 --> 00:17:31,890
那麼究竟你得到什麼
時，你也可以上課。

419
00:17:31,890 --> 00:17:36,380
因此，讓我們假裝我有
三段我

420
00:17:36,380 --> 00:17:38,730
想樣式第一
2而不是三分之一。

421
00:17:38,730 --> 00:17:42,850
好了，你的第一個想法可能是，好了，我
可能只是給第二個的ID。

422
00:17:42,850 --> 00:17:45,590
但你不能，因為一個id，
酷似佳佳說的話，

423
00:17:45,590 --> 00:17:47,330
必須是唯一的。

424
00:17:47,330 --> 00:17:50,860
>> 因此，而不是一個id，你
可以用的是你可以使用一個類。

425
00:17:50,860 --> 00:17:57,880
和分類 - 是什麼讓
你做的基本上是說，

426
00:17:57,880 --> 00:17:59,610
這屬於作為一個組的一部分。

427
00:17:59,610 --> 00:18:02,410
在這種情況下，我們的基
被稱為特殊。

428
00:18:02,410 --> 00:18:06,500
而我們要做的就是再
我們要say--而不是一斤，

429
00:18:06,500 --> 00:18:08,070
我們要使用點。

430
00:18:08,070 --> 00:18:08,740
好不好？

431
00:18:08,740 --> 00:18:11,950
並注意英鎊和點
僅在CSS文件中存在，

432
00:18:11,950 --> 00:18:12,797
不是在HTML。

433
00:18:12,797 --> 00:18:13,880
ALLISON BUCHHOLTZ-AU：是的。

434
00:18:13,880 --> 00:18:15,185
重要的區別。

435
00:18:15,185 --> 00:18:17,510
>> TOMAS賴默斯：我有
有這麼多的鬥爭，

436
00:18:17,510 --> 00:18:23,990
因為我把散在HTML和
然後只覺得愚蠢的很長一段時間。

437
00:18:23,990 --> 00:18:27,470
看看它是如何選擇這兩個
那些與類？

438
00:18:27,470 --> 00:18:28,210
酷。

439
00:18:28,210 --> 00:18:29,950
>> 現在，事情可以有多個類。

440
00:18:29,950 --> 00:18:32,790
比方說，我想先做出
兩人有黃色背景

441
00:18:32,790 --> 00:18:36,770
和第二二有
藍色的字體顏色。

442
00:18:36,770 --> 00:18:37,270
好不好。

443
00:18:37,270 --> 00:18:39,735
我真的不知道為什麼我最好
要做到這一點，但我可以。

444
00:18:39,735 --> 00:18:42,401
>> ALLISON BUCHHOLTZ-AU：可能並非
推薦它為您的網站。

445
00:18:42,401 --> 00:18:43,880
但我們的目的，它會做。

446
00:18:43,880 --> 00:18:46,294
>> TOMAS賴默斯：這不是
一個很好的配色方案。

447
00:18:46,294 --> 00:18:49,210
ALLISON BUCHHOLTZ-AU：嗯，黃色
和藍色是我高中的色彩。

448
00:18:49,210 --> 00:18:50,947
我不知道，但。

449
00:18:50,947 --> 00:18:53,530
TOMAS賴默斯：佳佳的高
學校有一個偉大的配色方案。

450
00:18:53,530 --> 00:18:54,520
[笑]

451
00:18:54,520 --> 00:18:59,120
這樣的話我們可以稱之為這是
讓我們把this--所以我們特別

452
00:18:59,120 --> 00:19:00,030
我們有漂亮的。

453
00:19:00,030 --> 00:19:02,405
我建議，對於這一點，你使用
更多的描述性的名稱。

454
00:19:02,405 --> 00:19:05,820
ALLISON BUCHHOLTZ-AU：是的，我會
調用此，像，黃色或藍色。

455
00:19:05,820 --> 00:19:08,314
>> TOMAS賴默斯：我們不
實拍真正的網站，

456
00:19:08,314 --> 00:19:09,730
這就是為什麼我們不這樣做。

457
00:19:09,730 --> 00:19:11,521
但是，如果你真的
有一個真正的網站，你

458
00:19:11,521 --> 00:19:16,220
可能有，像，文頭，
文章內容，第一個字，

459
00:19:16,220 --> 00:19:21,920
這樣的事情，這讓
你要多得多的描述。

460
00:19:21,920 --> 00:19:23,550
這些都是真的就像變量。

461
00:19:23,550 --> 00:19:28,390
他們應該在某種程度上，其中被命名為
你可以，like--是的，因為這樣的。

462
00:19:28,390 --> 00:19:29,470
完美。

463
00:19:29,470 --> 00:19:30,480
>> 這樣的背景顏色。

464
00:19:30,480 --> 00:19:35,920
然後我們要say--於是
方法來改變顏色只是“顏色”。

465
00:19:35,920 --> 00:19:38,412
而且我們要讓它藍色。

466
00:19:38,412 --> 00:19:40,150
這很酷。

467
00:19:40,150 --> 00:19:42,640
所以，現在我們有
前兩個有特殊的。

468
00:19:42,640 --> 00:19:45,972
接下來人會
擁有“一流=很漂亮。”

469
00:19:45,972 --> 00:19:49,180
ALLISON BUCHHOLTZ-AU：然後你就會
要添加“漂亮”的中間的一個。

470
00:19:49,180 --> 00:19:49,971
TOMAS賴默斯：是啊。

471
00:19:49,971 --> 00:19:52,970
然後到中間的一個，
添加“漂亮”，會發生什麼

472
00:19:52,970 --> 00:19:56,880
就是你剛才有一個空間。

473
00:19:56,880 --> 00:19:59,800
因此，類屬性
是一個空格分隔的列表

474
00:19:59,800 --> 00:20:02,450
所有類
適用於該標記。

475
00:20:02,450 --> 00:20:02,959
好不好？

476
00:20:02,959 --> 00:20:05,750
它不是像這樣的是屬於
某種特殊的類被稱為

477
00:20:05,750 --> 00:20:07,180
“特殊，空間，漂亮。”

478
00:20:07,180 --> 00:20:10,870
它屬於兩個classes--
特別的漂亮。

479
00:20:10,870 --> 00:20:12,492
是嗎？

480
00:20:12,492 --> 00:20:14,360
酷。

481
00:20:14,360 --> 00:20:17,010
>> 然後如果我們看一下
在發生什麼，我們

482
00:20:17,010 --> 00:20:21,850
要看到，第一個具有
黃色背景，黑色文本。

483
00:20:21,850 --> 00:20:22,450
第二埃德蒙頓

484
00:20:22,450 --> 00:20:26,160
>> ALLISON BUCHHOLTZ-AU：--has大膽
黃色背景，藍色文本。

485
00:20:26,160 --> 00:20:29,330
而我們的最後一個只是有
我們分配給它的藍色文本。

486
00:20:29,330 --> 00:20:30,870
>> TOMAS賴默斯：酷？

487
00:20:30,870 --> 00:20:32,491
如何選擇工作？

488
00:20:32,491 --> 00:20:32,990
真棒。

489
00:20:32,990 --> 00:20:34,720
>> ALLISON BUCHHOLTZ-AU：難道我們要
說說現在的衝突呢？

490
00:20:34,720 --> 00:20:35,780
>> TOMAS賴默斯：所以是的。

491
00:20:35,780 --> 00:20:36,310
當然可以。

492
00:20:36,310 --> 00:20:38,380
如果你恰巧是什麼
有衝突吧？

493
00:20:38,380 --> 00:20:44,740
讓我們假設第一個
建立東西like--

494
00:20:44,740 --> 00:20:47,240
ALLISON BUCHHOLTZ-AU：也許
這一改變的背景？

495
00:20:47,240 --> 00:20:48,090
TOMAS賴默斯：是的。

496
00:20:48,090 --> 00:20:51,699
所以我們要做出“漂亮”
背景更改為鮭魚。

497
00:20:51,699 --> 00:20:54,740
ALLISON BUCHHOLTZ-AU：你只是用
所有偉大的顏色的今天，托馬斯。

498
00:20:54,740 --> 00:20:55,573
TOMAS賴默斯：是的。

499
00:20:55,573 --> 00:20:58,200
因為我發現我可以
用鮭魚作為一個真正的顏色。

500
00:20:58,200 --> 00:21:00,270
因此，我們只打算這樣做。

501
00:21:00,270 --> 00:21:01,770
我也覺得夕陽是一個真正的顏色。

502
00:21:01,770 --> 00:21:03,103
聽眾：日落是一個真正的顏色？

503
00:21:03,103 --> 00:21:04,572
ALLISON BUCHHOLTZ-AU：讓我們試試吧。

504
00:21:04,572 --> 00:21:07,735
TOMAS賴默斯：這個演示後，
只是因為如果它弄亂了，

505
00:21:07,735 --> 00:21:08,943
我不希望被調試。

506
00:21:08,943 --> 00:21:11,580
所以我們知道鮭魚是真正的顏色。

507
00:21:11,580 --> 00:21:15,626
因此，任何的猜測上
什麼事情發生呢？

508
00:21:15,626 --> 00:21:17,522
>> ALLISON BUCHHOLTZ-AU：你知道嗎？

509
00:21:17,522 --> 00:21:20,002
>> 觀眾：[聽不清]。

510
00:21:20,002 --> 00:21:20,920
>> TOMAS賴默斯：是的。

511
00:21:20,920 --> 00:21:22,150
所以，你得到它完全正確。

512
00:21:22,150 --> 00:21:24,930
基本上，它需要的
它被賦予最後一條規則。

513
00:21:24,930 --> 00:21:27,860
>> ALLISON BUCHHOLTZ-AU：所以這是
其中，級聯生效。

514
00:21:27,860 --> 00:21:31,080
>> TOMAS賴默斯：那麼還記得我們如何
有這樣的級聯樣式表？

515
00:21:31,080 --> 00:21:33,660
因此，通過這一點，我們種的意思
我們有一堆規則

516
00:21:33,660 --> 00:21:37,115
適用於彼此的頂部上，並
他們還可以互相覆蓋。

517
00:21:37,115 --> 00:21:39,380
>> ALLISON BUCHHOLTZ-AU：那麼
凡是在底部

518
00:21:39,380 --> 00:21:41,540
將覆蓋無論是在頂部。

519
00:21:41,540 --> 00:21:45,842
你可以說完全有規則
先否定的東西。

520
00:21:45,842 --> 00:21:48,300
這也是為什麼你想成為
當你的造型小心，

521
00:21:48,300 --> 00:21:51,465
這樣你就不會創建規則
你只是完全覆蓋。

522
00:21:51,465 --> 00:21:53,340
>> TOMAS賴默斯：或者，也許你
確實要覆蓋規則。

523
00:21:53,340 --> 00:21:53,920
>> ALLISON BUCHHOLTZ-AU：或者，也許你做的。

524
00:21:53,920 --> 00:21:54,300
是。

525
00:21:54,300 --> 00:21:57,175
>> TOMAS賴默斯：假設你有一個
這適用於大多數類的東西，

526
00:21:57,175 --> 00:22:01,220
但讓​​我們說你要改變
背景顏色為紅色，字體

527
00:22:01,220 --> 00:22:03,140
重量大膽的大多數
的事情，但為一體，

528
00:22:03,140 --> 00:22:06,098
您只需要在背景顏色
是紅色的，但你希望所有其他

529
00:22:06,098 --> 00:22:09,990
性能，你可以做一些事情
像“字體體重=正常，”

530
00:22:09,990 --> 00:22:12,760
這將隨後撤消了大膽的改變。

531
00:22:12,760 --> 00:22:14,480
是嗎？

532
00:22:14,480 --> 00:22:17,250
再次，最好的辦法，我認為
佳佳說，只是練習。

533
00:22:17,250 --> 00:22:18,080
>> ALLISON BUCHHOLTZ-AU：實驗。

534
00:22:18,080 --> 00:22:20,090
>> TOMAS賴默斯：練習，練習，
實踐和實驗。

535
00:22:20,090 --> 00:22:22,950
我知道有很多人認為這
CSS是只是很多猜測和檢查

536
00:22:22,950 --> 00:22:25,580
在一天結束時，其中如果
你想要做something--一樣，

537
00:22:25,580 --> 00:22:27,663
你有一個大概的了解，但
你仍然可能需要

538
00:22:27,663 --> 00:22:31,390
嘗試一下，以確保
你知道它是什麼樣子。

539
00:22:31,390 --> 00:22:34,482
>> 聽眾：當你申請
類，多於一個

540
00:22:34,482 --> 00:22:37,339
以同款
或部分，不是

541
00:22:37,339 --> 00:22:39,505
不管你可以什麼順序
它們輸入到引號？

542
00:22:39,505 --> 00:22:40,992
>> TOMAS賴默斯：沒有，一點都沒有。

543
00:22:40,992 --> 00:22:45,764
>> ALLISON BUCHHOLTZ-AU：重要的是
你的CSS樣式表中的順序。

544
00:22:45,764 --> 00:22:47,430
聽眾：你能重複一次這個問題？

545
00:22:47,430 --> 00:22:50,680
TOMAS賴默斯：哦。

546
00:22:50,680 --> 00:22:53,990
ALLISON BUCHHOLTZ-AU：在
一流的，當你給班

547
00:22:53,990 --> 00:22:56,964
某事的HTML，不
它無論他們以什麼順序？

548
00:22:56,964 --> 00:22:58,130
沒關係的順序。

549
00:22:58,130 --> 00:23:02,915
重要的是的順序
您在CSS類選擇，

550
00:23:02,915 --> 00:23:04,306
在您的樣式表。

551
00:23:04,306 --> 00:23:06,982
>> TOMAS賴默斯：聲音好？

552
00:23:06,982 --> 00:23:08,532
>> ALLISON BUCHHOLTZ-AU：可愛。

553
00:23:08,532 --> 00:23:11,539
>> TOMAS賴默斯：然後
我們將繼續to--

554
00:23:11,539 --> 00:23:13,330
ALLISON BUCHHOLTZ-AU：
我們有什麼下一個？

555
00:23:13,330 --> 00:23:14,245
我忘記了。

556
00:23:14,245 --> 00:23:16,087
哦，我們只是例子。

557
00:23:16,087 --> 00:23:17,295
但是，我們已經種做這些。

558
00:23:17,295 --> 00:23:18,990
我們已經做了上飛的例子。

559
00:23:18,990 --> 00:23:20,540
>> TOMAS賴默斯：我們去
很快結合選擇。

560
00:23:20,540 --> 00:23:22,790
>> ALLISON BUCHHOLTZ-AU：哦，
我們得到的組合選擇。

561
00:23:22,790 --> 00:23:25,260
TOMAS賴默斯：所以有的
例子之一是我們有

562
00:23:25,260 --> 00:23:29,630
＃dog--一斤，或包括hashtag，
或井號，或任何

563
00:23:29,630 --> 00:23:32,050
要呼叫that--尖銳。

564
00:23:32,050 --> 00:23:34,875
>> ALLISON BUCHHOLTZ-AU：夏普狗。

565
00:23:34,875 --> 00:23:36,470
>> TOMAS賴默斯：那你有.pets。

566
00:23:36,470 --> 00:23:39,059

567
00:23:39,059 --> 00:23:41,600
一些有狗的ID，
這裡只有一隻狗在頁面上。

568
00:23:41,600 --> 00:23:43,870
東西有一個id
貓，這裡只有一隻貓。

569
00:23:43,870 --> 00:23:45,665
有可能是在頁面上許多寵物。

570
00:23:45,665 --> 00:23:47,570
這就是為什麼我們給了類。

571
00:23:47,570 --> 00:23:48,740
你有P的一個例子。

572
00:23:48,740 --> 00:23:50,490
然後這樣的1
最後一個例子，這

573
00:23:50,490 --> 00:23:53,790
是我們還沒有談到，
就是當你把它們會發生什麼。

574
00:23:53,790 --> 00:23:54,580
所以p.pets。

575
00:23:54,580 --> 00:23:57,510

576
00:23:57,510 --> 00:24:02,950
>> 所以，讓我們回到
代碼和引進another--耶。

577
00:24:02,950 --> 00:24:04,290
所以回到這裡。

578
00:24:04,290 --> 00:24:04,850
>> ALLISON BUCHHOLTZ-AU：我
感覺這是really--

579
00:24:04,850 --> 00:24:08,105
像剛才翻翻例子
真的是要學習這種方式。

580
00:24:08,105 --> 00:24:09,360
所以，這就是我們正在做的。

581
00:24:09,360 --> 00:24:14,030
>> TOMAS賴默斯：讓我們假裝我們
只需要選擇文本2，對不對？

582
00:24:14,030 --> 00:24:16,530
所以，我們絕對不能
這樣做有一個id。

583
00:24:16,530 --> 00:24:19,620
好了，我們可以做到這一點與
標識，但它不具有一個id。

584
00:24:19,620 --> 00:24:22,490
我可以添加一個，但讓我們假裝
我不想增加一個

585
00:24:22,490 --> 00:24:24,910
或者它已經有別的東西。

586
00:24:24,910 --> 00:24:26,516
我不能這樣做這一點。

587
00:24:26,516 --> 00:24:28,870
標籤絕對不是唯一的，對不對？

588
00:24:28,870 --> 00:24:30,670
也不是類。

589
00:24:30,670 --> 00:24:32,314
但是你可以將這些東西。

590
00:24:32,314 --> 00:24:35,230
比方說，我們想要做的事
這僅適用於東西

591
00:24:35,230 --> 00:24:39,420
有類特殊
它們具有類漂亮。

592
00:24:39,420 --> 00:24:48,150
>> 所以，你所能做的就是在的main.css，
你可以說，讓我們先刪除這個。

593
00:24:48,150 --> 00:24:50,240
您可以將這些。

594
00:24:50,240 --> 00:24:51,430
所以你可以做。特別。

595
00:24:51,430 --> 00:24:52,110
沒有空間。

596
00:24:52,110 --> 00:24:54,770
只是.special.pretty。

597
00:24:54,770 --> 00:25:00,550
這是什麼意思是什麼
這既是特殊的和漂亮的。

598
00:25:00,550 --> 00:25:01,900
這是否有意義？

599
00:25:01,900 --> 00:25:04,190
如果我們去這裡，有什麼
你會看到

600
00:25:04,190 --> 00:25:09,734
是此規則僅適用於
第二個，其具有兩個。

601
00:25:09,734 --> 00:25:11,400
你可以這樣做了很多事情。

602
00:25:11,400 --> 00:25:13,270
您可以say--我們
假裝我只是想

603
00:25:13,270 --> 00:25:18,300
做事情有相當類
並且這也是一個段落標記。

604
00:25:18,300 --> 00:25:19,920
所以p.pretty。

605
00:25:19,920 --> 00:25:23,585
讓我們假設我有
一些漂亮的標籤體。

606
00:25:23,585 --> 00:25:25,850
好不好？

607
00:25:25,850 --> 00:25:28,490
我可以運行此，我
可以看到，這只是

608
00:25:28,490 --> 00:25:32,720
要應用到的東西這是
與類漂亮的段落。

609
00:25:32,720 --> 00:25:35,650
你可以將這些，
基本上，只要你想盡可能多的。

610
00:25:35,650 --> 00:25:38,580
所以，你可以把它們放在一起。

611
00:25:38,580 --> 00:25:39,604
這是否有意義？

612
00:25:39,604 --> 00:25:41,770
ALLISON BUCHHOLTZ-AU：那麼
種，這是更有益

613
00:25:41,770 --> 00:25:45,490
時，托馬斯在說更早，也許
你有一個非常複雜的網站，

614
00:25:45,490 --> 00:25:48,050
你已經有很多
這些規則寫的，

615
00:25:48,050 --> 00:25:51,170
而你只需要
從之前合併兩個。

616
00:25:51,170 --> 00:25:55,350
像而不是寫一個整體
新的選擇和改變它在那裡，

617
00:25:55,350 --> 00:25:58,592
你可以結合
他們在那裡重疊。

618
00:25:58,592 --> 00:26:00,670
>> TOMAS賴默斯：或者你
可能會發現out--有時

619
00:26:00,670 --> 00:26:04,290
有一類，
使得像字體的顏色為藍色，

620
00:26:04,290 --> 00:26:06,740
還有另外一個類，
使背景的藍色。

621
00:26:06,740 --> 00:26:07,840
而這是行不通的。

622
00:26:07,840 --> 00:26:10,924
所以，你寫一個特例，其中，
like--但是如果它有兩種，你在做什麼

623
00:26:10,924 --> 00:26:13,548
要做的事情就是你要
使這個本樹蔭藍色

624
00:26:13,548 --> 00:26:15,310
而這一次藍這另一個陰影。

625
00:26:15,310 --> 00:26:15,580
對不對？

626
00:26:15,580 --> 00:26:17,955
>> ALLISON BUCHHOLTZ-AU：好
對於那些類型的異常。

627
00:26:17,955 --> 00:26:21,220
TOMAS賴默斯：所以要
思考問題

628
00:26:21,220 --> 00:26:25,000
當你把他們可能會出現。

629
00:26:25,000 --> 00:26:27,020
酷。

630
00:26:27,020 --> 00:26:29,692
所以回到我們的介紹。

631
00:26:29,692 --> 00:26:31,400
ALLISON BUCHHOLTZ-AU：
我們快到了。

632
00:26:31,400 --> 00:26:34,022
TOMAS賴默斯：它
已停止連接。

633
00:26:34,022 --> 00:26:36,494
ALLISON BUCHHOLTZ-AU：哦，不。

634
00:26:36,494 --> 00:26:39,125
ALLISON BUCHHOLTZ-AU：在CS
辦公，上網下降。

635
00:26:39,125 --> 00:26:40,360
呵呵，諷刺。

636
00:26:40,360 --> 00:26:45,620
>> TOMAS賴默斯：那麼幸運的是，我們可以
目前沒有互聯網，我猜，

637
00:26:45,620 --> 00:26:47,380
因為我們有所有的幻燈片在這裡。

638
00:26:47,380 --> 00:26:49,304
因此，讓我們來談談
標籤的關係。

639
00:26:49,304 --> 00:26:50,470
ALLISON BUCHHOLTZ-AU：沒錯。

640
00:26:50,470 --> 00:26:52,660
種這麼正要
關閉什麼托馬斯說，

641
00:26:52,660 --> 00:26:54,180
這只是另一種方式來做到這一點。

642
00:26:54,180 --> 00:26:57,840
所以，我們有一些家長
選擇器，提供孩子選擇。

643
00:26:57,840 --> 00:27:02,815
因此，在這裡這個例子中，我們有一些
機身採用了類導航欄，類按鈕。

644
00:27:02,815 --> 00:27:03,315
啊。

645
00:27:03,315 --> 00:27:03,990
>> TOMAS賴默斯：哦，對不起。

646
00:27:03,990 --> 00:27:06,180
>> ALLISON BUCHHOLTZ-AU：而
基本上，這是什麼意思

647
00:27:06,180 --> 00:27:11,070
是選擇所有的孩子一樣，
所有這些種類的選擇，

648
00:27:11,070 --> 00:27:13,040
在這個家長選擇。

649
00:27:13,040 --> 00:27:16,004
而這些都是唯一的
它曾經打算申請。

650
00:27:16,004 --> 00:27:17,755
我不知道，如果你
有更好的辦法of--

651
00:27:17,755 --> 00:27:19,504
TOMAS賴默斯：所以我
猜的方式去思考

652
00:27:19,504 --> 00:27:22,440
關於這是怎麼才想起
排序，我們喜歡把它們放在一起。

653
00:27:22,440 --> 00:27:26,340
然後，這意味著一個元件
匹配所有這些。

654
00:27:26,340 --> 00:27:29,530
這是什麼意思是，我
要你的一切相匹配

655
00:27:29,530 --> 00:27:33,220
在some--我想
你找一個選擇。

656
00:27:33,220 --> 00:27:35,670
然後在這一點，我想
您匹配新的東西。

657
00:27:35,670 --> 00:27:36,170
對不對？

658
00:27:36,170 --> 00:27:40,900
因此，在CSS，這有點所有關於
能夠以匹配這些項目。

659
00:27:40,900 --> 00:27:43,050
你可以嘗試搭配
其他項目中的項目。

660
00:27:43,050 --> 00:27:46,510
>> 因此，讓我們真正做一個例子，
而且我們認為會澄清。

661
00:27:46,510 --> 00:27:53,090
因此，讓我們假裝我們有特殊的，
特別漂亮，等等。

662
00:27:53,090 --> 00:27:55,690
然後我們有一個鏈接，OK？

663
00:27:55,690 --> 00:27:59,780

664
00:27:59,780 --> 00:28:02,370
所以請記住，一個是鏈接。

665
00:28:02,370 --> 00:28:03,900
它不會去任何地方。

666
00:28:03,900 --> 00:28:11,500
我們要去給它
類的鏈接，我猜。

667
00:28:11,500 --> 00:28:13,335
讓我們給它的
分類 - 給我一個想法。

668
00:28:13,335 --> 00:28:14,460
ALLISON BUCHHOLTZ-AU：酷。

669
00:28:14,460 --> 00:28:16,420
TOMAS賴默斯：Coo--我們
去它的類漂亮。

670
00:28:16,420 --> 00:28:16,930
為什麼不呢？

671
00:28:16,930 --> 00:28:17,971
>> ALLISON BUCHHOLTZ-AU：OK。

672
00:28:17,971 --> 00:28:23,040
TOMAS賴默斯：所以
現在漂亮的東西

673
00:28:23,040 --> 00:28:26,000
要進行後台
藍色，背景鮭魚的顏色。

674
00:28:26,000 --> 00:28:27,969
這是有道理的。

675
00:28:27,969 --> 00:28:28,760
如果我們做this--

676
00:28:28,760 --> 00:28:29,620
>> ALLISON BUCHHOLTZ-AU：
你想添加文本

677
00:28:29,620 --> 00:28:31,078
這樣的超級鏈接實際上是顯示了？

678
00:28:31,078 --> 00:28:35,088
TOMAS賴默斯：那
將是一個良好的通話。

679
00:28:35,088 --> 00:28:37,921
ALLISON BUCHHOLTZ-AU：因為權
現在我們只是要去什麼也得不到。

680
00:28:37,921 --> 00:28:39,690
TOMAS賴默斯：所以這是一個鏈接。

681
00:28:39,690 --> 00:28:42,202
“這是一個鏈接。”

682
00:28:42,202 --> 00:28:45,820
哦，這是怎麼回事
是另一個鏈接。

683
00:28:45,820 --> 00:28:47,280
讓我們給它的類“酷”。

684
00:28:47,280 --> 00:28:50,295
你說得對。

685
00:28:50,295 --> 00:28:50,795
酷。

686
00:28:50,795 --> 00:28:53,590

687
00:28:53,590 --> 00:28:56,010
所以現在我們要抓住這個。

688
00:28:56,010 --> 00:28:57,269
我們要扔掉的。

689
00:28:57,269 --> 00:28:59,060
我們有一個在
特殊的標記，我們也

690
00:28:59,060 --> 00:29:01,150
將有一個在美麗的標籤。

691
00:29:01,150 --> 00:29:05,449
而現在我們打算
做的是我們要做出cool--

692
00:29:05,449 --> 00:29:06,490
什麼，我們希望它做什麼？

693
00:29:06,490 --> 00:29:10,347

694
00:29:10,347 --> 00:29:12,180
ALLISON BUCHHOLTZ-AU：
我們可以把它更大？

695
00:29:12,180 --> 00:29:13,800
TOMAS賴默斯：讓我們給它一個邊界。

696
00:29:13,800 --> 00:29:14,840
ALLISON BUCHHOLTZ-AU：我們可以邊框。

697
00:29:14,840 --> 00:29:15,673
TOMAS賴默斯：是的。

698
00:29:15,673 --> 00:29:18,560
所以，我們要做的事
狀，邊界is--和我們

699
00:29:18,560 --> 00:29:20,971
要解釋這一切都在第二。

700
00:29:20,971 --> 00:29:21,470
目前--

701
00:29:21,470 --> 00:29:24,592
>> ALLISON BUCHHOLTZ-AU：為盒模型。

702
00:29:24,592 --> 00:29:27,300
TOMAS賴默斯：但現在，我們
剛準備給它一個邊界。

703
00:29:27,300 --> 00:29:29,580
所以，這是什麼意思是你
要看到這些鏈接。

704
00:29:29,580 --> 00:29:32,788
而且你會看到他們有
這些一樣，醜陋的黑色邊框，這

705
00:29:32,788 --> 00:29:33,820
涼爽。

706
00:29:33,820 --> 00:29:34,500
>> ALLISON BUCHHOLTZ-AU：
我們的網站是如此漂亮。

707
00:29:34,500 --> 00:29:35,333
>> TOMAS賴默斯：是的。

708
00:29:35,333 --> 00:29:38,930
我們的網站是真棒。

709
00:29:38,930 --> 00:29:41,585
所以這兩個是環節，他們出現。

710
00:29:41,585 --> 00:29:44,160
現在，讓我們假裝我
只是想做到這一點

711
00:29:44,160 --> 00:29:50,072
如果不是內部的東西
其中有鮭魚的背景。

712
00:29:50,072 --> 00:29:52,280
所以請記住，這其中
有鮭魚的背景下，

713
00:29:52,280 --> 00:29:54,000
因為它是類相當的。

714
00:29:54,000 --> 00:29:59,777
>> 但我們想說的是，只有冷卻
這是在課堂上特殊的，不上課

715
00:29:59,777 --> 00:30:02,890
漂亮，應該有邊界。

716
00:30:02,890 --> 00:30:12,549
那麼，你能做的就是你
可以說，。特殊，空間，.cool。

717
00:30:12,549 --> 00:30:15,590
什麼是在做什麼，當你覺得
它，就是它基本上是說，

718
00:30:15,590 --> 00:30:19,530
OK，找我的一切
符合特殊。

719
00:30:19,530 --> 00:30:24,104
然後，這些標籤內，發現
我的一切，這很酷。

720
00:30:24,104 --> 00:30:27,270
ALLISON BUCHHOLTZ-AU：那麼另一種方式
這可能是很好的想一想，

721
00:30:27,270 --> 00:30:29,810
把它回C，是
就像範圍的想法。

722
00:30:29,810 --> 00:30:34,020
當你有這麼一些
選擇器，像那些

723
00:30:34,020 --> 00:30:38,460
我們一直在努力為在此之前，
你的整個網頁，你的所有的HTML

724
00:30:38,460 --> 00:30:40,180
是你的範圍之內，對不對？

725
00:30:40,180 --> 00:30:43,090
但是，當我們有這些
父子關係，

726
00:30:43,090 --> 00:30:47,130
這是因為，如果你縮小那裡
你正在尋找一個特定的地方，

727
00:30:47,130 --> 00:30:50,540
那樣的話，就像我們正在尋找中
特定的功能，而不是

728
00:30:50,540 --> 00:30:52,007
我們的整個文件。

729
00:30:52,007 --> 00:30:55,090
聽眾：所以考慮到這一點，將
這也無妨，如果我們有changed--

730
00:30:55,090 --> 00:30:56,423
ALLISON BUCHHOLTZ-AU：訂單？

731
00:30:56,423 --> 00:30:59,320
聽眾：--the類CSS
到.cool，空間，。特別？

732
00:30:59,320 --> 00:31:01,153
ALLISON BUCHHOLTZ-AU：
是的，因為那麼

733
00:31:01,153 --> 00:31:04,420
可以說，它的範圍要
一切有清涼，

734
00:31:04,420 --> 00:31:07,235
再看看has--
我的意思是，等，在這種情況下，

735
00:31:07,235 --> 00:31:08,860
我不認為這會改變它。

736
00:31:08,860 --> 00:31:10,318
>> TOMAS賴默斯：如果我們說了什麼？

737
00:31:10,318 --> 00:31:10,906
抱歉。

738
00:31:10,906 --> 00:31:12,660
>> ALLISON BUCHHOLTZ-AU：如果我們
範圍之冷卻，然後

739
00:31:12,660 --> 00:31:14,550
查找出來的東西特別，
這將是相同的，其實。

740
00:31:14,550 --> 00:31:16,260
>> TOMAS賴默斯：所以它不會是。

741
00:31:16,260 --> 00:31:16,590
>> ALLISON BUCHHOLTZ-AU：它不會？

742
00:31:16,590 --> 00:31:17,590
哦，哦。

743
00:31:17,590 --> 00:31:18,090
我錯了。

744
00:31:18,090 --> 00:31:21,480
>> TOMAS賴默斯：那麼原因
這是different--共同mistake--

745
00:31:21,480 --> 00:31:27,140
這是現在唯一
鏈接有很酷，不是嗎？

746
00:31:27,140 --> 00:31:32,176
我想我的問題給你們的，
此頁面上有什麼是匹配.cool？

747
00:31:32,176 --> 00:31:35,984

748
00:31:35,984 --> 00:31:38,340
有兩個標籤在這裡，對不對？

749
00:31:38,340 --> 00:31:39,770
這是這一個，這一個。

750
00:31:39,770 --> 00:31:40,590
兩者搭配酷。

751
00:31:40,590 --> 00:31:42,200
沒有別的呢。

752
00:31:42,200 --> 00:31:46,460
所以，如果你說，.cool，空間，
。特別，你會說什麼的，

753
00:31:46,460 --> 00:31:48,824
這些標籤中，是什麼特別之處？

754
00:31:48,824 --> 00:31:49,865
ALLISON BUCHHOLTZ-AU：嗯。

755
00:31:49,865 --> 00:31:51,800
這就是它 - 正確的。

756
00:31:51,800 --> 00:31:52,310
因為它像剛才的東西在這裡。

757
00:31:52,310 --> 00:31:53,310
>> TOMAS賴默斯：所以它會選擇什麼。

758
00:31:53,310 --> 00:31:56,530
>> ALLISON BUCHHOLTZ-AU：而與
特別的，我們在這裡這些標籤內。

759
00:31:56,530 --> 00:31:57,971
>> TOMAS賴默斯：那些和那些。

760
00:31:57,971 --> 00:31:58,512
聽眾：OK。

761
00:31:58,512 --> 00:31:58,920
因此，從正向這些標籤斜線？

762
00:31:58,920 --> 00:31:59,740
>> TOMAS賴默斯：是的。

763
00:31:59,740 --> 00:32:01,150
這是否有意義？

764
00:32:01,150 --> 00:32:03,685
如何它基本上
努力縮小範圍。

765
00:32:03,685 --> 00:32:04,810
ALLISON BUCHHOLTZ-AU：是的。

766
00:32:04,810 --> 00:32:06,870
我認為這是可能的
最簡單的方法去想它。

767
00:32:06,870 --> 00:32:09,270
>> TOMAS賴默斯：所以我們發現這一點，
我們發現這兩種特殊的匹配。

768
00:32:09,270 --> 00:32:11,400
然後我們問，內
這些傢伙，什麼是酷？

769
00:32:11,400 --> 00:32:12,941
而在這其中，這其中的涼爽。

770
00:32:12,941 --> 00:32:14,500
在這其中，沒有什麼很酷。

771
00:32:14,500 --> 00:32:16,250
因此，這是剩下的唯一標記。

772
00:32:16,250 --> 00:32:20,112
>> ALLISON BUCHHOLTZ-AU：雖然酷
只是這一個標籤有內。

773
00:32:20,112 --> 00:32:21,070
TOMAS賴默斯：沒錯。

774
00:32:21,070 --> 00:32:22,403
這有什麼特殊的內那些？

775
00:32:22,403 --> 00:32:22,930
什麼都沒有。

776
00:32:22,930 --> 00:32:25,270
現在，我要說的是
如果沒有空間，

777
00:32:25,270 --> 00:32:29,880
你問什麼是冷靜和special--
或者有什麼漂亮，特別的，對不對？

778
00:32:29,880 --> 00:32:35,370
如果你說.special.pretty，這是
一樣.pretty.special。

779
00:32:35,370 --> 00:32:39,220
>> 因為什麼除去空間
問的是，當你說。特殊，

780
00:32:39,220 --> 00:32:40,970
你問，OK，
哪些是特殊的？

781
00:32:40,970 --> 00:32:43,780
然後那些，其中
那些還漂亮，

782
00:32:43,780 --> 00:32:47,010
這是一樣的，語法，
為問，什麼是漂亮，

783
00:32:47,010 --> 00:32:49,500
這些，然後，什麼也特別的？

784
00:32:49,500 --> 00:32:50,000
對不對？

785
00:32:50,000 --> 00:32:53,099
它的差
什麼是內部是什麼。

786
00:32:53,099 --> 00:32:53,640
聽眾：OK。

787
00:32:53,640 --> 00:32:54,473
TOMAS賴默斯：是的。

788
00:32:54,473 --> 00:32:56,670

789
00:32:56,670 --> 00:32:58,030
真棒。

790
00:32:58,030 --> 00:33:00,426
所以考慮到這一點then--

791
00:33:00,426 --> 00:33:01,800
>> ALLISON BUCHHOLTZ-AU：我認為我們的最後一
事情是（花式英國口音）

792
00:33:01,800 --> 00:33:02,510
盒模型。

793
00:33:02,510 --> 00:33:05,992
>> TOMAS賴默斯：本box-- [笑]
我愛的方式佳佳說。

794
00:33:05,992 --> 00:33:06,950
因此，盒模型的事情。

795
00:33:06,950 --> 00:33:09,644
>> ALLISON BUCHHOLTZ-AU：只要有
一個盒子，我會是你的盒子模型。

796
00:33:09,644 --> 00:33:11,310
TOMAS賴默斯：讓我們談談這一點。

797
00:33:11,310 --> 00:33:14,070
所以，現在，我們已經花了很多
時間談論選擇。

798
00:33:14,070 --> 00:33:16,944
到現在為止，你們可能一樣，
的selectors--你知道主人，

799
00:33:16,944 --> 00:33:21,510
如何確切地選擇內容
你想操縱你的屏幕上。

800
00:33:21,510 --> 00:33:24,740
>> 所以，現在的問題是，如何
究竟你能處理呢？

801
00:33:24,740 --> 00:33:27,010
所以我想最基本的
想想這樣

802
00:33:27,010 --> 00:33:30,294
是，好了，究竟是什麼
在CSS元素？

803
00:33:30,294 --> 00:33:32,585
我們已經花了很多時間
談到什麼是標籤，

804
00:33:32,585 --> 00:33:36,140
或者什麼是最基本的
標記的表示？

805
00:33:36,140 --> 00:33:39,870

806
00:33:39,870 --> 00:33:45,170
>> 想想一個好辦法
也就是說，什麼形狀是鮭魚？

807
00:33:45,170 --> 00:33:47,295
什麼形狀，喜歡的
鮭魚色的背景是什麼？

808
00:33:47,295 --> 00:33:47,880
>> 聽眾：這是一個矩形。

809
00:33:47,880 --> 00:33:49,040
>> TOMAS賴默斯：這是一個矩形，對不對？

810
00:33:49,040 --> 00:33:50,956
>> ALLISON BUCHHOLTZ-AU：
是不是一招的問題。

811
00:33:50,956 --> 00:33:51,870
[笑]

812
00:33:51,870 --> 00:33:54,670
>> TOMAS賴默斯：不嘗試
欺騙你們這麼晚。

813
00:33:54,670 --> 00:33:57,510
所以，我們有這個矩形。

814
00:33:57,510 --> 00:33:59,140
而標籤是P，對不對？

815
00:33:59,140 --> 00:34:02,280
所以這給了我們很好
相信段落

816
00:34:02,280 --> 00:34:07,440
被表示為一個長方形，在
至少在瀏覽器中的一點，這

817
00:34:07,440 --> 00:34:08,715
它是。

818
00:34:08,715 --> 00:34:11,423
>> ALLISON BUCHHOLTZ-AU：我的意思是，
瀏覽器通常是長方形的，

819
00:34:11,423 --> 00:34:13,440
因此它是有道理的。

820
00:34:13,440 --> 00:34:18,750
>> TOMAS賴默斯：這個想法是在這裡
所有在CSS標籤的

821
00:34:18,750 --> 00:34:21,790
被表示為矩形。

822
00:34:21,790 --> 00:34:25,699
和每一個長方形有四
部分根據CSS，OK？

823
00:34:25,699 --> 00:34:27,830
你有實際的內容。

824
00:34:27,830 --> 00:34:29,644
這就是文字所在。

825
00:34:29,644 --> 00:34:30,470
>> ALLISON BUCHHOLTZ-AU：
也許你的圖片。

826
00:34:30,470 --> 00:34:31,303
>> TOMAS賴默斯：是的。

827
00:34:31,303 --> 00:34:33,860
你有填充，這是
只是某種空白。

828
00:34:33,860 --> 00:34:35,085
那麼你有一個邊界。

829
00:34:35,085 --> 00:34:37,710
然後你有保證金，這
是那個以外的空白。

830
00:34:37,710 --> 00:34:39,460
所以這是沒有意義的
任何人，所以我們

831
00:34:39,460 --> 00:34:42,500
要談論的一秒鐘。

832
00:34:42,500 --> 00:34:47,570
所以在這裡，我們要做的
是我們要創建一些div的，OK？

833
00:34:47,570 --> 00:34:48,420
原諒我，而我 - 

834
00:34:48,420 --> 00:34:51,506
>> ALLISON BUCHHOLTZ-AU：我覺得喜歡
我們應該把一個可愛的照片。

835
00:34:51,506 --> 00:34:52,520
>> TOMAS賴默斯：我們當然應該。

836
00:34:52,520 --> 00:34:53,389
>> ALLISON BUCHHOLTZ-AU：
我覺得每個人都

837
00:34:53,389 --> 00:34:54,870
可受益於
可愛的圖片，僅此而已。

838
00:34:54,870 --> 00:34:56,774
>> TOMAS賴默斯：我們能否
從A--中獲益

839
00:34:56,774 --> 00:34:57,648
>> 聽眾：是的，當然。

840
00:34:57,648 --> 00:34:58,790
TOMAS賴默斯：OK，涼。

841
00:34:58,790 --> 00:35:02,254
所以，我們應該把一個可愛
畫面中的某個地方。

842
00:35:02,254 --> 00:35:05,295
ALLISON BUCHHOLTZ-AU：我覺得自己像一個
現在可愛的兔子可能是有用的。

843
00:35:05,295 --> 00:35:06,190
TOMAS賴默斯：當然。

844
00:35:06,190 --> 00:35:06,950
ALLISON BUCHHOLTZ-AU：本週結束。

845
00:35:06,950 --> 00:35:07,390
有一些adorab--

846
00:35:07,390 --> 00:35:08,520
>> TOMAS賴默斯：如何回合一隻小貓？

847
00:35:08,520 --> 00:35:09,220
>> ALLISON BUCHHOLTZ-AU：
一隻小貓作品了。

848
00:35:09,220 --> 00:35:11,300
>> TOMAS賴默斯：酷，因為
有一個網站的。

849
00:35:11,300 --> 00:35:12,300
這就是所謂的PlaceKitten。

850
00:35:12,300 --> 00:35:14,719
ALLISON BUCHHOLTZ-AU：那太好了。

851
00:35:14,719 --> 00:35:15,510
TOMAS賴默斯：是的。

852
00:35:15,510 --> 00:35:18,040
ALLISON BUCHHOLTZ-AU：只為一樣，
佔位符圖像在你的網站。

853
00:35:18,040 --> 00:35:18,914
TOMAS賴默斯：嗯。

854
00:35:18,914 --> 00:35:21,520
還有PlacePuppy。

855
00:35:21,520 --> 00:35:22,832
並有PlaceBacon。

856
00:35:22,832 --> 00:35:24,340
>> ALLISON BUCHHOLTZ-AU：PlaceBacon？

857
00:35:24,340 --> 00:35:25,350
真的嗎？

858
00:35:25,350 --> 00:35:28,190
>> TOMAS賴默斯：哦，我們不
有互聯網連接在這裡。

859
00:35:28,190 --> 00:35:29,875
>> ALLISON BUCHHOLTZ-AU：[呻吟]

860
00:35:29,875 --> 00:35:30,375
悲劇。

861
00:35:30,375 --> 00:35:32,333
TOMAS賴默斯：否則，
我會告訴你的傢伙

862
00:35:32,333 --> 00:35:33,870
如何把圖像在你的網站。

863
00:35:33,870 --> 00:35:36,370
我們將設法讓這個
工作之前，我們得走了。

864
00:35:36,370 --> 00:35:38,660
但現在，我們只是
要談的顏色即可。

865
00:35:38,660 --> 00:35:39,820
我們希望把kittens--的照片

866
00:35:39,820 --> 00:35:40,210
>> ALLISON BUCHHOLTZ-AU：我們做到了。

867
00:35:40,210 --> 00:35:43,110
>> TOMAS賴默斯：--the互聯網
下來的那一刻是。

868
00:35:43,110 --> 00:35:47,820
因此，我們有兩個div，而且我們
要給他們兩個ID。

869
00:35:47,820 --> 00:35:51,380

870
00:35:51,380 --> 00:35:56,760
我們要叫它
“第一”和“第二”。

871
00:35:56,760 --> 00:36:01,184
所以ID =“第一”。

872
00:36:01,184 --> 00:36:02,850
我們打算給他們兩種顏色。

873
00:36:02,850 --> 00:36:08,424
那麼，我們如何選擇的東西
與“第一”的ID？

874
00:36:08,424 --> 00:36:09,840
ALLISON BUCHHOLTZ-AU：點或哈希？

875
00:36:09,840 --> 00:36:10,730
聽眾：夏普。

876
00:36:10,730 --> 00:36:12,940
TOMAS賴默斯：夏普，完美。

877
00:36:12,940 --> 00:36:14,950
夏普，哈希，無論we--

878
00:36:14,950 --> 00:36:15,680
>> ALLISON BUCHHOLTZ-AU：
很多事情來調用它。

879
00:36:15,680 --> 00:36:16,430
>> TOMAS賴默斯：OK。

880
00:36:16,430 --> 00:36:19,800
我們要解決的包括hashtag，並
這就是我們要一起去。

881
00:36:19,800 --> 00:36:20,300
好不好？

882
00:36:20,300 --> 00:36:20,735
>> ALLISON BUCHHOLTZ-AU：包括hashtag。

883
00:36:20,735 --> 00:36:22,340
>> TOMAS賴默斯：所以包括hashtag第一。

884
00:36:22,340 --> 00:36:24,506
>> ALLISON BUCHHOLTZ-AU：那麼
你可以鳴叫的seminar--

885
00:36:24,506 --> 00:36:27,582
包括hashtag CSS，包括hashtag涼爽。

886
00:36:27,582 --> 00:36:29,040
TOMAS賴默斯：包括hashtag迷死人。

887
00:36:29,040 --> 00:36:30,730
ALLISON BUCHHOLTZ-AU：
包括hashtag迷死人，是的。

888
00:36:30,730 --> 00:36:31,480
TOMAS賴默斯：OK。

889
00:36:31,480 --> 00:36:33,660
因此，我們有“第一”，“第二”。

890
00:36:33,660 --> 00:36:37,697
因此，首先，我們將有
紅色的背景色。

891
00:36:37,697 --> 00:36:39,030
ALLISON BUCHHOLTZ-AU：嗯，結腸癌。

892
00:36:39,030 --> 00:36:40,281
TOMAS賴默斯：是啊。

893
00:36:40,281 --> 00:36:42,281
ALLISON BUCHHOLTZ-AU：
我會是你當場檢查。

894
00:36:42,281 --> 00:36:43,960
TOMAS賴默斯：佳佳的拉去。

895
00:36:43,960 --> 00:36:45,830
的blue--背景顏色

896
00:36:45,830 --> 00:36:46,810
>> TOMAS賴默斯：紫色！

897
00:36:46,810 --> 00:36:47,726
>> TOMAS賴默斯：紫色。

898
00:36:47,726 --> 00:36:48,830
ALLISON BUCHHOLTZ-AU：是的。

899
00:36:48,830 --> 00:36:50,630
紫色是我最喜歡的顏色，
我們並沒有使用它。

900
00:36:50,630 --> 00:36:51,546
>> TOMAS賴默斯：紫羅蘭。

901
00:36:51,546 --> 00:36:53,361
ALLISON BUCHHOLTZ-AU：紫羅蘭。

902
00:36:53,361 --> 00:36:53,860
這一工程。

903
00:36:53,860 --> 00:36:56,482

904
00:36:56,482 --> 00:36:59,880
>> TOMAS賴默斯：所以我們
將有兩個div。

905
00:36:59,880 --> 00:37:01,654
他們將是完全空白。

906
00:37:01,654 --> 00:37:03,070
我們也許應該有一些文字。

907
00:37:03,070 --> 00:37:05,580

908
00:37:05,580 --> 00:37:09,815
因此，“第一”將是“HELLO”。

909
00:37:09,815 --> 00:37:10,940
和“老二”會say--

910
00:37:10,940 --> 00:37:11,110
>> ALLISON BUCHHOLTZ-AU：再見。

911
00:37:11,110 --> 00:37:12,514
>> 聽眾： - “世界”。

912
00:37:12,514 --> 00:37:14,122
你好，再見。

913
00:37:14,122 --> 00:37:16,580
ALLISON BUCHHOLTZ-AU：我看到了
在一周他們的演唱會。

914
00:37:16,580 --> 00:37:17,705
TOMAS賴默斯：披頭士？

915
00:37:17,705 --> 00:37:20,242
ALLISON BUCHHOLTZ-AU：對於實數。

916
00:37:20,242 --> 00:37:21,200
他們不是很大。

917
00:37:21,200 --> 00:37:24,084

918
00:37:24,084 --> 00:37:24,750
我不喜歡它。

919
00:37:24,750 --> 00:37:26,060
>> TOMAS賴默斯：我們有
“HELLO”和“再見”。

920
00:37:26,060 --> 00:37:29,102
再次，CSS只是真棒，
因為它承認我們的顏色。

921
00:37:29,102 --> 00:37:30,810
不需要連
擔心它們的存在。

922
00:37:30,810 --> 00:37:33,194
他們這樣做。

923
00:37:33,194 --> 00:37:35,130
>> ALLISON BUCHHOLTZ-AU：它們的存在。

924
00:37:35,130 --> 00:37:39,560
>> TOMAS賴默斯：所以，CSS，我認為有
255字談色。

925
00:37:39,560 --> 00:37:42,986
如果你能想到的顏色之外
那些255一樣，我會留下深刻的印象。

926
00:37:42,986 --> 00:37:44,110
ALLISON BUCHHOLTZ-AU：是的。

927
00:37:44,110 --> 00:37:45,560
我想你們可能
剛進來權後。

928
00:37:45,560 --> 00:37:47,727
>> TOMAS賴默斯：所以在這裡，
你會看到，我們有兩個箱子

929
00:37:47,727 --> 00:37:49,143
對上對方，右上？

930
00:37:49,143 --> 00:37:50,200
HELLO和GOODBYE。

931
00:37:50,200 --> 00:37:51,460
>> ALLISON BUCHHOLTZ-AU：
有之間沒有空格。

932
00:37:51,460 --> 00:37:53,390
他們只是smooshed
右在彼此的頂部。

933
00:37:53,390 --> 00:37:55,973
>> TOMAS賴默斯：所以第一件事
我想我們應該談談

934
00:37:55,973 --> 00:38:02,960
是讓我們也say--耶。

935
00:38:02,960 --> 00:38:08,020
所以CSS代表他們作為排序箱。

936
00:38:08,020 --> 00:38:10,100
和作為盒，它們具有的內容。

937
00:38:10,100 --> 00:38:14,540
和內容，現在是有點
該HELLO或GOODBYE，就是這樣。

938
00:38:14,540 --> 00:38:15,040
好不好？

939
00:38:15,040 --> 00:38:19,790
>> 所以第一件事情之一，你
可以做的是，你可以添加填充。

940
00:38:19,790 --> 00:38:25,610
填充說多少空間
它應該留在每邊。

941
00:38:25,610 --> 00:38:29,200
因此，讓我們說，我想說的
10個像素，每邊。

942
00:38:29,200 --> 00:38:31,234
我會剖析，在第二。

943
00:38:31,234 --> 00:38:33,150
ALLISON BUCHHOLTZ-AU：
所有這些東西在這裡

944
00:38:33,150 --> 00:38:36,980
將要主要在像素
為研討會的休息。

945
00:38:36,980 --> 00:38:40,980
你會看到它有
周圍的一些空間，對不對？

946
00:38:40,980 --> 00:38:46,360
所以你看不出這裡有什麼的
這種無形的排序填充

947
00:38:46,360 --> 00:38:49,600
在每一側，它說，等，
OK，你有你的內容 - 箱

948
00:38:49,600 --> 00:38:51,680
>> ALLISON BUCHHOLTZ-AU：你想
剛剛拉起檢查元素？

949
00:38:51,680 --> 00:38:53,659
>> TOMAS賴默斯：是啊，這是個好主意。

950
00:38:53,659 --> 00:38:56,700
ALLISON BUCHHOLTZ-AU：另外，我發現
該檢查的元素是一個好辦法

951
00:38:56,700 --> 00:39:01,280
要弄清楚，如果事情是怎麼回事
錯了，意想不到的事情發生了，

952
00:39:01,280 --> 00:39:04,570
檢查標籤，看看哪些
這就像覆蓋是有幫助的。

953
00:39:04,570 --> 00:39:05,940
>> TOMAS賴默斯：所以我不知道
如果你們能看到這種顏色。

954
00:39:05,940 --> 00:39:06,470
你能嗎？

955
00:39:06,470 --> 00:39:10,120
你會看到這個填充
邊緣的排序。

956
00:39:10,120 --> 00:39:13,410
然後就看到實際的
在藍含量，對不對？

957
00:39:13,410 --> 00:39:16,820
所以這是非常
盒模型的基礎知識。

958
00:39:16,820 --> 00:39:17,674
你有內容。

959
00:39:17,674 --> 00:39:18,590
那麼你有填充。

960
00:39:18,590 --> 00:39:20,440
>> 聽眾：你為什麼不只是
使用盒內the--

961
00:39:20,440 --> 00:39:21,606
>> ALLISON BUCHHOLTZ-AU：沒錯。

962
00:39:21,606 --> 00:39:24,745
因為它只是選擇
元素現在。

963
00:39:24,745 --> 00:39:26,050
>> TOMAS賴默斯：是啊。

964
00:39:26,050 --> 00:39:27,060
其他的事情。

965
00:39:27,060 --> 00:39:29,780
所以，讓我們來談談
用於第二填充指令。

966
00:39:29,780 --> 00:39:36,380
因此，在CSS，測量
需要有一個單元。

967
00:39:36,380 --> 00:39:39,740
所以，首先你得的數額。

968
00:39:39,740 --> 00:39:41,460
所以在這種情況下，我們說10。

969
00:39:41,460 --> 00:39:44,780
然後下一個
我們說的是像素，像素。

970
00:39:44,780 --> 00:39:49,160
其他的則可能是有
之類的東西厘米，英寸。

971
00:39:49,160 --> 00:39:51,367
你可以做這樣的事情，
什麼為10英寸？

972
00:39:51,367 --> 00:39:52,700
它的將是可笑的。

973
00:39:52,700 --> 00:39:52,990
>> ALLISON BUCHHOLTZ-AU：哦，男孩。

974
00:39:52,990 --> 00:39:53,460
>> 聽眾：哇。

975
00:39:53,460 --> 00:39:54,460
>> TOMAS和Allison：是的。

976
00:39:54,460 --> 00:39:57,840
TOMAS賴默斯：所以這就是所有的填充。

977
00:39:57,840 --> 00:39:59,255
我要回去像素。

978
00:39:59,255 --> 00:40:01,754
>> ALLISON BUCHHOLTZ-AU：像素
往往是，比如，標準。

979
00:40:01,754 --> 00:40:04,589
當你看到很多網站，
他們大多​​工作以像素為單位。

980
00:40:04,589 --> 00:40:07,755
TOMAS賴默斯：所以你會看到
無論是pixels--其他的人，你看

981
00:40:07,755 --> 00:40:13,952
是他們，這是新興市場的
等於所述字體的高度

982
00:40:13,952 --> 00:40:15,160
您目前使用。

983
00:40:15,160 --> 00:40:16,201
>> ALLISON BUCHHOLTZ-AU：MM。

984
00:40:16,201 --> 00:40:17,574

985
00:40:17,574 --> 00:40:20,740
TOMAS賴默斯：這是一個很好的方式來表達，
就像，我想盡可能多的空間我的字體

986
00:40:20,740 --> 00:40:21,514
是服用。

987
00:40:21,514 --> 00:40:23,180
ALLISON BUCHHOLTZ-AU：不知道。

988
00:40:23,180 --> 00:40:25,747
你每天都學到新的東西。

989
00:40:25,747 --> 00:40:27,955
TOMAS賴默斯：有
很多的CS測量。

990
00:40:27,955 --> 00:40:29,260
我建議你看看他們。

991
00:40:29,260 --> 00:40:32,122
對於所有的情況下，我覺得
像素應該是充分的。

992
00:40:32,122 --> 00:40:33,830
而且他們還什麼
你會看到

993
00:40:33,830 --> 00:40:36,520
在大多數例子在網上完成。

994
00:40:36,520 --> 00:40:38,320
因此，我們將離開它的像素。

995
00:40:38,320 --> 00:40:42,420
>> 您還可以，我應該say--等
填充集中的所有墊的。

996
00:40:42,420 --> 00:40:49,789
你也可以這樣做
“填充頂”只是set--

997
00:40:49,789 --> 00:40:52,080
ALLISON BUCHHOLTZ-AU：也許
我們會得到我們的“HELLO”回來。

998
00:40:52,080 --> 00:40:55,480
TOMAS賴默斯：--to只是設置
填充在頂部和沒有別的。

999
00:40:55,480 --> 00:40:59,560
所以這四個命令填充頂，
填充底，填充左，

1000
00:40:59,560 --> 00:41:00,310
和padding-權利。

1001
00:41:00,310 --> 00:41:02,470
>> ALLISON BUCHHOLTZ-AU：就像
你所期望的一個盒子。

1002
00:41:02,470 --> 00:41:03,530
>> TOMAS賴默斯：是的。

1003
00:41:03,530 --> 00:41:05,240
沒有什麼太瘋狂了那裡。

1004
00:41:05,240 --> 00:41:08,230
這是否有意義？

1005
00:41:08,230 --> 00:41:11,990
所以這是填充。

1006
00:41:11,990 --> 00:41:14,110
我將所有設置
在墊回10。

1007
00:41:14,110 --> 00:41:17,010
然後我會轉移到邊境。

1008
00:41:17,010 --> 00:41:21,130
>> 那麼，什麼邊界是
邊框是一個奇怪的命令。

1009
00:41:21,130 --> 00:41:24,450
這需要排序三個件事。

1010
00:41:24,450 --> 00:41:28,930
所以，第一個是有多大你
希望它是作為一個測量。

1011
00:41:28,930 --> 00:41:30,662
同樣，我只使用像素。

1012
00:41:30,662 --> 00:41:32,620
最後一點我
要添加到測量

1013
00:41:32,620 --> 00:41:35,270
是一件事
不需要一個單元為0。

1014
00:41:35,270 --> 00:41:37,390
它實際上是不正確
得到0單位，

1015
00:41:37,390 --> 00:41:41,940
因為0是0跨越英寸，
像素，厘米，等等。

1016
00:41:41,940 --> 00:41:43,960
這一切都只是意味著0，對不對？

1017
00:41:43,960 --> 00:41:46,710
所以，首先你給它的測量。

1018
00:41:46,710 --> 00:41:48,650
>> 那麼你給它的風格。

1019
00:41:48,650 --> 00:41:49,869
所以我會說“實”。

1020
00:41:49,869 --> 00:41:51,410
和我們談談這意味著什麼。

1021
00:41:51,410 --> 00:41:54,290
然後最後，你給它的顏色。

1022
00:41:54,290 --> 00:41:56,850
所以我會說“黑”。

1023
00:41:56,850 --> 00:41:59,637
而這些都是我們已經所有的東西
現在見過的，除了款式，

1024
00:41:59,637 --> 00:42:00,720
但我們會談論這個。

1025
00:42:00,720 --> 00:42:04,120
所以你們看到的測量，
你見過的顏色。

1026
00:42:04,120 --> 00:42:10,410
什麼情況是，我們得到這個
它周圍漂亮的黑色邊框，對不對？

1027
00:42:10,410 --> 00:42:11,620
你們看看我們是怎麼做的？

1028
00:42:11,620 --> 00:42:12,760
>> 聽眾：是的。

1029
00:42:12,760 --> 00:42:14,850
>> TOMAS賴默斯：酷。

1030
00:42:14,850 --> 00:42:17,370
那麼，什麼是？

1031
00:42:17,370 --> 00:42:19,160
所以，首先，它是一個像素。

1032
00:42:19,160 --> 00:42:20,880
這是不言而喻的就夠了，對不對？

1033
00:42:20,880 --> 00:42:23,254
喜歡，這是一個像素厚。

1034
00:42:23,254 --> 00:42:26,170
或者，這將是一個像素，但我
放大，所以這是多一點點

1035
00:42:26,170 --> 00:42:26,490
比。

1036
00:42:26,490 --> 00:42:27,967
>> ALLISON BUCHHOLTZ-AU：我們有
這是荒謬的分辨率電視。

1037
00:42:27,967 --> 00:42:29,460
>> TOMAS賴默斯：是的。

1038
00:42:29,460 --> 00:42:33,640
你可以把它做大，
較小的，等等。

1039
00:42:33,640 --> 00:42:35,630
因此，這裡的兩個像素的邊框。

1040
00:42:35,630 --> 00:42:38,810
你會看到它的兩倍厚。

1041
00:42:38,810 --> 00:42:40,172
接下來的事情你必須是彩色的。

1042
00:42:40,172 --> 00:42:41,130
這不是有趣。

1043
00:42:41,130 --> 00:42:42,710
我不會說話
這個，真的。

1044
00:42:42,710 --> 00:42:45,110
>> ALLISON BUCHHOLTZ-AU：但風格
可能只是一點點有趣。

1045
00:42:45,110 --> 00:42:45,980
>> TOMAS賴默斯：是的。

1046
00:42:45,980 --> 00:42:48,560
所以風格的，也有少數的人
我看到用常用。

1047
00:42:48,560 --> 00:42:55,690
第一個穩固的，下一次的
虛線，和最後一個的虛線。

1048
00:42:55,690 --> 00:42:59,290
這裡星羅棋布。

1049
00:42:59,290 --> 00:43:02,980
你會看到，他們是
一幫點吧？

1050
00:43:02,980 --> 00:43:09,030
一個好方法排序，以得到一個不錯的邊界
走，短線也很受歡迎。

1051
00:43:09,030 --> 00:43:11,580

1052
00:43:11,580 --> 00:43:13,600
>> ALLISON BUCHHOLTZ-AU：
然後當然，我

1053
00:43:13,600 --> 00:43:16,660
肯定還有很多其他的
風格，你可以得到。

1054
00:43:16,660 --> 00:43:20,000
我們有一個偉大的一套
在結束對你們的聯繫

1055
00:43:20,000 --> 00:43:23,470
種細讀和
看多爽CSS。

1056
00:43:23,470 --> 00:43:25,954
>> TOMAS賴默斯：然後
最後一件事，我們

1057
00:43:25,954 --> 00:43:27,870
要談論的
盒子模型真正的快。

1058
00:43:27,870 --> 00:43:30,070
哦，然後邊框，
酷似填充，

1059
00:43:30,070 --> 00:43:33,270
你也有類似的東西
左邊框，右邊框，邊框頂部，

1060
00:43:33,270 --> 00:43:37,590
邊框底部，它允許你
獲得在特定邊界。

1061
00:43:37,590 --> 00:43:40,650
因此，這裡的僅僅是邊框左側定義。

1062
00:43:40,650 --> 00:43:43,060
這是否有道理？

1063
00:43:43,060 --> 00:43:46,170
>> ALLISON BUCHHOLTZ-AU：這是一個很酷
辦法強調事物或增加

1064
00:43:46,170 --> 00:43:47,545
不同元素之間的連線。

1065
00:43:47,545 --> 00:43:48,670
TOMAS賴默斯：當然。

1066
00:43:48,670 --> 00:43:50,940
所以這就是我們的邊界。

1067
00:43:50,940 --> 00:43:52,790
和最後一個的幅度。

1068
00:43:52,790 --> 00:43:55,892
保證金的像填充
但它不是within--

1069
00:43:55,892 --> 00:43:57,975
ALLISON BUCHHOLTZ-AU：這是
不在身邊你的元素

1070
00:43:57,975 --> 00:44:00,840
但實際上圍繞整個
中，我們已經看到。

1071
00:44:00,840 --> 00:44:02,770
>> TOMAS賴默斯：是的。

1072
00:44:02,770 --> 00:44:04,090
佳佳說，它完美。

1073
00:44:04,090 --> 00:44:07,550
這不一樣，在你的
元素，它是圍繞整個框。

1074
00:44:07,550 --> 00:44:10,900
這意味著這樣的
背景並不適用於它。

1075
00:44:10,900 --> 00:44:13,550
它基本上說，
就像，我什麼都不要

1076
00:44:13,550 --> 00:44:15,230
在我這麼多的空間。

1077
00:44:15,230 --> 00:44:17,470
所以像我們這裡有
的10個像素的幅度​​。

1078
00:44:17,470 --> 00:44:23,100
因此，在10個像素沒事
應該是我旁邊。

1079
00:44:23,100 --> 00:44:26,210
這是一種其
空間，但那種沒有。

1080
00:44:26,210 --> 00:44:29,215
所以這是非常
盒模型的基礎知識。

1081
00:44:29,215 --> 00:44:30,090
這是否有意義？

1082
00:44:30,090 --> 00:44:33,830

1083
00:44:33,830 --> 00:44:34,550
冷靜，冷靜。

1084
00:44:34,550 --> 00:44:35,800
ALLISON BUCHHOLTZ-AU：真棒。

1085
00:44:35,800 --> 00:44:37,890
所以現在我覺得我們只是
有我們的清涼資源

1086
00:44:37,890 --> 00:44:41,220
我們會帶你們
通過非常快。

1087
00:44:41,220 --> 00:44:44,815
我們將actually--好，
我們有互聯網了嗎？

1088
00:44:44,815 --> 00:44:47,860
>> TOMAS賴默斯：讓我們
看看我是否能打開up--

1089
00:44:47,860 --> 00:44:50,040
讓我看看，如果我
可以迅速得到互聯網

1090
00:44:50,040 --> 00:44:53,317
而佳佳談什麼
佳佳願意談論。

1091
00:44:53,317 --> 00:44:55,150
ALLISON BUCHHOLTZ-AU：
所以basically--我不

1092
00:44:55,150 --> 00:44:57,930
知道還有什麼我可以說在這一點上。

1093
00:44:57,930 --> 00:45:01,340
但這些都是一些
真正的好資源。

1094
00:45:01,340 --> 00:45:04,629
這些都是那些
托馬斯和我用

1095
00:45:04,629 --> 00:45:06,420
而我們實際上
用來預習本。

1096
00:45:06,420 --> 00:45:09,940
W3Schools的是一個你
你們應該已經看到過。

1097
00:45:09,940 --> 00:45:12,440
我們推薦它了
很多事用CSS。

1098
00:45:12,440 --> 00:45:15,060
我知道我把它推薦給
我的部分所有的時間。

1099
00:45:15,060 --> 00:45:21,050
>> 一個偉大的事情是，它
讓你那種亂用CSS的

1100
00:45:21,050 --> 00:45:23,830
和看到的變化
瞬間在此，

1101
00:45:23,830 --> 00:45:25,920
象，雙窗口中查看它了。

1102
00:45:25,920 --> 00:45:29,980
所以你不必擔心
建立自己的網頁，

1103
00:45:29,980 --> 00:45:33,090
或設立虛擬主機在你的
本土家電和本地主機，

1104
00:45:33,090 --> 00:45:34,980
並獲得所有的東西的工作。

1105
00:45:34,980 --> 00:45:36,830
這是在頁面中嵌入的權利。

1106
00:45:36,830 --> 00:45:39,042
>> 它有這些小
教訓可以

1107
00:45:39,042 --> 00:45:40,750
通過學習
更多選擇，

1108
00:45:40,750 --> 00:45:44,610
或了解你的操作
字體或背景，或圖像。

1109
00:45:44,610 --> 00:45:46,990
你有這些
瞬時結果你

1110
00:45:46,990 --> 00:45:49,310
不必做任何
其他準備工作。

1111
00:45:49,310 --> 00:45:51,060
所以我喜歡W3Schools的。

1112
00:45:51,060 --> 00:45:51,960
這是美妙的。

1113
00:45:51,960 --> 00:45:52,670
是它的工作？

1114
00:45:52,670 --> 00:45:52,950
>> TOMAS賴默斯：是的。

1115
00:45:52,950 --> 00:45:53,720
不，它不是。

1116
00:45:53,720 --> 00:45:55,636
難道你要我試試
並重新啟動我的電腦？

1117
00:45:55,636 --> 00:45:56,410
還是我們想要to--

1118
00:45:56,410 --> 00:46:01,490
>> ALLISON BUCHHOLTZ-AU：我的意思是，
同時，這也將是在網上。

1119
00:46:01,490 --> 00:46:02,740
所有的幻燈片將在網上。

1120
00:46:02,740 --> 00:46:05,470
所以，我只是強烈建議做這些。

1121
00:46:05,470 --> 00:46:07,880
>> 這是偉大的，因為只是
像小抄。

1122
00:46:07,880 --> 00:46:10,690
這只是所有的基本
命令你有。

1123
00:46:10,690 --> 00:46:13,070
這是偉大的，當你第一次
開始了你的網站。

1124
00:46:13,070 --> 00:46:15,080
因為也許你不
想進入所有

1125
00:46:15,080 --> 00:46:17,355
真正的細節問題
設計沉重的東西。

1126
00:46:17,355 --> 00:46:20,230
你只需要在一個格式化的方式
種是有道理的和意志

1127
00:46:20,230 --> 00:46:21,490
做暫時。

1128
00:46:21,490 --> 00:46:23,580
如果你真的想
進入它，我知道

1129
00:46:23,580 --> 00:46:27,240
這是一樣，一
托馬斯最喜歡引用。

1130
00:46:27,240 --> 00:46:30,130
我們用它來
準備，它的美妙。

1131
00:46:30,130 --> 00:46:33,030
這是從Mozilla的開發人員。

1132
00:46:33,030 --> 00:46:36,490
>> TOMAS賴默斯：所以Mozilla是
誰使Firefox的人。

1133
00:46:36,490 --> 00:46:40,290
而這只是自己的開發人員
參考，我認為這是真棒。

1134
00:46:40,290 --> 00:46:44,870
它有一個美好的
資源的列表。

1135
00:46:44,870 --> 00:46:45,530
所以我們have--

1136
00:46:45,530 --> 00:46:48,060
>> ALLISON BUCHHOLTZ-AU：
然後最後一個音符是

1137
00:46:48,060 --> 00:46:50,120
當你試圖
設計你的網站，

1138
00:46:50,120 --> 00:46:53,550
汲取靈感的東西
你認為是漂亮。

1139
00:46:53,550 --> 00:46:56,340
檢查元件，
檢查源代碼

1140
00:46:56,340 --> 00:46:59,370
可超有用
對於試圖找出

1141
00:46:59,370 --> 00:47:02,080
如何風格你自己的網站。

1142
00:47:02,080 --> 00:47:04,540
>> 通常情況下，我覺得最好的
這樣，除了實驗，

1143
00:47:04,540 --> 00:47:06,290
只是看
事情是漂亮。

1144
00:47:06,290 --> 00:47:09,810
我覺得真的很難只
種設計的東西你自己，

1145
00:47:09,810 --> 00:47:11,090
特別是在開始時。

1146
00:47:11,090 --> 00:47:14,740
所以，請看看網站
你喜歡看。

1147
00:47:14,740 --> 00:47:16,880
找出是什麼使
他們吸引你。

1148
00:47:16,880 --> 00:47:19,170
然後隨意
嘗試和複製的。

1149
00:47:19,170 --> 00:47:20,410
>> TOMAS賴默斯：對。

1150
00:47:20,410 --> 00:47:23,120
偶喜歡的網站
這樣，你可以看到

1151
00:47:23,120 --> 00:47:25,460
有絕對是一個DIV頂部。

1152
00:47:25,460 --> 00:47:29,920
然後，你還要在另一個分區
在這裡，這是CSS的迷死。

1153
00:47:29,920 --> 00:47:32,480
然後你有一大堆的鏈接在這裡。

1154
00:47:32,480 --> 00:47:34,770
如果你真的只是檢查
元素，可以排序的

1155
00:47:34,770 --> 00:47:38,520
開始看到什麼做網站
樣子，哪能

1156
00:47:38,520 --> 00:47:40,493
重建，如果我想。

1157
00:47:40,493 --> 00:47:41,890
這是否有意義？

1158
00:47:41,890 --> 00:47:43,670
因此，我們只剩下三分鐘。

1159
00:47:43,670 --> 00:47:46,380
所以，問題嗎？

1160
00:47:46,380 --> 00:47:47,650
它們中的任何？

1161
00:47:47,650 --> 00:47:48,350
是。

1162
00:47:48,350 --> 00:47:50,780
>> 顧客：顏色
矩形，你會如何

1163
00:47:50,780 --> 00:47:53,499
have--如果你不希望它
要在整個頁面上，可以

1164
00:47:53,499 --> 00:47:56,400
你已經是去對面只
一半頁面或只是文本？

1165
00:47:56,400 --> 00:47:59,660
>> TOMAS賴默斯：是的，絕對。

1166
00:47:59,660 --> 00:48:02,780
因此，讓我真正看到。

1167
00:48:02,780 --> 00:48:04,670
我有兩個想法。

1168
00:48:04,670 --> 00:48:07,265
所以首先，你
也可以用百分比。

1169
00:48:07,265 --> 00:48:08,140
>> 聽眾：真的嗎？

1170
00:48:08,140 --> 00:48:11,260
>> ALLISON BUCHHOLTZ-AU：那麼什麼
查找是相對的定位。

1171
00:48:11,260 --> 00:48:13,385
這件事情，我們
沒有時間進入，

1172
00:48:13,385 --> 00:48:16,392
但它的東西我絕對
建議你們檢查。

1173
00:48:16,392 --> 00:48:17,580
>> TOMAS賴默斯：那麼百分比。

1174
00:48:17,580 --> 00:48:21,524
看看我們如何使它
只有50％的寬度？

1175
00:48:21,524 --> 00:48:24,190
ALLISON BUCHHOLTZ-AU：如果您
實際上知道的像素數，

1176
00:48:24,190 --> 00:48:25,780
你可以更精確的方式。

1177
00:48:25,780 --> 00:48:27,200
你可以反复折騰它。

1178
00:48:27,200 --> 00:48:27,700
但是50％以上。

1179
00:48:27,700 --> 00:48:31,970
如果我們要調整我們的瀏覽器，
這將使其更小。

1180
00:48:31,970 --> 00:48:35,250
>> TOMAS賴默斯：嗯，這是
基本上是50％，現在，我想。

1181
00:48:35,250 --> 00:48:38,820
它的50％，然後將餘量
已被添加到這一點。

1182
00:48:38,820 --> 00:48:40,100
CSS有很多怪癖。

1183
00:48:40,100 --> 00:48:43,195
所以現在這是
50％的頁面寬度。

1184
00:48:43,195 --> 00:48:46,860
但請記住，你有10
像素從每一側取下。

1185
00:48:46,860 --> 00:48:49,700
所以，如果你是移動，對
在瀏覽器的左邊緣，

1186
00:48:49,700 --> 00:48:51,550
那麼它看起來像50％。

1187
00:48:51,550 --> 00:48:53,884
同樣，就像我說的，CSS可以
有很多的猜測和檢查。

1188
00:48:53,884 --> 00:48:56,049
就像，你認為什麼是
要表現的一種方式，

1189
00:48:56,049 --> 00:48:57,805
但它的行為是完全不同的方式。

1190
00:48:57,805 --> 00:48:59,420
>> ALLISON BUCHHOLTZ-AU：
而你只是變得更聰明，

1191
00:48:59,420 --> 00:49:02,020
而你只是得到一個更好的
直覺它，你待著。

1192
00:49:02,020 --> 00:49:02,730
>> TOMAS賴默斯：它
變得越來越糟糕。

1193
00:49:02,730 --> 00:49:03,496
所以，它實際上只是一場比賽。

1194
00:49:03,496 --> 00:49:05,454
>> ALLISON BUCHHOLTZ-AU：
這是超級令人鼓舞。

1195
00:49:05,454 --> 00:49:07,070
我們希望他們能夠喜歡CSS。

1196
00:49:07,070 --> 00:49:08,810
>> TOMAS賴默斯：CSS是真棒。

1197
00:49:08,810 --> 00:49:10,354
記住這一點。

1198
00:49:10,354 --> 00:49:11,020
其他問題嗎？

1199
00:49:11,020 --> 00:49:14,297
>> ALLISON BUCHHOLTZ-AU：一件事。

1200
00:49:14,297 --> 00:49:14,880
還要別的嗎？

1201
00:49:14,880 --> 00:49:15,140
酷。

1202
00:49:15,140 --> 00:49:15,690
>> TOMAS賴默斯：真棒。

1203
00:49:15,690 --> 00:49:18,523
>> ALLISON BUCHHOLTZ-AU：好吧，如果你
你們有什麼問題以後，

1204
00:49:18,523 --> 00:49:20,919
我們總是可以按往常一樣。

1205
00:49:20,919 --> 00:49:22,960
你可能會看到一些
美國最終項目

1206
00:49:22,960 --> 00:49:24,280
絕對的黑客馬拉松。

1207
00:49:24,280 --> 00:49:25,200
>> TOMAS賴默斯：當然。

1208
00:49:25,200 --> 00:49:25,720
並在公平的。

1209
00:49:25,720 --> 00:49:26,560
>> ALLISON BUCHHOLTZ-AU：而在展會上。

1210
00:49:26,560 --> 00:49:26,840
呵呵。

1211
00:49:26,840 --> 00:49:28,130
>> TOMAS賴默斯：期待
看到所有的awesome--的

1212
00:49:28,130 --> 00:49:29,420
>> ALLISON BUCHHOLTZ-AU：我們會看到
所有你真棒網站

1213
00:49:29,420 --> 00:49:30,572
這將是美麗的。

1214
00:49:30,572 --> 00:49:32,780
TOMAS賴默斯：您可以隨時
看看，喜歡的網站

1215
00:49:32,780 --> 00:49:36,234
誰曾一樣，良好的CSS，然後
像那些誰沒有嘗試做CSS。

1216
00:49:36,234 --> 00:49:39,150
ALLISON BUCHHOLTZ-AU：此外，另一個
的事情，一件事，探討

1217
00:49:39,150 --> 00:49:40,445
是自舉。

1218
00:49:40,445 --> 00:49:41,805
所以引導是偉大的。

1219
00:49:41,805 --> 00:49:42,240
>> TOMAS賴默斯：谷歌，如果你 - 

1220
00:49:42,240 --> 00:49:43,573
>> ALLISON BUCHHOLTZ-AU：谷歌吧。

1221
00:49:43,573 --> 00:49:44,340
這是美妙的。

1222
00:49:44,340 --> 00:49:45,620
你會愛上它。

1223
00:49:45,620 --> 00:49:48,000
現在你有一個
基本的了解CSS的，

1224
00:49:48,000 --> 00:49:50,340
它會讓很多更有意義。

1225
00:49:50,340 --> 00:49:50,890
真棒。

1226
00:49:50,890 --> 00:49:51,480
謝謝，伙計們。

1227
00:49:51,480 --> 00:49:53,330
>> TOMAS賴默斯：非常感謝你。

1228
00:49:53,330 --> 00:49:54,219