ますます広く使用される css pseudo-classes_html/css_WEB-ITnose

CSS 疑似クラスと言えば、Web フロントエンドの Web デザインを勉強している学生にはよく知られているはずですが、以前は、多くの Web ページの特殊効果は主に js を通じて実装されていました。しかし、CSS3 の継続的な開発により、CSS を使用して Web ページ上で特殊効果を実現すると、応答性が向上するだけでなく、コードの量も大幅に削減されます。 Web ページのコード開発の効率も大幅に向上しました。今日は、CSS 疑似クラスの学習に関するいくつかの小さな経験を共有します。CSS に触れ始めた友人はよく見るでしょう。他の人のコードを見るときは、:hover、:foucs、:before、:after およびその他の関連コードにアクセスしてください。実際、これらは CSS 疑似クラス コードです。 CSS疑似クラスの適用とは、簡単に言うとブロックを追加することです。

次に、疑似クラスとは何か、そしてその用途を見てみましょう:

1. アンカー疑似クラス:

a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

以下のコメントを見てわかると思いますが、これは比較的単純なので省略します。詳しく説明してください

2. :before, :after:

これが今日話したいことの焦点であり、実際、多くの非常に美しい CSS アニメーションはこれら 2 つの要素から切り離せません。 例:

: before は、クラス名の前にブロックを追加します。次に: after はクラス名の後に fast 要素を追加します

たとえば html:

we are famliy

css: .a{color:#fff;}

.a:before{

content:"" ;

width:30px;

height:30px

position:absoulate;

}

この例では、テキストの前に幅 30 ピクセル、高さ 30 ピクセルの空白スペースが追加されます。ここで言いたいのは、疑似クラス

では、要素の配置は絶対的です。他のものにすることはできません。left: または top を制御してその位置を設定できます

content はコンテンツ、写真、テキストなどをスナップに追加できます。必要ない場合。内容: "";ただし、コードは省略できません。

誰でも理解できるように実際のケースをいくつか紹介します

ホーム

About

仕事

連絡先

結果は写真の通りです。