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