css_html/css_WEB-ITnose のハイパーリンクに関する学習経験

書籍『使いこなすCSS』では、著者がハイパーリンク部分について解説しています。
1. CSS では、2 つのルールの優先順位が同じ場合、後で定義されたルールが優先されます。したがって、ハイパーリンクのいくつかの疑似セレクターの一般的な順序は、a:link、a:visited、a: になります。 hover、a:focus、a:active; これを具体的に書き留める必要はありません。いくつかの簡単な例を実行すると、本当の知識が得られます。
2.下線など、より魅力的な CSS ハイパーリンク効果を作成します。接続の独自性とスタイルを表現するために、いくつかの特別なアイコンを作成することもできます。 3、
CSS3 では、部分文字列の一致によって要素を検索し、テキスト http:: で始まるすべてのリンクを検索するなど、より柔軟なリンク スタイルを少ない労力で完成させることができます。この方法で、表示を強調表示できます。すべての外部リンク。もちろん、自分のサイトへのリンクについては、リンクをキャンセルするように特別に設定できます:

a[href^="http:"]{     background:url() no-repeat right top;    }

ダウンロードされたドキュメントとフィードを示す特別なスタイルを使用することもできます:

a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{       background-image:none;    }

(その機能は、 pdf キーワードすべてに特定のロゴが付いています)

4. ボタン リンクを作成します

単純に、display: block を使用して行レベルの要素をブロック レベルに変換し、背景色を変更してボタン リンクと変更を実現します。もう 1 つの方法は、事前に描画されたボタン アイコンを変更することで画像反転効果を実現することです。

Pixy スタイルの反転: 1 つの画像上にすべてのボタンを描画し、背景位置を使用してさまざまな状態を実現します。 さまざまな部分が以下に表示されます。これは、複数の画像に対するサーバー呼び出しの数を大幅に削減できるということです。

Pixy からインスピレーションを得て、CSS ウィザードが誕生しました。そのアイデアは、大量の画像を必要とする Web サイトのナビゲーションなどのすべてのコンテンツを統合することです。これを画像上に配置すると、大規模な Web サイトのサーバー消費量を大幅に削減できます。

5. CSS3 text-shadow、box-shadow、border-radius 属性を使用してボタン効果を実現でき、画像の追加を回避できます。
6.
CSS には非常に強力な機能もあります。つまり、display 属性と hover 属性を使用して、ツール ヒント、情報カード (Zhihu などの Web サイトの情報カード ポップアップなど) を設定できます。モールの二次メニューなど。タイトル属性に付属するプロンプトほど厳密ではない、カラフルな効果。