1
00:00:01,020 --> 00:00:06,030
このビデオでは、3つのCSSAセレクタに焦点を当てます。

2
00:00:06,030 --> 00:00:08,490
それらはクラス内の要素IDです。

3
00:00:08,610 --> 00:00:11,610
したがって、要素を選択するための選択肢が増えています。

4
00:00:11,730 --> 00:00:15,630
私たちは後でそれらについて学びますが、始めにこれらの3つに焦点を絞るつもりです。

5
00:00:15,960 --> 00:00:21,980
 

6
00:00:21,980 --> 00:00:28,370
そして私がセレクターと言うとき、この一般的なルールに戻って考えてみましょう。早い段階でCSSAを開始しました。セレクタがある場所、中括弧、そしていくつかのプロパティがあります。

7
00:00:28,860 --> 00:00:32,660
ここではいくつかのセレクタを見てみましょう。

8
00:00:33,030 --> 00:00:37,440
そして、我々が実際にやるべきことは、本当にシンプルなリストを作ることです。

9
00:00:38,340 --> 00:00:39,980
だから私は新しいファイルを作るつもりです。

10
00:00:40,170 --> 00:00:44,580
私はそれを保存するつもりです、私はそれを持っていれば、HMOを追加し、HMOを追加してください。

11
00:00:48,270 --> 00:00:51,740
 

12
00:00:52,530 --> 00:00:54,930
 

13
00:00:58,080 --> 00:01:01,550
そしてそれがうまくいく方法はH1になるだろうし、そして我々は同盟者とうまくいくつもりです。

14
00:01:02,010 --> 00:01:08,880
しかし、それぞれの味方にはテキストがあり、小さなチェックボックスがありますので、チェックボックスをどのように行うかを覚えていれば、入力タイプがチェックボックスと等しいかどうかを確認してください。

15
00:01:08,880 --> 00:01:18,960
。

16
00:01:18,960 --> 00:01:20,090
 

17
00:01:20,220 --> 00:01:30,210
だから、私たちは錆びて歩いているでしょうし、ちょうどこれを複製するつもりです。

18
00:01:30,210 --> 00:01:39,020
だから、ここで3人は食料品を買うだけでRustyを歩くだろう。

19
00:01:40,590 --> 00:01:41,490
 

20
00:01:45,150 --> 00:01:48,660
最後に、フィディアスの評価を見て録音を終了します。

21
00:01:48,960 --> 00:01:54,990
だから、ブラウザでこれを開くと、私たちは最終製品の穏やかでスタイリッシュなバージョンを見ていきますが、スケルトンはそこにあります。

22
00:01:55,440 --> 00:01:56,940
 

23
00:01:57,090 --> 00:02:01,520
私たちには2つのdoがあり、それぞれに小さなチェックボックスがあります。

24
00:02:02,650 --> 00:02:03,390
OK。

25
00:02:04,050 --> 00:02:08,590
だから私たちがやりたいことは、スタイルシートを接続することです。

26
00:02:09,060 --> 00:02:17,190
今回は、まずは存在しないスタイルシートを接続してから、スタイルシートを作成してみましょう。

27
00:02:17,400 --> 00:02:18,480
 

28
00:02:18,480 --> 00:02:23,970
そこで、このエラー駆動型開発と呼ぶ人もいます。私たちが動作しないことを知っているものを書き、その後は動作させるようにします。

29
00:02:23,970 --> 00:02:26,960
 

30
00:02:26,970 --> 00:02:34,060
だから私は、これを呼び出すつもりです。

31
00:02:34,670 --> 00:02:40,820
私たちが次にやることは、Cが評価するDewesにそのファイルを作ることです。

32
00:02:40,920 --> 00:02:43,860
そして、これは研究をするのと同じ場所にいる必要があります。

33
00:02:43,860 --> 00:02:48,550
ティム私はそれを保存し、それが接続されていることを確認するだけです。

34
00:02:48,660 --> 00:02:55,980
体の背景オレンジのようなものをやってみましょう。これは実際に私がカラービデオで話していたものです。

35
00:02:55,980 --> 00:02:57,870
 

36
00:02:57,870 --> 00:03:01,380
これは私が実際にオレンジのような色を使用する唯一の時期の一つです。

37
00:03:01,380 --> 00:03:06,780
教えのほかに、私はただ何かが接続されていることを確認するためにそれを使用するだけで私は明るい色がほしいと思う。

38
00:03:06,930 --> 00:03:11,760
私は、このC Sを使うのがここで正しく参照されているかどうかを見たいと思います。

39
00:03:11,820 --> 00:03:12,920
私たちが新鮮ならば。

40
00:03:13,170 --> 00:03:16,320
さて、素晴らしいことがつながっている。

41
00:03:16,320 --> 00:03:23,580
私たちがやることはここのスライドに戻って、実際に多くの時間を費やして準備していたエレメントセレクターについて話をすることです。

42
00:03:23,580 --> 00:03:27,180
 

43
00:03:27,180 --> 00:03:35,100
それは基本的にあなたがdivや段落または本文を指定したときの攻撃のタイプであり、それに対応するすべてのインスタンスをすべて対応する要素で選択します。

44
00:03:35,100 --> 00:03:38,240
 

45
00:03:38,610 --> 00:03:46,620
この例では2つのdivがあり、各divには2つの段落があり、すべてのdivを背景に紫色に設定すると、2つの紫色のデバイスがすべての段落を黄色に設定します。黄色の段落が4つあります。

46
00:03:46,620 --> 00:03:53,730
 

47
00:03:55,140 --> 00:03:57,840
それで、私たちがボディを選択するときにここでやっていることです。

48
00:03:57,840 --> 00:04:08,190
すべてのALWISにとってもそれを実行して、命令を出したり、2つのピクセルが赤く点灯するようにチャープしたりできます。

49
00:04:10,910 --> 00:04:14,560
今はもちろん、それはすべての同盟国に作用します。

50
00:04:15,360 --> 00:04:15,970
OK。

51
00:04:16,380 --> 00:04:24,180
ですから、私たちがやりたいことは、1人の味方、あるいは1個のH-1、あるいは何かの1つのインスタンスです。

52
00:04:24,870 --> 00:04:30,510
この例では、3番目の嘘を選択して黄色にしています。

53
00:04:30,690 --> 00:04:37,020
そして、我々がやっているやり方は、実際にチームを少し変更してから、H T M

54
00:04:37,020 --> 00:04:41,800
LとR C Sに追加するフックを使って、それをすべて参照して黄色にします。

55
00:04:42,180 --> 00:04:45,700
だから最初のステップは、IDと呼ばれるフックを追加することです。

56
00:04:46,050 --> 00:04:52,420
それでアイデアが機能する方法は、それを任意の要素ID equalsに属性として追加します。

57
00:04:52,440 --> 00:04:57,120
そしてあなたが望む任意の名前を引用符で囲むことができます。

58
00:04:57,360 --> 00:05:03,860
次に、Octa

59
00:05:03,870 --> 00:05:08,420
Thorpeやハッシュ記号、IDの名前を書いて、そのID名と一致する要素を1つ選択します。

60
00:05:08,820 --> 00:05:18,510
例として、この最終的な同盟国をここで少し違って見せたいとしましょう。

61
00:05:19,080 --> 00:05:23,790
私ができることは、ここに行くことです。同盟者に、それにIDを与えましょう。

62
00:05:23,970 --> 00:05:25,860
そして、これはどんな名前でもかまいません。

63
00:05:25,950 --> 00:05:27,030
 

64
00:05:29,620 --> 00:05:35,650
この特別なことを呼んでみましょう。私はそれを特別なものと呼んでいると言っています。それは本当に素晴らしい名前ではありませんが、IDを使用するポイントは何かを一つにすることです。

65
00:05:35,650 --> 00:05:40,210
 

66
00:05:40,330 --> 00:05:46,490
これは、個々の要素とIDに関する1つの注釈をターゲットにする方法です。

67
00:05:46,560 --> 00:05:49,300
1ページに1回しか表示されません。

68
00:05:49,480 --> 00:05:56,270
だから私はこれをして、実際に無効なHMOの2つの要素に特別なIDを与えようとします。

69
00:05:56,530 --> 00:05:58,920
だから、いつもそのページに一度そこにいるはずです。

70
00:05:59,130 --> 00:06:02,640
これは純粋に単一の要素を単一にするために使用されます。

71
00:06:02,680 --> 00:06:09,280
しかし、ページに複数のIDが表示されるのは、複数回表示されない限りです。

72
00:06:09,590 --> 00:06:09,830
OK。

73
00:06:09,850 --> 00:06:12,180
だからこの特別なものに行きましょう。

74
00:06:12,240 --> 00:06:17,180
さあ、ここでそれを見てみましょう。

75
00:06:17,350 --> 00:06:18,550
ここの最後の1つです。

76
00:06:18,790 --> 00:06:20,390
背景色を付けましょう。

77
00:06:20,650 --> 00:06:24,470
だからそのIdを行うには名前は特別です。

78
00:06:24,490 --> 00:06:32,670
私たちはCSSAファイルに行き、私たちは特別な書き込みを行い、その前にオクターブを置くだけで、私たちがIDについて話していることがわかります。

79
00:06:32,950 --> 00:06:37,220
 

80
00:06:37,500 --> 00:06:48,020
だから、私たちがしているのはここに書かれているかC Sだから、背景の色をして、それを黄色にしましょう。

81
00:06:48,250 --> 00:06:54,730
ファイルを更新して保存してください。黄色い場合にのみ表示されます。

82
00:06:54,790 --> 00:06:56,770
だから私が指摘したいことがいくつかあります。

83
00:06:56,830 --> 00:06:59,890
1つは、このコードがまだ動作していることです。

84
00:06:59,880 --> 00:07:01,760
それはすべての同盟国を回します。

85
00:07:01,930 --> 00:07:05,310
これは、最終的な1つを含む赤い境界を与えます。

86
00:07:05,650 --> 00:07:12,010
それから、私たちが追加してIDで呼び出したこのフックに基づいて最後のものに黄色の背景だけを追加することで、その上に追加します。

87
00:07:12,000 --> 00:07:15,520
 

88
00:07:15,580 --> 00:07:21,930
だから、要素を1つにする方法としてアイデアをまとめるには、1ページに1回しかIDを使うことはできませんが、1ページにIDをいくつでも置くことができます。

89
00:07:21,940 --> 00:07:24,480
 

90
00:07:24,730 --> 00:07:30,820
IDは個々の要素を1つにするのには優れていますが、類似した複数の要素を持つことがしばしばありますが、たとえばすべての同盟者を望むわけではありません。

91
00:07:30,810 --> 00:07:34,380
 

92
00:07:34,450 --> 00:07:41,320
だから私は、同盟国の半分を半分ずつ、半分を半分ずつ、それを達成するためにクラスを使用する別の方法で作っていきたいとしましょう。

93
00:07:41,320 --> 00:07:43,410
 

94
00:07:43,420 --> 00:07:48,970
だからクラスが動作する方法は、クラスと呼ばれる以外はIDのようなもので、ページ上の任意の数の要素に適用することができます。

95
00:07:49,020 --> 00:07:51,410
 

96
00:07:51,430 --> 00:07:57,850
 

97
00:07:57,850 --> 00:08:05,240
ここでは、最初の段落と3番目の段落にハイライトというクラスを適用して、オクターブのソープではなくドットで成功を収めています。

98
00:08:05,250 --> 00:08:12,750
ここでもまたIDを選択するためにここでは、クラスを選択するためにハッシュ記号またはオクターブソープを使用しています。

99
00:08:12,750 --> 00:08:13,350
 

100
00:08:13,380 --> 00:08:14,540
ドットを使う。

101
00:08:14,710 --> 00:08:16,600
それ以外の場合は同じ方法で動作します。

102
00:08:16,660 --> 00:08:19,030
だから例を挙げましょう。

103
00:08:19,230 --> 00:08:26,050
私はクラスを追加し、私はこれを動作させる方法を追加するつもりです、我々はこれらの2つがチェックされているふりをするつもりです。

104
00:08:27,310 --> 00:08:28,390
 

105
00:08:28,480 --> 00:08:32,720
ですから、私はテキストを通る線があることを願っています。

106
00:08:32,760 --> 00:08:38,800
だから買い物店を見てレトリを歩いてみると、このテキストを通ってストライキされるべきですが、最後のストライキはありません。

107
00:08:38,800 --> 00:08:40,810
 

108
00:08:40,840 --> 00:08:44,320
ですから、私たちがそのやり方をやり遂げる方法は、クラスと一緒です。

109
00:08:44,400 --> 00:08:52,720
その場で私は先に進んでクラスを追加して、これを完成し、もう1つのクラスが完了したとみなして、それを保存してリフレッシュすれば保存します。

110
00:08:52,720 --> 00:08:58,050
 

111
00:08:58,170 --> 00:09:00,560
私にはスタイルがないので何も起こりません。

112
00:09:00,900 --> 00:09:09,580
だから私は私のC Sと私は右のドットに行き、クラスの名前は中括弧を完了し、今スタイルを完了します。

113
00:09:09,650 --> 00:09:10,850
 

114
00:09:11,050 --> 00:09:18,030
ここでは、テキストの装飾と呼ばれる新しいものを紹介します。テキストの装飾は、行を追加する方法です。

115
00:09:18,040 --> 00:09:19,920
 

116
00:09:20,080 --> 00:09:22,030
しかし、あなたができることはいくつかあります。

117
00:09:22,020 --> 00:09:28,710
あなたは下線を追加することができます、そして、波線の下線を追加することができます。明らかに、私は上線を除いて下線のような線と上の線を知りませんでした。

118
00:09:29,200 --> 00:09:35,800
 

119
00:09:35,800 --> 00:09:40,560
だから私たちはラインスルーを使用するつもりです、それはそれでなければなりません。

120
00:09:40,810 --> 00:09:42,060
だから私はリフレッシュする場合。

121
00:09:42,120 --> 00:09:44,420
これらの上位2つに注目してください。

122
00:09:44,470 --> 00:09:46,400
私たちは今すぐラインを通す。

123
00:09:46,840 --> 00:09:49,680
すばらしいです。

124
00:09:49,990 --> 00:09:56,340
私がここにいる間、簡単なメモは、ページが読み込まれたときにこれらのチェックボックスをチェックしたい場合です。

125
00:09:56,500 --> 00:10:01,420
だから今はチェックされていないので手動でチェックしなければなりませんが、もし私がトップ2をチェックしたいのであれば、ここに行き、checkedという属性を追加することができます。

126
00:10:02,470 --> 00:10:06,410
 

127
00:10:06,550 --> 00:10:10,370
これはチェックボックスの入力にも作用します。

128
00:10:10,380 --> 00:10:15,580
そうすれば、もし私が新鮮だったら、ページが読み込まれたらチェックされます。

129
00:10:15,750 --> 00:10:20,450
だから実際に評価を見ていませんが、あなたがそれを行うことができることを知ることが重要です。

130
00:10:20,830 --> 00:10:21,100
OK。

131
00:10:21,100 --> 00:10:24,140
だからこれを本当に素早く包みましょう。

132
00:10:24,250 --> 00:10:28,680
与えられた要素すべてを選択する要素セレクタがあります。

133
00:10:28,720 --> 00:10:31,780
ALWISはすべてすべての段落を分割します。

134
00:10:32,120 --> 00:10:39,730
一致するIDを持つ1つの要素を選択するIDセレクタがあり、それに常にオクターブを使用する必要があります。

135
00:10:39,730 --> 00:10:41,120
 

136
00:10:41,240 --> 00:10:42,590
またはハッシュ記号。

137
00:10:42,970 --> 00:10:48,300
 

138
00:10:48,310 --> 00:10:54,010
 

139
00:10:54,000 --> 00:10:54,790
そして、我々はクラスセレクタと非常に似ているクラスセレクタを持っていますが、クラス名に基づいて選択することと、クラスは一度しかないIDとは違って、