Michael Zippo
Webサイトをデザインするときは、ユーザーがアクティブ化したときの要素のスタイルにしたいと思うかもしれません。たとえば、ユーザーがボタンをクリックしたとき、またはリンクがCSS疑似クラスを使用できる場所であるときにボタンまたはリンクの色を変更したい場合があります。アクティブ。アクティブな疑似クラスを使用すると、ユーザーによってアクティブ化された要素を選択して、スタイルを適用できます。
このチュートリアルでは、ニックネームの基本について例を挙げて説明します。 CSSクラスと、コードでアクティブな疑似クラスを使用する方法。このチュートリアルを終えると、アクティブな疑似クラスの使用に精通するようになります。
CSSでは、セレクターを使用して選択します。スタイルまたはスタイルのセットを適用する要素。たとえば、セレクタを使用すると、Webページ上のすべての
アクティブな疑似クラスは通常、および<>ボタン要素とともに使用されます。たとえば、を使用できます。ユーザーがクリックするとリンクの色を赤に変更するか、ボタンの背景色をクリックすると青に変更する疑似アクティブクラス。
ユーザーがアイテムのクリックを停止すると、アイテムは「有効」ではなくなりました。したがって、アイテムはアクティブなピッカーによって選択されません。ユーザーが要素をクリックするのをやめたとき
は、疑似クラスの使用方法を示す2つの例を残して示しています：アクティブ
地元のカードゲームクラブのウェブサイトを設計していると仮定します。ボードのウィザード私たちは、awページebへのリンクを含む「鬼について」ページを作成するように依頼されました。クラブメンバーがプレイするカードゲームのリスト。
デフォルトでは、このリンクは水色で表示されます。このリンクをクリックすると、テキストの色がオレンジ色に変わります。これを行うために、疑似クラス：activeを使用できます。リンクをクリックしてテキストの色を変更するために使用するコードは次のとおりです。
コードは次を返します：クリック ![`[コードの実行]ボタンの画像、円の内側の三角形`]( https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png?lossy = 1＆ strip = 1＆webp = 1 ){kind=small}
上記のコードエディタのボタンをクリックして、HTMLの出力を確認します/ CSS
HTMLファイルで、カードゲームボードクラブのウィザードの歴史を説明する
タグを使用してテキストの段落を定義しました。
タグには、 「games.html」ページにリンクし、ユーザーが「ここをクリック」テキストをクリックするとトリガーされるタグを定義しました。
CSSコードでは、2つのスタイルルールを指定しました。 、すべてのタグのテキストの色を水色に設定するルールを指定したので、selector：assetを使用して、すべてのアクティブなタグのテキストの色をオレンジに設定するルールを定義しました。このルールは、ユーザーがリンクをクリックするとリンクの色を変更します。
私たちは、ゲームクラブボードカードのウィザードのモジュールに取り組んでいます。クラブへの関心を示してください。
フォームの最後に、ボタンを作成します。で「あなたの興味を提出してください」と言います。このボタンをクリックすると、ボタンの周囲に3ピクセル幅のオレンジ色の境界線が適用されます。
次のコードを使用してこのボタンを作成できます。
コードは次を返します：クリック 上記のコードエディタのボタンをクリックして、HTMLの出力を確認します/ CSSコード
コードを分析してみましょう..HTMLファイルでは、ボタン<>ラベルを使用してボタンを定義しました。このボタンには「Submityourinterest。
<」というテキストが含まれています。 p> CSSスタイルシートでは、ユーザーによってトリガーされたときにボタン<>タグに適用されるルールを定義しました。このルールは、ボタンの周囲に3ピクセル幅の実線の境界線を作成します。を使用します。ボタンがアクティブな場合にのみこのルールを適用するアクティブセレクターしたがって、ボタンをクリックするとオレンジ色の境界線が表示され、ボタンのクリックを停止するとすぐに境界線が消えます
p>CSS：疑似アクティブクラスを使用すると、アクティブな要素を選択した後、その要素が「アクティブ」状態のときに要素を選択できます。要素にスタイルまたはスタイルのセットを適用できます
：アクティブな疑似クラスは一般的にタグとブートキャンプの一致を見つける
Latest questions
