1
00:00:00,000 --> 00:00:05,660
>> [音楽再生]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD：それでは、もう一つを見てみましょう
ビデオはもう一つの言語について話をします。

3
00:00:08,740 --> 00:00:10,800
今回は、CSSについて話しましょう​​。

4
00:00:10,800 --> 00:00:13,460
略ですだから、CSS、
カスケードスタイルシート、

5
00:00:13,460 --> 00:00:16,149
我々が使用する別の言語です
ウェブサイトを構築するとき。

6
00:00:16,149 --> 00:00:17,190
このようにそれについて考えてみよう。

7
00:00:17,190 --> 00:00:20,900
HTMLは、我々は整理するために使用するものである場合
私たちは私たちのページに配置するコンテンツ、

8
00:00:20,900 --> 00:00:25,390
CSSは、私たちが一般的に使用するツールです
当社のウェブサイトがどのように見えるかをカスタマイズするには、

9
00:00:25,390 --> 00:00:30,410
どのようにユーザーエクスペリエンス本当に
当社のウェブサイトとの相互作用、です。

10
00:00:30,410 --> 00:00:32,535
>> HTML、CSSに似ています
ないプログラミング言語。

11
00:00:32,535 --> 00:00:33,451
これは、ロジックを持っていません。

12
00:00:33,451 --> 00:00:34,595
これは、変数を持っていません。

13
00:00:34,595 --> 00:00:38,890
それは、その任意の並べ替えを持っていません
Cが行うフロー関連のもの。

14
00:00:38,890 --> 00:00:40,150
これは、スタイリングの言語です。

15
00:00:40,150 --> 00:00:42,810
そして、その構文はかなりあります
シンプルな、とだけ説明

16
00:00:42,810 --> 00:00:46,240
どのように私たちの要素
ページには、特定のHTMLを持っています

17
00:00:46,240 --> 00:00:48,190
要素を変更する必要があります。

18
00:00:48,190 --> 00:00:51,170
そのために、あなたがいない場合
まだ、HTML上の私たちのビデオを見

19
00:00:51,170 --> 00:00:53,290
またはに慣れていません
一般的に、HTML、あなたは

20
00:00:53,290 --> 00:00:57,430
そのを見てすることができます
まず、CSSのこの議論のため

21
00:00:57,430 --> 00:01:00,700
依存しようとしています
HTMLの知識。

22
00:01:00,700 --> 00:01:03,740
>> だからここは本当にです
シンプルなCSSスタイルシート。

23
00:01:03,740 --> 00:01:06,480
あなたは決してきない場合でも
前のCSSを使ってプログラム、

24
00:01:06,480 --> 00:01:10,624
私はあなたが把握することができますかなり確信しています
まさにこのスタイルシートはありません。

25
00:01:10,624 --> 00:01:11,290
それは何をするのか？

26
00:01:11,290 --> 00:01:15,470
さて、私たちのウェブの身体に適用されます
ページ、bodyタグの間のすべてのもの

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
色を識別できることを思い出してください
3 16進数のセットで

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
代わりに、青色または緑色または黒色の使用、
六角の6桁は、その後ポンドを使用して、

66
00:03:15,520 --> 00:03:18,310
それが私たちを与えるだろう
6桁の色。

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
そして、あなたは同様にそれを行うことができ
キーワードおよびまたは6桁のHexと。

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
我々はそれについて話をするつもりはありません
非常に特定のフォントを定義するためのhere--

91
00:04:27,270 --> 00:04:28,980
あなたのページにそれを埋め込みます。

92
00:04:28,980 --> 00:04:30,620
また、一般的な名前を使用することができます。

93
00:04:30,620 --> 00:04:33,540
ウェブセーフフォントがたくさんあり​​ます
そのCSSで事前に定義されています。

94
00:04:33,540 --> 00:04:36,352
そして、あなたは、Microsoftのユーザーの場合
過去20年間で事務所、

95
00:04:36,352 --> 00:04:38,810
おそらく精通しています
これらのWebセーフフォントの多く

96
00:04:38,810 --> 00:04:44,640
すでに、のTimes New Roman、Arialの、
新しい、グルジア、Tahomaの、MS Pゴシックを、宅配便

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

98
00:04:45,470 --> 00:04:47,170
これらは、すべてのWebセーフフォントと考えられています。

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タグにclass属性を追加します。

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
>> 2つのオプションがあります
スタイルシートを書きます。

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
そして、それらのスタイルタグが内部に行きます
あなたのWeb​​ページのheadタグ。

142
00:07:03,850 --> 00:07:08,240
行うには、おそらくより好ましい方法
それは、別の.cssファイルを作成することです、

143
00:07:08,240 --> 00:07:12,360
して、あなたにリンク
リンクタグを使用してドキュメント。

144
00:07:12,360 --> 00:07:14,690
リンクタグは、再び、あります
ハイパーリンクとは異なり、

145
00:07:14,690 --> 00:07:16,760
あなたは私達のビデオからHTMLを思い出します。

146
00:07:16,760 --> 00:07:19,030
リンクタグがどのように我々です
別のファイルに引き出します。

147
00:07:19,030 --> 00:07:23,900
この種の同等のような
Webプログラミングのための#include。

148
00:07:23,900 --> 00:07:27,140
>> それでは、table.HTMLを見てみましょう。

149
00:07:27,140 --> 00:07:29,380
あなたは私たちからリコールした場合
私が示したHTML形式のビデオ、

150
00:07:29,380 --> 00:07:32,000
非常の例
単純な乗算

151
00:07:32,000 --> 00:07:35,160
かなり見えたテーブル
醜い、多分あります

152
00:07:35,160 --> 00:07:38,650
とのより良い、それを作るための方法
CSSは、それが実際に見えるようにします

153
00:07:38,650 --> 00:07:41,120
乗算のようなより
テーブル、または何か

154
00:07:41,120 --> 00:07:43,730
それはただ一緒に固定されていません
実際の部門と

155
00:07:43,730 --> 00:07:45,532
行と列の間。

156
00:07:45,532 --> 00:07:47,490
それでは、に向かうましょう
CS50 IDEは、と見てみます

157
00:07:47,490 --> 00:07:50,780
CSSは、一種の、微調整することができますどのように
私たちは前に開始しました、

158
00:07:50,780 --> 00:07:53,290
その多くの良いものにします。

159
00:07:53,290 --> 00:07:55,650
>> だから我々は、CS50のIDEにしています
今、および不慣れな場合は、

160
00:07:55,650 --> 00:07:58,710
我々はこの中でプルアップします
テーブルHTMLページこと。

161
00:07:58,710 --> 00:08:01,090
基本的にTable.HTML
ただ内容を定義します

162
00:08:01,090 --> 00:08:05,044
それがあることになっていたmultiple--の
4九九によって4。

163
00:08:05,044 --> 00:08:06,210
それはかなり簡単です。

164
00:08:06,210 --> 00:08:09,410
そして、私たちはそれはと思うだろう
かなりよく組織見えます​​。

165
00:08:09,410 --> 00:08:15,277
しかし、実際には、私たちはこのページをプレビューすると、
我々は正しい、それは一種の醜いことを参照してください？

166
00:08:15,277 --> 00:08:16,860
明らかに、我々はここで行と列を持っています。

167
00:08:16,860 --> 00:08:18,350
そこ分離のいくつかの並べ替え。

168
00:08:18,350 --> 00:08:20,040
しかし、それは意味の分離はありません。

169
00:08:20,040 --> 00:08:23,105
私たちは、実際に取得していません
ここであまりにも多くの情報。

170
00:08:23,105 --> 00:08:25,730
そして、の間には分離はありません
用語の行と列

171
00:08:25,730 --> 00:08:28,460
水平または垂直のルール。

172
00:08:28,460 --> 00:08:31,530
我々は、おそらくこれを作ることができます
少し良く見えます。

173
00:08:31,530 --> 00:08:32,934
それでは、試してみましょう。

174
00:08:32,934 --> 00:08:34,559
だから私はここまでこのタブを閉じるつもりです。

175
00:08:34,559 --> 00:08:37,434
そして私は、私のtable.HTMLを閉じるつもりです
そして、私はここで別のバージョンを持っています

176
00:08:37,434 --> 00:08:39,490
table2.HTMLと呼ばれます。

177
00:08:39,490 --> 00:08:40,655
我々はそれを開くでしょう。

178
00:08:40,655 --> 00:08:42,530
ページの本文です
ほとんど同じ、

179
00:08:42,530 --> 00:08:44,238
私は変更しました
上部に少し。

180
00:08:44,238 --> 00:08:47,132
そして、私はここまでスクロールします。

181
00:08:47,132 --> 00:08:49,340
この時間は、私はいることに注意してください
埋め込まれたスタイルタグを使用して。

182
00:08:49,340 --> 00:08:53,550
私はスタイルタグを開いた、と私は今です
すぐ内側のCSSスタイルシートを定義します

183
00:08:53,550 --> 00:08:54,310
それの。

184
00:08:54,310 --> 00:08:56,310
私は、テーブルを言うスタイルシートを持っています。

185
00:08:56,310 --> 00:08:58,170
それは私のタグセレクタです。

186
00:08:58,170 --> 00:09:01,340
私は、ドットやハッシュを使用していませんよ、
これは私ならば、私はやっているだろう

187
00:09:01,340 --> 00:09:03,710
IDやクラスセレクタを使用していました。

188
00:09:03,710 --> 00:09:06,190
私は、タグセレクタhere--テーブルがあります。

189
00:09:06,190 --> 00:09:10,090
このスタイルはに起こっています
すべてのテーブルタグに適用されます。

190
00:09:10,090 --> 00:09:14,950
どうやら私は1つを配置します
ピクセル幅、固体青い枠線、

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
私たちのテーブルには、1つのピクセルを持っています
その周りに広い、固体ブルーのボーダー。

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
この井戸は等しいです
スタイルシートは、単に、よくmeans--

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
私は明らかに5を入れたいです
ピクセル幅、赤色の固体境界線、

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
私は、ジョージア州を指定しようとしているんです
それらのWebセーフフォントのいずれかであります

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
またはそれは言い訳をtall-- 50ピクセルです
me--各列は、50ピクセルの幅です。

265
00:12:30,220 --> 00:12:34,251
各列のデータ、およびのみ
データは、黒のバックグラウンドを持っています。

266
00:12:34,251 --> 00:12:36,000
だから、なぜそれらのです
白線があります。

267
00:12:36,000 --> 00:12:38,836
空間であるため
それらの細胞のすべての間で、

268
00:12:38,836 --> 00:12:40,710
それはに国境はありません
それ自体は、それだけです

269
00:12:40,710 --> 00:12:43,170
私は中に充填してい
細胞、実際に

270
00:12:43,170 --> 00:12:46,310
テーブルの枠線を作り、これ
明らかに、すべてに沿って、それを存在しませんでした

271
00:12:46,310 --> 00:12:47,887
ただ細い白線ました。

272
00:12:47,887 --> 00:12:48,720
今、彼らは見えています。

273
00:12:48,720 --> 00:12:50,380
今、彼らは画面上にオフにポップ。

274
00:12:50,380 --> 00:12:52,920
そして、これは非常に簡単です
私が適用したスタイルシート、

275
00:12:52,920 --> 00:12:56,850
そして今、私のテーブルには、より多くのように見えます
4×4の乗算テーブル、

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
そして、私は強くあなたを励まします
あなたのWeb​​ページをいじって、

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