ステップ 2: 見出しを追加する

次に、「」を利用して見出しを挿入します。

' に '

」タグ。例えば、 '

」は、見出しを追加します。

ステップ 3: リストにデータを追加する

データをリスト形式で挿入するには、「 <それ> ' 鬼ごっこ：

---

---

< 分周 クラス = 「ペット動物」 >

< h1 > 愛玩動物一覧 < / h1 >

< それ > めんどり < / それ >

< それ > アヒル < / それ >

< それ > 犬 < / それ >

< それ > ネコ < / それ >

< それ > うさぎ < / それ >

< / 分周 >

上記のコードの出力は次のとおりです。

次に、リストのスタイルを設定するための CSS セクションに進みます。

ステップ 4: スタイル「.pet-animal」要素

「

” 割り当てられたクラスの助けを借りた要素 “ .ペット動物 」を選択して、リストされたプロパティを適用します。

.ペット動物 {

国境 : 2px 点在 RGB ( 230 、 15 、 15 ) ;

マージン : 50px ;

背景色 : RGB ( 252 、 239 、 169 ) ;

}

ここに：

• 「 国境 」プロパティは、要素の周囲の境界を指定するために使用されます。
• 「 マージン 」は、要素境界の周囲のスペースを定義します。
• 「 背景色 」は、要素の裏側に色を割り当てます。

結果の画像は、上記のコードの出力を示しています。

ステップ 5: スタイル追加リスト「li」

次に、「のリストにアクセスします。 分周 「クラスを持つコンテナ」 ペット動物 」を使用して「 .pet-animal > 李 」で、以下のプロパティを適用します。

.ペット動物 > それ {

視認性 : 隠れた ;

不透明度 : 0.2 ;

遷移 : 視認性 0秒 、 不透明度 0.5秒 線形 ;

}

ここに：

• 「 視認性 文書のレイアウトを変更せずに要素の可視性を設定するために、CSS が利用されています。
• 「 不透明度 」は要素の透明度を指定します。
• 「 遷移 」により、ユーザーは特定の期間にわたってプロパティ値をスムーズに変更できます。

ステップ 6: 「ホバー」疑似クラスを適用する

今、「 ホバー 」 リストのプロパティ:

.ペット動物 : ホバー > それ {

視認性 : 見える ;

不透明度 : 1 ;

}

「 :ホバー 」 CSS は、マウス ポインターが要素の上に移動したときに実行時に変更を加える疑似クラスです。 「 視認性 」を使用して透明度を設定します。 不透明度 ホバー時のリストへの CSS プロパティ:

「 画面 ' 財産。

結論

CSS トランジションを「」に直接適用することはできません。 画面 ' 財産。ただし、別の方法で適用することもできます。これを行うには、HTML ドキュメントに list タグを追加し、タグ名でリストにアクセスして、「 遷移 」、「 不透明度 '、 と ' 視認性 リストの CSS プロパティ。次に、「 : ホバー 」疑似クラスを作成し、可視性の値を「 見える 」。この投稿では、トランジションが CSS 表示プロパティにどのように適用されるかについて説明しました。