テキスト リンクは、Web ページで最も一般的なページ要素であると言えます。このようにデフォルトのテキスト リンク スタイルに下線が付いていると、スタイル シートを使用してページ全体に合わせてスタイルを変更したいと考える人が多くなるかもしれません。が広く使われるようになったことで、この願いがとても簡単に実現できるようになりました。今回はスタイルシートを使ってカラフルなテキストリンク効果を作る方法を紹介します。初級編、上級編、上級編に分けて紹介していきますが、Dreamweaverのスタイルエディターですべてのリンクスタイルエフェクトが完成しますので、Dreamweaverのスタイルエディターの使い方については前回の紹介を参照してください。特定のページの閲覧については、リンク スタイルの閲覧効果は次のとおりです。 こちらを参照してください。
1. 準備
まず基本的なリンク スタイルを作成し、これをベースに他のスタイルでカスタム Class クラスを追加します。
1. Shift+F11 を押してスタイル パネルを開き、[新しいスタイル] ボタンをクリックします (図 1 を参照)。
2. 図 2 に示すように、[タイプ] オプションで [CSS セレクターを使用する] を選択してデフォルトのリンク スタイルを作成します。
3. 図 3 に示すように、デフォルトのリンク スタイルを下線なし、フォントを Songdynasty 9pt、その他の色を設定しないなどに設定します。後でクラスごとに個別に設定します。
4. スタイルクラス Class を定義します。以下の各スタイルは個別のクラスを定義し、それをリンク テキストに割り当てます。手順は次のとおりです。 [追加] をクリックして新しい定義スタイル パネルを開き、[カスタム スタイル (クラス) の作成] を選択して独自のスタイル クラスを定義します。図 4 に示すように、
5. リンクテキストにスタイルクラスを追加します。 Dreamweaver でリンク テキストを選択し、ウィンドウの下部にあるクイック ラベル選択バーでラベルを選択し、ラベルを右クリックして、[クラスの設定] を選択して、カスタマイズしたスタイルをリンク テキストに割り当てます (図 5 を参照)。
6. 他のリンクテキストスタイルでも方法は同じなので、後で紹介しません。このチュートリアルでは、友人はホバー ステータスを定義するための独自のリンク スタイルを作成できます。これ以上は紹介しません。定義を求められたら、[.t1:hover] を直接入力してください。
2. プライマリリンクスタイル
スタイル エディターの [タイプ] カテゴリでリンク エフェクトのこの部分を完全に完成させます。作成方法や設定方法については詳しく説明しません。完成したパネル図を示して簡単に説明します。
1. 通常のリンク。図 6 に示すように。
通常のリンクは、スタイル エディターのカテゴリ カテゴリの最初の項目 [タイプ] に設定されます。 [色] はリンクのフォントの色を定義し、[装飾] はリンクの下線のスタイルを定義します。これらは次のカテゴリに分かれています。
underline: 下線 overline: 上線 line-through: 取り消し線 ブリンク: 点滅線 none: 下線なし
このセクションの他のいくつかのリンク スタイルは、ストロークの組み合わせを変更することで実現されます。
2. 図 7 に示すように、下線付きのリンクはありません。
3. 図 8 に示すように、二重下線付きのリンク。
4. 図 9 に示す取り消し線リンク。
3. 高度なリンク スタイル
次に、別のリンク スタイル定義方法を紹介します。この方法では、主にスタイル シートの Border 属性を使用して、通常のリンクの下線を置き換えます。Border には、より多くの制御パラメータとスタイルがあるため、いくつかの特殊な機能を実装できます。図 10 に示すように、下のパネルを見てみましょう。
Border オプションには、Width (線の幅)、Color (線の色)、Style (線の種類) の 3 つの部分があり、それぞれの部分で異なる境界線に異なるパラメーターを設定できます。これは一般的なリンク ラインです。
このメソッドを使用してリンク スタイルを定義するには必要な条件があることを皆さんに思い出していただく必要があります。図 11 に示すように、スタイル内の Box 属性が定義されている必要があります。
これは、Border がスタイル内のブロック要素であり、Border が機能する前にまずブロック要素を定義する必要があるためです。 [ボックス] オプションで幅または高さを任意に定義するだけで済みます。ここでは高さを 0 として定義し、特定の値を試してみましょう。どのような効果が得られるのか見てみましょう。
1. 代替リンク スタイル。設定は図 12 に示すとおりです。
2. 下線の色をカスタマイズします。これは、境界線の色とテキストの色が定義されている限り、通常のリンク テキストでは実現できない効果です。別の場合は、図 13 に示すようになります。
3. 下線の距離をカスタマイズします。図 14 に示すように、Padding の値を変更することでこの種の線の距離を設定できます。この例では、Padding-Bottom を 5pix に設定します。
4. スクライビングの長さと位置合わせをカスタマイズします。さらに、図 15 に示すように、[ボックス] カテゴリを開き、[幅] を 200 に設定し、[テキストの配置] を中央に設定します。図16。
5. 二重下線効果をカスタマイズします。 [境界線] の [スタイル] を変更して下線の外観を変更し、[スタイル] を [二重] に設定し、[下] を 3pix に設定して二重下線効果を実現します。図 17 に示すように。
4. 高度なリンク スタイル
上記で紹介したテクニックを組み合わせることで、より複雑なテキスト リンク スタイルを作成することもできます。以下に 3 つの例を紹介します。
1. ブロックリンクを定義します。図 18 に示すように、最初にリンクに背景色を追加します。
次に、図 19 に示すように、テキスト リンクに 4 つの境界線を追加して、フラット ブロック テキスト リンクを作成します。
2. ボタンのようなテキスト リンクを定義します。図 20 に示すように、境界線のスタイルを変更し、Border-Style を開始として定義します。
図 21 に示すように、[ボックスの幅と高さを定義] オプションでボタンの幅と高さを定義し、パディングを 2 ピクセルとして定義して、リンク テキストとボタンの間に 2 ピクセルの間隔を作成します。
3. 特殊効果のテキスト リンクを定義します。 CSS スタイル シートには特殊効果フィルターのセットも含まれており、フィルターを前のパラメーターと組み合わせて特別なリンク スタイルを作成できます。この例では、ぼかしフィルターを使用し、境界線効果のあるテキスト リンクを作成しました。図 22 に示すように。
4. 静的な背景切り替えの効果を定義します。この例では、リンクテキストの通常状態とホバー状態で異なる背景画像を設定することで、背景切り替えの効果を実現しています。以下の図を参照してください。
5. 動的背景切り替えの効果。この効果は基本的に上の例と同じですが、動的な Gif 画像の背景がホバー状態で定義されている点が異なります。そして、この画像には少しスキルが必要です。ループを 1 回に設定し、最後にフレームを追加し、フレーム時間を 10000 などの大きな値に設定することです。これにより、アニメーションを片側で実行してから停止することができます。エフェクトの実行速度を向上させるには、Dreamweaver に Preload /doc/webpage/images/images 動作を追加する必要もあります。これには、図に示すように、動作パネルを開いて Preload /doc/webpage/images/images 動作を追加する必要があります。
以下に示すように、最後の 2 つのリンク スタイルに必要な 4 つの画像をすべてプリロードできます。
5. まとめ
たくさんのリンク スタイルを紹介します。リンク テキストのホバー ステータスを設定することで、非常に美しい効果を実現できます。特定のページの閲覧については、 こちらを参照してください。友人が上記に基づいてさらにリンク テキストを作成できることを願っています。アイデア。スタイル シートは、Web ページ制作における宝物が詰まった氷山のようなものであることを忘れないでください。今日私たちが発見したのは氷山の一角にすぎません。さらに多くの宝物が発見されるのを待っています。