1
00:00:00,150 --> 00:00:07,080
 

2
00:00:08,000 --> 00:00:20,160
今度は、H-1と3歳のテキストの色を変えましょう。暗いデフォルトのブートストラップカラーがここに入り、H-1カラーの白とH-3カラーの白をリフレッシュできます。

3
00:00:20,550 --> 00:00:22,790
そして、私たちはそれと同じように白いテキストを取得します。

4
00:00:22,950 --> 00:00:29,820
しかし、これらの2つが同じでH-1のコンマH-3を使用していて、それらが両方とも白になるため、これらを組み合わせることもできます。

5
00:00:29,820 --> 00:00:31,660
 

6
00:00:32,010 --> 00:00:34,750
コンマがあるときはいつでも、異なるグループを選択するだけです。

7
00:00:34,770 --> 00:00:40,820
だから、双子はすべて年齢が3歳で、まったく同じように見えます。

8
00:00:41,400 --> 00:00:50,340
しかし、私たちはこれをさらに単純化して、体内のすべてをカラーホワイトにすることもできます。

9
00:00:50,340 --> 00:00:55,350
そして、問題が変わるかもしれないと思うかもしれないし、ボタンが変わるかもしれないか、またはナビバーが、より具体的であることを覚えていてください。

10
00:00:55,350 --> 00:00:56,790
 

11
00:00:56,790 --> 00:01:02,760
 

12
00:01:02,760 --> 00:01:08,130
 

13
00:01:08,190 --> 00:01:14,780
私たちにはBootstrapのクラスがありますが、これはH-1とH-3です。クラスやIDはなく、ボディカラーをH1に設定することで独自のスタイルでオーバーライドしやすくなっています3歳はその色を継承し、それ以外はすべて継承しました。

14
00:01:14,850 --> 00:01:16,030
それは単にオーバーライドされました。

15
00:01:16,050 --> 00:01:21,730
だから、もし私たちがこのボタンを言うと、私たちは見てみましょう。

16
00:01:22,650 --> 00:01:30,860
選択すると、色がこの色に設定されていることがわかります。ボタンのデフォルトでは3 3 3です。

17
00:01:30,990 --> 00:01:38,460
しかし、私たちがスクロールし続けると、ここのボディが色を白に設定していることがわかります。

18
00:01:38,460 --> 00:01:40,520
 

19
00:01:40,650 --> 00:01:41,390
大丈夫。

20
00:01:41,970 --> 00:01:44,900
もう一度彼らは両方とも白であると言いました。

21
00:01:44,910 --> 00:01:46,980
さて、フォントのサイズについて考えてみましょう。

22
00:01:47,160 --> 00:01:48,870
H-1も同様です。

23
00:01:48,930 --> 00:01:51,490
私たちはそれが現在ではない折り畳まれることを望みます。

24
00:01:51,690 --> 00:01:58,260
 

25
00:01:58,290 --> 00:02:03,600
それは大胆にする必要があり、親要素よりも5倍大きい5

26
00:02:06,540 --> 00:02:11,570
cmsにしておきたいので、それぞれを選択して、フォントの太さを700にします。これは、太字のリフレッシュを使用する方法です。

27
00:02:11,970 --> 00:02:12,860
あなたはそれを大胆に見ることができます。

28
00:02:12,890 --> 00:02:21,100
今度はそれをもっと大きくして、フォントサイズ5 E-Mにしましょう。

29
00:02:21,270 --> 00:02:24,480
今戻ってそこに行きます。

30
00:02:24,680 --> 00:02:25,880
だからこそ近づいている。

31
00:02:25,880 --> 00:02:32,230
今、H1とH-3の間のこの比率はまったく同じに見えます。

32
00:02:32,250 --> 00:02:37,200
H-3に何もする必要はありません。イメージが私たちが望むように動作するようにする必要があります。

33
00:02:37,980 --> 00:02:41,460
そしてそれをするために私はあなたに以前見たことのないものを見せます。

34
00:02:41,730 --> 00:02:48,470
私は暗闇を右に動かすつもりで、もし私が老人を要素または身体から検査すると、彼らは両方がページの終わりの前に止まることがわかります。

35
00:02:48,480 --> 00:02:52,190
 

36
00:02:52,200 --> 00:02:53,280
だからここで

37
00:02:53,430 --> 00:02:55,500
それが私の文書の時代の終わりです。

38
00:02:55,500 --> 00:03:02,520
 

39
00:03:02,520 --> 00:03:09,180
 

40
00:03:09,180 --> 00:03:09,860
だから、身体をカバーするようにイメージを伝え、それをカバーするバックグラウンドのサイズとバックグラウンドの位置を中央にすると、ボディのサイズが考慮されます。

41
00:03:10,080 --> 00:03:16,920
これを解決するためには、HTL要素の高さを100％にすることです。これは、ドキュメントウィンドウ全体だけであるコンテナの100％を占めることを意味します。

42
00:03:17,280 --> 00:03:22,420
 

43
00:03:23,150 --> 00:03:30,450
男性の身長は100％です。戻ってきます。

44
00:03:30,840 --> 00:03:33,580
今すぐフルスクリーンにしてリフレッシュしましょう。

45
00:03:33,950 --> 00:03:37,630
私たちのイメージは、私たちがそれを期待している方法で働き、私は縮小します。

46
00:03:37,860 --> 00:03:40,260
そしてそれは私にも良く見えます。

47
00:03:40,260 --> 00:03:43,300
ここでは、注目すべき2つの主なことが残っています。

48
00:03:43,430 --> 00:03:45,470
最初のものはHです。 R. それは、私たちがずっと小さくなっていると思われるほど広いです。

49
00:03:45,540 --> 00:03:50,540
そして、ここでもフォントに焦点を当てたいと思います。

50
00:03:51,180 --> 00:03:54,010
うまくアートワークを選んで開始し、我々がしたいのは400ピクセルのそれを与えることです。

51
00:03:54,570 --> 00:04:01,170
だから私たちのC Sでは、hを400ピクセルで下から選択します。

52
00:04:01,170 --> 00:04:12,410
そこに行く。

53
00:04:12,450 --> 00:04:13,550
 

54
00:04:13,560 --> 00:04:18,330
私がやっているもう一つのことは、あなたが気づいていないかも知れないかもしれない、ちょっと卑劣なことです。私はここに入り、上にフォルダーを与えます。

55
00:04:18,330 --> 00:04:23,460
1ピクセルのソリッド。

56
00:04:23,460 --> 00:04:26,150
それから彼らはここに8 8 8 8の色を持っています。

57
00:04:26,250 --> 00:04:31,620
そして、ボーダーの底も同様に1ピクセルのソリッドで、これは透明な色になります。

58
00:04:32,220 --> 00:04:41,920
0ゼロゼロゼロ点2。

59
00:04:41,960 --> 00:04:46,610
だから、これは影の影響を与えません。

60
00:04:46,830 --> 00:04:49,530
だから注意してください。

61
00:04:49,990 --> 00:04:50,800
それは本当に見るのは難しいです。

62
00:04:50,820 --> 00:04:52,720
 

63
00:04:52,830 --> 00:04:58,560
 

64
00:04:58,560 --> 00:05:05,970
私はスクリーンキャストでピックアップするかどうか分からないが、私たちが持っているのは国境であり、境界線のすぐ下に明るい灰色の線があり、少し影があるように見える。より明るい色。

65
00:05:05,970 --> 00:05:08,490
OK。

66
00:05:08,900 --> 00:05:09,140
 

67
00:05:09,150 --> 00:05:13,770
だから私を信じると、それを見ることはできません。あるいは、あなたが背景のイメージを取り除くことができれば、それもそこに見えやすくなります。

68
00:05:13,770 --> 00:05:15,050
次は、私が楽しかった素晴らしいアイコンに焦点を当てましょう。

69
00:05:16,050 --> 00:05:20,690
だから私はそれを開いている。

70
00:05:20,690 --> 00:05:21,510
楽しい。

71
00:05:21,500 --> 00:05:21,780
驚くばかり。

72
00:05:21,780 --> 00:05:22,320
知っている。

73
00:05:22,350 --> 00:05:23,180
そしてここでCDを入手します。

74
00:05:23,570 --> 00:05:25,980
開始するをクリックするとそこにコピーできるCDNがあります。

75
00:05:26,370 --> 00:05:30,970
 

76
00:05:30,990 --> 00:05:39,390
それを私たちのアプリケーションに入れて、これを一番上に保存してから、実際のアイコンを見てみましょう。

77
00:05:39,380 --> 00:05:40,370
私たちが使ったことが分かっている最初のものはPAです。

78
00:05:40,980 --> 00:05:45,030
そしてそれをするために必要なのは、高級ECO F A F AダッシュPAです。

79
00:05:45,930 --> 00:05:51,310
だから私はボタンの中に入れます。

80
00:05:51,660 --> 00:05:53,630
私が始めた直前にボタンに行くと、私はそれを加えました。

81
00:05:54,030 --> 00:05:59,350
今戻ってきたら、小さなボタンがあるかどうかを確認できます。次に手のひらプリントがあり、次にサインアップとログインのためのアイコンが2つあります。

82
00:05:59,430 --> 00:06:04,590
 

83
00:06:05,120 --> 00:06:08,820
そしてその2人は私が彼らのことを覚えています。

84
00:06:09,500 --> 00:06:11,760
私はあなたがあなたが別のアイコンを追加したいと知っていることを書き留めた後にサインアップするために次にここでそれを行うつもりです。

85
00:06:11,790 --> 00:06:19,550
このクラスはF-8 PAではなくFです。 A. ダッシュユーザーダッシュPlusはプラス記号付きのアイコンを表示し、ログインするのはプラスなしのものと同じです。

86
00:06:19,860 --> 00:06:29,180
 

87
00:06:29,190 --> 00:06:34,880
だからダッシュユーザーと私たちは、これらの2つのアイコンがあります。

88
00:06:34,920 --> 00:06:40,160
あなたが気付いていないかもしれないもう一つのことが、テキストの影です。

89
00:06:40,250 --> 00:06:44,840
ここにはすべてのテキストの周りに影があり、そこにそれを見ることができます。

90
00:06:45,030 --> 00:06:52,650
それはH-1とH-3の周りにあり、テクニカル・シャドーはSSのテキスト・ダッシュ・シャドウで設定できるものです。

91
00:06:52,640 --> 00:07:01,350
そして、そこにはたくさんの断片があります。

92
00:07:02,060 --> 00:07:04,010
ここで、オフセットXとオフセットYを座っていることがわかります。

93
00:07:04,130 --> 00:07:08,040
それで、その言葉からどのくらい離れて影が行くべきか。

94
00:07:08,120 --> 00:07:11,680
次に、そのぼかしの半径も設定しています。基本的にどのくらい厚くする必要がありますか。

95
00:07:11,810 --> 00:07:16,240
そして、私が使っている色と影はちょっと複雑です。

96
00:07:16,500 --> 00:07:21,430
多くの部分がありますので、CSSAファイルに一度に1つずつ入力してください。

97
00:07:21,480 --> 00:07:26,930
したがって、コンテンツdivの内側にテキストダッシュシャドウが追加され、最初のダッシュシャドウが追加されます。

98
00:07:26,970 --> 00:07:34,620
 

99
00:07:34,620 --> 00:07:44,250
ゼロピクセル4ピクセル3ピクセルと私はそれを赤くすることで始めることは本当に明白になります、私が最初に追加している影がリフレッシュされます。

100
00:07:45,500 --> 00:07:48,210
 

101
00:07:48,260 --> 00:07:57,860
今度はカンマとインデントを付けて2番目のものを追加してから、0ピクセル8ピクセル13ピクセル、次にここでオレンジ色にしてみましょう。

102
00:07:59,910 --> 00:08:06,460
 

103
00:08:07,350 --> 00:08:13,890
 

104
00:08:15,480 --> 00:08:23,810
このぼんやりとしたものが鮮やかなオレンジ色をしていることが分かります。次に、3番目の影があります.0ピクセルです。この最初の数字はXオフセット、次にyオフセットは18ピクセル、次に23ピクセルは半径です。これを黄色にして、明るい赤のタイトルの影があることがわかります。

105
00:08:23,820 --> 00:08:27,540
 

106
00:08:32,120 --> 00:08:35,490
そして少し離れたオレンジ色のもの。

107
00:08:35,490 --> 00:08:37,730
そして、はるかにぼやけて、はるかに広い黄色のもの。

108
00:08:37,830 --> 00:08:41,670
だから我々はそれらの色を変更したい。

109
00:08:41,700 --> 00:08:43,650
私たちはそれに取り組んでいません。

110
00:08:43,640 --> 00:08:45,370
だから色は少し刺激的です。

111
00:08:45,450 --> 00:08:48,160
最初の1つ。

112
00:08:48,210 --> 00:08:49,900
ゼロゼロゼロゼロ0。 4。

113
00:08:50,160 --> 00:08:54,740
次のものは0の代わりに非常に似ています。 4 0。 1。

114
00:08:54,770 --> 00:09:01,550
そしてもう1つは0です。 1。

115
00:09:01,910 --> 00:09:06,210
だからRを使う。 G. B-A灰色の異なる色合いを設定しています。

116
00:09:06,210 --> 00:09:10,870
そしてそこに行く。

117
00:09:11,970 --> 00:09:12,560
それほどエキサイティングではありませんが、うまくいけば、ここでそれを見ることができます

118
00:09:12,600 --> 00:09:16,510
それははるかに微妙ですが、ちょうどページに深みを少し追加します。

119
00:09:16,560 --> 00:09:21,010
すばらしいです。

120
00:09:21,060 --> 00:09:21,330
それだけで私たちがする必要があります。

121
00:09:21,330 --> 00:09:22,830
私は戻って、ちょうどいくつかを包んでみましょう。

122
00:09:23,250 --> 00:09:26,040
 

123
00:09:26,040 --> 00:09:31,200
私がここで大切にしたいのは、ブートストラップを使用してそれに頼ることができるということですが、私たちはすべてのスタイルに頼っているわけではありません。

124
00:09:31,200 --> 00:09:32,300
だから、私たちはnav

125
00:09:32,340 --> 00:09:36,540
barを同じように保ちましたが、最後のビデオではnav barの色を変更する方法を示しましたが、背景イメージを追加したフォントを変更しました。

126
00:09:36,540 --> 00:09:40,760
 

127
00:09:40,770 --> 00:09:45,960
だから、基本的な基礎としてブートストラップを使用して、すべてのスタイルを一番上に追加しました。

128
00:09:46,430 --> 00:09:47,730
しかし、私は、ほんの数行のコードで比較的尊敬できるものを作ったと思います。

129
00:09:47,850 --> 00:09:52,540
そして、正直なところ、この1つのテキストのすべての太った部分のシャドーラインにしましょう。

130
00:09:52,640 --> 00:09:56,580
驚くばかり。

131
00:09:56,750 --> 00:09:57,310
だから私たちはサイトを比較的良く見せてくれました。

132
00:09:57,440 --> 00:10:00,230
私たちは今のところブートストラップで終わっています。

133
00:10:00,270 --> 00:10:01,900
次に、次のユニットでJavascriptに移動します。これは本当にエキサイティングです。

134
00:10:01,980 --> 00:10:05,460
 

135
00:10:05,690 --> 00:10:10,680
私たちはJavascriptだけに焦点を合わせることができるようにちょっとした面白いサイトやものを作成することから離れます。

136
00:10:10,670 --> 00:10:12,670
 

137
00:10:12,810 --> 00:10:16,910
しかし、その後、私たちはすべてを集めて、美しいサイトを作って、実際に見栄えの良いものを作っていきます。

138
00:10:17,040 --> 00:10:18,560
それですぐに、このユニットを楽しんだことをうまく楽しんだブートストラップが登場します。

139
00:10:18,570 --> 00:10:22,160
そして、いつものように質問があればコードをダウンロードすることをお勧めします。

140
00:10:22,350 --> 00:10:25,900
このビデオの説明にあります。

141
00:10:25,890 --> 00:10:27,950
さて、次のユニットを見るよ

142
00:10:27,960 --> 00:10:29,060