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

2
00:00:05,660 --> 00:00:08,740
>> 道格·劳埃德：那么，让我们多了一个
视频谈多了一个语言。

3
00:00:08,740 --> 00:00:10,800
这一次，我们将讨论CSS。

4
00:00:10,800 --> 00:00:13,460
这样的CSS，这是短期的
层叠样式表，

5
00:00:13,460 --> 00:00:16,149
是我们用另一种语言
建设网站的时候。

6
00:00:16,149 --> 00:00:17,190
想想看，是这样的。

7
00:00:17,190 --> 00:00:20,900
如果HTML是什么，我们用它来组织
内容我们希望把我们的页面，

8
00:00:20,900 --> 00:00:25,390
CSS是，我们一般使用的工具
定制我们的网站怎么看，

9
00:00:25,390 --> 00:00:30,410
以及如何在用户体验真正的
是，我们的网站进行交互。

10
00:00:30,410 --> 00:00:32,535
>> 类似于HTML，CSS是
不是一种编程语言。

11
00:00:32,535 --> 00:00:33,451
它不具有逻辑。

12
00:00:33,451 --> 00:00:34,595
它不具有的变量。

13
00:00:34,595 --> 00:00:38,890
它不具有任何种类的该
流相关的事情，C那样被。

14
00:00:38,890 --> 00:00:40,150
这是一种造型语言。

15
00:00:40,150 --> 00:00:42,810
其语法相当
简单，只是介绍

16
00:00:42,810 --> 00:00:46,240
如何的元素我们的
页面有一定的HTML

17
00:00:46,240 --> 00:00:48,190
元件应该被修改。

18
00:00:48,190 --> 00:00:51,170
为此，如果你还没有
但观看我们的视频在HTML，

19
00:00:51,170 --> 00:00:53,290
或不熟悉
HTML通常，你

20
00:00:53,290 --> 00:00:57,430
可能想看一看那
首先，因为这CSS的讨论

21
00:00:57,430 --> 00:01:00,700
是要依赖于
HTML有一定的了解。

22
00:01:00,700 --> 00:01:03,740
>> 因此，这里是一个非常
简单的CSS样式表。

23
00:01:03,740 --> 00:01:06,480
即使你从来没有
之前，CSS编程，

24
00:01:06,480 --> 00:01:10,624
我敢肯定，你可以计算出
正是这个样式表做什么。

25
00:01:10,624 --> 00:01:11,290
它做什么？

26
00:01:11,290 --> 00:01:15,470
好，适用于我们的网络体
身体标记之间的网页，一切

27
00:01:15,470 --> 00:01:19,631
在我们的HTML，并将这
该页面以蓝色背景色。

28
00:01:19,631 --> 00:01:21,130
嗯，这是一个非常简单的样式表。

29
00:01:21,130 --> 00:01:23,269
它实际上是非常人性化
友好的语言，CSS。

30
00:01:23,269 --> 00:01:26,560
所以，即使你从来没有使用过，
你可能会猜到这是什么做。

31
00:01:26,560 --> 00:01:30,140
事实上，如果我们加载一个页面，其中
这个样式表嵌入不知何故，

32
00:01:30,140 --> 00:01:36,240
我们网页的背景颜色会
是蓝色，而不是标准的白色。

33
00:01:36,240 --> 00:01:37,670
>> 那么，我们如何建立样式？

34
00:01:37,670 --> 00:01:39,700
那么首先，我们要
确定一个选择器。

35
00:01:39,700 --> 00:01:42,970
在最后一个例子，
该选择是身体。

36
00:01:42,970 --> 00:01:45,050
然后我们有一个开放
大括号，而且我们

37
00:01:45,050 --> 00:01:48,410
要开始定义
样式的选择符。

38
00:01:48,410 --> 00:01:51,800
在大括号之间，我们
只是有键值对的列表。

39
00:01:51,800 --> 00:01:56,205
以前的值对是
背景色的蓝色分号，

40
00:01:56,205 --> 00:01:57,830
但我们可以做更多的这些以及更多。

41
00:01:57,830 --> 00:02:02,330
你可以有多重的东西应用
该标签，即选择的身体。

42
00:02:02,330 --> 00:02:05,960
它们中的每一个是由一个分离
分号，我们称之为他们每个人

43
00:02:05,960 --> 00:02:08,949
一个宣言，一个CSS声明。

44
00:02:08,949 --> 00:02:12,410
当我们所有的样式，我们做
要应用到特定的标签，

45
00:02:12,410 --> 00:02:15,300
我们只是有一个右大
振奋结束样式表，

46
00:02:15,300 --> 00:02:19,640
我们正在做的定义样式表
该特定选择器。

47
00:02:19,640 --> 00:02:21,341
>> 什么是一些常见的CSS属性？

48
00:02:21,341 --> 00:02:23,590
好吧，也许你想要把
周围的东西边界。

49
00:02:23,590 --> 00:02:26,850
所以，你可以说，边境，
这将是你的关键，

50
00:02:26,850 --> 00:02:29,460
然后你的价值观会，
什么款式，颜色和宽度

51
00:02:29,460 --> 00:02:30,209
你希望它是。

52
00:02:30,209 --> 00:02:33,530
因此，风格可以是固体
线，点线，虚线，

53
00:02:33,530 --> 00:02:36,020
一个棱线，这将是波形线。

54
00:02:36,020 --> 00:02:38,790
也许你想拥有它
是蓝色或黑色或绿色。

55
00:02:38,790 --> 00:02:41,490
也许你希望它是
1或2或10像素宽。

56
00:02:41,490 --> 00:02:43,254
您可以指定所有这些事情。

57
00:02:43,254 --> 00:02:46,420
也许你想设置背景
你的网页在一个特定的方式颜色。

58
00:02:46,420 --> 00:02:49,215
我们已经看到，设置
身体的背景是蓝色的。

59
00:02:49,215 --> 00:02:52,080
>> 然后你可以使用一个关键词，
所以CSS有一定的颜色

60
00:02:52,080 --> 00:02:55,950
被内置到它，蓝色，绿色，
黑色的，很简单的颜色，我们知道。

61
00:02:55,950 --> 00:02:59,110
但你也可以指定任何
十六进制颜色，你会喜欢的。

62
00:02:59,110 --> 00:03:05,190
回想一下，颜色可以被识别
由一组三十六进制数

63
00:03:05,190 --> 00:03:08,500
从0到255，RG和b，所述
红色，绿色和蓝色分量。

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

65
00:03:10,590 --> 00:03:15,520
代替使用蓝色或绿色或黑色，
使用英镑，然后六个内六角的数字，

66
00:03:15,520 --> 00:03:18,310
这将给予我们
六个数字颜色。

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

68
00:03:19,850 --> 00:03:21,975
>> 我们也有前台
颜色，这通常是

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

70
00:03:24,140 --> 00:03:28,850
你可以同样做到这一点
与关键字和六个两位数的十六进制。

71
00:03:28,850 --> 00:03:32,140
所以，你可以指定任何颜色，你
想为你的网页的文本

72
00:03:32,140 --> 00:03:36,370
针对一个特定的
背景色，同比增长上面。

73
00:03:36,370 --> 00:03:39,100
您还可以更改和处理
与字体，以及文本的方式

74
00:03:39,100 --> 00:03:40,400
呈现在网页上。

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

76
00:03:42,010 --> 00:03:46,320
您可以使用关键词，如额外的，
额外的小，或者XX小或中等，

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

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

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

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

81
00:03:59,220 --> 00:04:01,659
或者，你甚至可以作为它的基础关闭
的最新的字体大小。

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

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

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

85
00:04:09,330 --> 00:04:14,344
它将基地起飞的，
刚起来上面，它的字体大小。

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

87
00:04:15,760 --> 00:04:18,390
所以这是一个很大的不同
方法来指定字体大小。

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

89
00:04:20,690 --> 00:04:23,360
如果你有一个特别的
名字，还有在某种程度上CSS--

90
00:04:23,360 --> 00:04:27,270
我们不会谈论它
这里 - 定义一个非常特定的字体

91
00:04:27,270 --> 00:04:28,980
并将其嵌入到您的网页。

92
00:04:28,980 --> 00:04:30,620
您还可以使用通用名。

93
00:04:30,620 --> 00:04:33,540
有很多的网络安全字体
这是预先定义的CSS。

94
00:04:33,540 --> 00:04:36,352
如果你是微软的用户
办公室在过去的20年中，

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

96
00:04:38,810 --> 00:04:44,640
目前，宋体，Arial字体，
宋体，格鲁吉亚，宋体，宋体，

97
00:04:44,640 --> 00:04:45,470
等等。

98
00:04:45,470 --> 00:04:47,170
这些都被认为是网络安全的字体。

99
00:04:47,170 --> 00:04:49,169
而实际上，部分
因此，他们走过来的

100
00:04:49,169 --> 00:04:54,140
还是被用来制造web--每一页
有机会访问这个默认设置的字体

101
00:04:54,140 --> 00:04:58,480
各种衬线，而这一切
字体的东西，我们不会进入，

102
00:04:58,480 --> 00:05:01,130
但这些通常
在你的CSS访问，

103
00:05:01,130 --> 00:05:04,029
即使你不
另外定义的字体。

104
00:05:04,029 --> 00:05:07,070
最后，你可以调整你的文字，
而不是它是，默认情况下，对齐

105
00:05:07,070 --> 00:05:09,310
向左，你可以
它右对齐，

106
00:05:09,310 --> 00:05:13,740
或者你可以对齐居中，或
正当使命中了利润。

107
00:05:13,740 --> 00:05:16,800
因此，这些都是可以使用的所有选项
改变你的文字看起来像，

108
00:05:16,800 --> 00:05:20,120
以及它如何显示在您的网页上。

109
00:05:20,120 --> 00:05:22,180
>> 您的选择不
必须仅标签。

110
00:05:22,180 --> 00:05:25,539
我们之前看到一个body标签
选择器和标签选择器

111
00:05:25,539 --> 00:05:26,580
看起来就像这样。

112
00:05:26,580 --> 00:05:30,020
你的名字标签，然后
定义样式表的标签。

113
00:05:30,020 --> 00:05:32,660
但你也可以做一些事情
所谓的ID选择。

114
00:05:32,660 --> 00:05:34,390
一个ID选择看起来很相似。

115
00:05:34,390 --> 00:05:38,100
但是请注意，现在我没有使用
HTML标记，我使用的，在这种情况下，

116
00:05:38,100 --> 00:05:40,720
#unique或哈希独特。

117
00:05:40,720 --> 00:05:42,930
如果您还记得我们
视频HTML，我们聊

118
00:05:42,930 --> 00:05:45,620
有关如何标记可以有属性。

119
00:05:45,620 --> 00:05:48,340
>> 而一个属性适用
到几乎所有的HTML标签，

120
00:05:48,340 --> 00:05:51,440
但我们并没有谈论它，
一些所谓的ID标签。

121
00:05:51,440 --> 00:05:55,250
因此，这个特殊的CSS将
仅适用于具有HTML标记

122
00:05:55,250 --> 00:05:58,530
一个非常具体的ID，您已经命名。

123
00:05:58,530 --> 00:06:01,000
所以，如果你有地方
在你的代码，在某处

124
00:06:01,000 --> 00:06:06,090
在你的HTML文件，标签和你
指定为属性的标签，

125
00:06:06,090 --> 00:06:09,060
ID等于独特的，这
尤其是样式表

126
00:06:09,060 --> 00:06:15,030
这里将仅适用于间
该标签具有独特的ID。

127
00:06:15,030 --> 00:06:17,180
>> 你也可以做一些事情
所谓一类选择。

128
00:06:17,180 --> 00:06:19,920
因此，除了具有
ID属性，你也可以

129
00:06:19,920 --> 00:06:23,130
添加一个类属性的HTML标签。

130
00:06:23,130 --> 00:06:27,140
而当你使用一个类属性，
它可以应用到多个标签。

131
00:06:27,140 --> 00:06:31,880
所以，如果你有几件事情，
都差不多，也许你想说的话，

132
00:06:31,880 --> 00:06:35,890
开放标签等等，等等，等等，
胡说，班等于学生。

133
00:06:35,890 --> 00:06:38,190
然后这个特定
样式表将适用

134
00:06:38,190 --> 00:06:42,041
以它的类每个标签是学生。

135
00:06:42,041 --> 00:06:44,290
在这种情况下，我们会设置
背景色为黄色，

136
00:06:44,290 --> 00:06:46,706
我们会设置不透明度，其
是我们没有谈论一个标签，

137
00:06:46,706 --> 00:06:52,510
只是涉及如何透明
事情是，到70％，在这种情况下。

138
00:06:52,510 --> 00:06:54,430
>> 有两种选择
写作样式表。

139
00:06:54,430 --> 00:06:56,680
你可以把它们写
直接到HTML

140
00:06:56,680 --> 00:06:59,690
通过将样式表
在风格上标记之间。

141
00:06:59,690 --> 00:07:03,850
而那些风格标签去内
你的网页的head标签。

142
00:07:03,850 --> 00:07:08,240
该或许更优选的方式做
这是写一个单独的.css文件，

143
00:07:08,240 --> 00:07:12,360
然后将其链接到您的
使用link标签记录。

144
00:07:12,360 --> 00:07:14,690
链接标签，再次，是
从超链接不同，

145
00:07:14,690 --> 00:07:16,760
如果从我们的视频回忆的HTML。

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

147
00:07:19,030 --> 00:07:23,900
它有点像相当于
＃包括用于网页编程的。

148
00:07:23,900 --> 00:07:27,140
>> 因此，让我们来看看table.HTML。

149
00:07:27,140 --> 00:07:29,380
如果您还记得我们
HTML视频，我发现

150
00:07:29,380 --> 00:07:32,000
的一个非常一例
简单的乘法

151
00:07:32,000 --> 00:07:35,160
表看起来相当
丑陋，也许有

152
00:07:35,160 --> 00:07:38,650
一个方法，使其具有更好的
CSS，使之实际上看起来

153
00:07:38,650 --> 00:07:41,120
更像一个乘法
表，什么

154
00:07:41,120 --> 00:07:43,730
这不只是粘在一起
没有具体分工

155
00:07:43,730 --> 00:07:45,532
行和列之间。

156
00:07:45,532 --> 00:07:47,490
因此，让我们头以上
CS50 IDE，看一看

157
00:07:47,490 --> 00:07:50,780
在如何将CSS，排序，调整
我们以前开始，

158
00:07:50,780 --> 00:07:53,290
并使其东西好了很多。

159
00:07:53,290 --> 00:07:55,650
>> 所以我们在CS50 IDE
现在，如果不熟悉，

160
00:07:55,650 --> 00:07:58,710
我们会拉起来在这
表HTML页。

161
00:07:58,710 --> 00:08:01,090
Table.HTML基本
刚刚定义的内容

162
00:08:01,090 --> 00:08:05,044
的multiple--它应该是
一个四乘四乘法表。

163
00:08:05,044 --> 00:08:06,210
这是非常简单的。

164
00:08:06,210 --> 00:08:09,410
而且我们认为，这将
看起来很良好的组织。

165
00:08:09,410 --> 00:08:15,277
但事实上，当我们预览该页面，
我们看到，它是一种丑恶的，对不对？

166
00:08:15,277 --> 00:08:16,860
很显然，我们在这里的行和列。

167
00:08:16,860 --> 00:08:18,350
有某种分离。

168
00:08:18,350 --> 00:08:20,040
但它不是一个有意义的分离。

169
00:08:20,040 --> 00:08:23,105
我们没有真正得到
这里太多的信息。

170
00:08:23,105 --> 00:08:25,730
还有的之间没有分离
在术语的行和列

171
00:08:25,730 --> 00:08:28,460
的水平或垂直的规则。

172
00:08:28,460 --> 00:08:31,530
我们或许可以使这
看起来更好一点。

173
00:08:31,530 --> 00:08:32,934
所以让我们试试。

174
00:08:32,934 --> 00:08:34,559
所以，我要在这里关闭此选项卡。

175
00:08:34,559 --> 00:08:37,434
而且我要结束我的table.HTML，
我有另一个版本在这里

176
00:08:37,434 --> 00:08:39,490
所谓table2.HTML。

177
00:08:39,490 --> 00:08:40,655
我们将打开了。

178
00:08:40,655 --> 00:08:42,530
的页面的主体是
几乎相同，

179
00:08:42,530 --> 00:08:44,238
但我已经改变了
在顶部点点。

180
00:08:44,238 --> 00:08:47,132
我会在这里向上滚动。

181
00:08:47,132 --> 00:08:49,340
注意，这一次，我
采用内嵌式的标签。

182
00:08:49,340 --> 00:08:53,550
我已经开了一个风格的标签，而我现在
定义只是里面的CSS样式表

183
00:08:53,550 --> 00:08:54,310
它。

184
00:08:54,310 --> 00:08:56,310
我有一个样式表，上面写着，表。

185
00:08:56,310 --> 00:08:58,170
这是我的标签选择器。

186
00:08:58,170 --> 00:09:01,340
我不使用点或散列，
我会，如果我做

187
00:09:01,340 --> 00:09:03,710
是使用一个ID或类选择。

188
00:09:03,710 --> 00:09:06,190
我有一个标签选择这里 - 表。

189
00:09:06,190 --> 00:09:10,090
这种风格会
适用于每个表的标签。

190
00:09:10,090 --> 00:09:14,950
显然，我想提出一个
像素宽，固体蓝色边框，

191
00:09:14,950 --> 00:09:15,779
在我的表。

192
00:09:15,779 --> 00:09:18,320
这听起来像它可能会
帮助的情况下，对不对？

193
00:09:18,320 --> 00:09:20,320
我们将有
事情看起来好多了。

194
00:09:20,320 --> 00:09:21,190
所以，这是好的。

195
00:09:21,190 --> 00:09:23,540
在文体上，我只是
嵌入我的样式表在这里。

196
00:09:23,540 --> 00:09:25,100
这当然是一个
可以接受的方式来做到这一点。

197
00:09:25,100 --> 00:09:26,391
让我们来看看这是什么样子。

198
00:09:26,391 --> 00:09:29,790
所以，我会回去到这里，和
我会预览我的table2.HTML。

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
嗯，这并不完全是我想要的，
但它正是我们提出的要求。

201
00:09:36,470 --> 00:09:39,530
我们说，这种风格
要应用到我们的餐桌。

202
00:09:39,530 --> 00:09:43,810
我们的餐桌现在有一个像素
周围宽阔，坚实的蓝色边框。

203
00:09:43,810 --> 00:09:46,237
我们没有真正得到
在表格单元格。

204
00:09:46,237 --> 00:09:47,570
我们才刚刚在餐桌上。

205
00:09:47,570 --> 00:09:49,310
所以CSS工作。

206
00:09:49,310 --> 00:09:51,890
它应用了
样式表到我们的餐桌。

207
00:09:51,890 --> 00:09:53,981
但并没有完全做到
我们希望它做什么。

208
00:09:53,981 --> 00:09:55,730
我们怎么能这么做
我们希望它做什么？

209
00:09:55,730 --> 00:09:59,287
>> 好吧，让我们来看看在一个多
这个版本的中table3.HTML。

210
00:09:59,287 --> 00:10:00,870
所以，我只是要关闭这些标签。

211
00:10:00,870 --> 00:10:03,890
我要回去了这里我
文件树，并开辟table3.HTML。

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
再次，它会好看
类似此处在开始。

214
00:10:10,350 --> 00:10:14,460
但通知，这一次，而不是使用
嵌入权有一个样式表，

215
00:10:14,460 --> 00:10:18,870
我要去一个链接
使用样式表的链接标签。

216
00:10:18,870 --> 00:10:22,480
所以我显然是连接在
样式表叫tables.CSS，

217
00:10:22,480 --> 00:10:25,090
这也等于
样式表仅仅是指：好，

218
00:10:25,090 --> 00:10:28,645
文件相对于该是什么就是什么
我doing--的是，我是一个样式表

219
00:10:28,645 --> 00:10:29,821
用我的网页。

220
00:10:29,821 --> 00:10:32,320
所以，如果我真的想看到什么
我用CSS来这里干什么，

221
00:10:32,320 --> 00:10:35,010
我需要去开了
table.CSS文件中。

222
00:10:35,010 --> 00:10:37,490
所以我们要回去在这里
再次我们的文件树。

223
00:10:37,490 --> 00:10:38,660
有table.CSS。

224
00:10:38,660 --> 00:10:40,490
我们将弹出打开。

225
00:10:40,490 --> 00:10:43,070
现在我们看到了一点CSS的。

226
00:10:43,070 --> 00:10:45,630
很显然，我有一对夫妇
事情怎么回事。

227
00:10:45,630 --> 00:10:48,950
我显然希望把五
像素宽，纯红色边框，

228
00:10:48,950 --> 00:10:50,287
在我的桌子。

229
00:10:50,287 --> 00:10:52,870
我们已经知道，这是怎么回事
只是去在外线。

230
00:10:52,870 --> 00:10:56,180
我们看到，在table2.HTML。

231
00:10:56,180 --> 00:10:58,770
每行，我
显然想指定

232
00:10:58,770 --> 00:11:01,950
该行高度为50像素高。

233
00:11:01,950 --> 00:11:05,680
因此，对于每一行，记
这就是tr标签呢，

234
00:11:05,680 --> 00:11:08,550
我让它成为50像素高。

235
00:11:08,550 --> 00:11:09,804
>> 最后，我有这样的评论。

236
00:11:09,804 --> 00:11:11,470
这就是我们如何在CSS中的注释。

237
00:11:11,470 --> 00:11:16,174
这是非常相似的，抓住块
注释语法斜线明星。

238
00:11:16,174 --> 00:11:17,090
所有你想要的文字。

239
00:11:17,090 --> 00:11:19,470
有没有斜线斜线虽然CSS。

240
00:11:19,470 --> 00:11:23,400
对于短行内注释，我们有
在这里使用这种特殊的格式。

241
00:11:23,400 --> 00:11:26,830
它看起来像我做一个
很多事情在我的TD标记。

242
00:11:26,830 --> 00:11:29,710
记住TD标签，或表
数据，这真的只是

243
00:11:29,710 --> 00:11:32,210
内的列
我们的行，显然

244
00:11:32,210 --> 00:11:35,090
每段数据的
在我的表，我想

245
00:11:35,090 --> 00:11:38,850
设置背景颜色
是黑色的，颜色为白色，

246
00:11:38,850 --> 00:11:40,320
颜色为前景色。

247
00:11:40,320 --> 00:11:42,360
因此，这将是
我的网页的文本。

248
00:11:42,360 --> 00:11:45,140
我想大字体，22
字体，我想

249
00:11:45,140 --> 00:11:47,001
它是字体系列，乔治亚州。

250
00:11:47,001 --> 00:11:48,750
所以我不打算
有默认的字体。

251
00:11:48,750 --> 00:11:51,820
我要去指定格鲁吉亚，这
是那些网络安全的字体之一

252
00:11:51,820 --> 00:11:53,830
我们已经看到过。

253
00:11:53,830 --> 00:11:57,284
我希望我的文字对齐
集中，在框的中央，

254
00:11:57,284 --> 00:11:59,450
我不希望它被抛
对齐或右对齐。

255
00:11:59,450 --> 00:12:03,461
我希望我的列宽
为50个像素宽为好。

256
00:12:03,461 --> 00:12:05,210
让我们来看看
这是什么样子，

257
00:12:05,210 --> 00:12:07,470
看看这也许是一种进步。

258
00:12:07,470 --> 00:12:12,890
所以我要去table3.HTML，这
召回，包括table.CSS为纽带，

259
00:12:12,890 --> 00:12:14,830
我们会进行预览。

260
00:12:14,830 --> 00:12:16,800
这是好多了，对不对？

261
00:12:16,800 --> 00:12:20,004
这实际上是开始寻找一个
很多更像是一个乘法表。

262
00:12:20,004 --> 00:12:21,920
我有一个红色的边框
在我的桌子，但现在

263
00:12:21,920 --> 00:12:26,700
我还指定了
每行50个像素宽，

264
00:12:26,700 --> 00:12:30,220
或者是50个像素tall--借口
我 - 每列50个像素宽。

265
00:12:30,220 --> 00:12:34,251
每一列中的数据，并且只有
中的数据，有一个黑色的背景。

266
00:12:34,251 --> 00:12:36,000
所以这就是为什么那些
白线在那里。

267
00:12:36,000 --> 00:12:38,836
因为在该空间
所有这些单元之间，

268
00:12:38,836 --> 00:12:40,710
它不是在边界
与本身，它只是

269
00:12:40,710 --> 00:12:43,170
我只填写
细胞，这实际上

270
00:12:43,170 --> 00:12:46,310
使表的边界，其中
显然确实存在，一直以来，它

271
00:12:46,310 --> 00:12:47,887
只是细白线。

272
00:12:47,887 --> 00:12:48,720
现在，他们是可见的。

273
00:12:48,720 --> 00:12:50,380
现在，他们突然在屏幕上。

274
00:12:50,380 --> 00:12:52,920
所以这是一个非常简单的
样式表，我申请，

275
00:12:52,920 --> 00:12:56,850
现在我的表看起来更像
一个四乘四乘法表，

276
00:12:56,850 --> 00:13:00,950
而不是仅仅混乱的烂摊子，其中
一切是显然的行和列，

277
00:13:00,950 --> 00:13:03,717
但不是超级良好的组织。

278
00:13:03,717 --> 00:13:06,800
我们真的只是冰山一角
你可以用CSS在这里做什么。

279
00:13:06,800 --> 00:13:10,330
幸运的是，CSS文件
是非常简单的。

280
00:13:10,330 --> 00:13:14,000
您将使用它的几个
属性，相当频繁。

281
00:13:14,000 --> 00:13:16,087
我们谈到的那些
此前在这部影片。

282
00:13:16,087 --> 00:13:18,170
有几种您
可能不会使用所有。

283
00:13:18,170 --> 00:13:19,469
而这，也行。

284
00:13:19,469 --> 00:13:22,010
但是，仅仅知道，有一个
大量的文档在那里。

285
00:13:22,010 --> 00:13:25,110
因此，即使我们没有面面俱到，
你肯定不会留在你自己的。

286
00:13:25,110 --> 00:13:26,780
但是，CSS是真的很好玩
尝试。

287
00:13:26,780 --> 00:13:29,040
而且我会强烈建议您
玩弄你的网页，

288
00:13:29,040 --> 00:13:32,180
看你如何让他们
外观和感觉，以改善用户

289
00:13:32,180 --> 00:13:34,790
访问你的页面的经验。

290
00:13:34,790 --> 00:13:35,710
我是道格·劳埃德。

291
00:13:35,710 --> 00:13:37,980
这是CS50。

292
00:13:37,980 --> 00:13:40,151