CSSチュートリアル (5) DW4を使ったCSSの作成方法

1. CSS スタイルパネル

前の章を学習したので、皆さんは CSS についてある程度理解していると思います。この章では、Dreamweaver4 を使用して CSS を作成する方法を説明します。まず Dreamweaver4 を実行します。起動後、メニューで [Windows] -> [CSS スタイル] を選択します (または Shitf+F11 を押します)。以下に示すように、CSS スタイル管理パネルが表示されます。 CSS スタイル (つまり、上記のドットで始まるクラス セレクター。Dreamweaver4 では、ドットで始まるクラス セレクターをカスタム スタイルとして使用します)、[適用] ボタンを使用して、これらの CSS スタイルをページ内のテキストまたはテキストに適用できます。ドキュメントエリア。

注: [適用] ボタンの前にチェックボックスがあり、これを選択するとボタンが灰色になり、マウスをクリックしている限り、カスタマイズされた CSS スタイルが現在の要素に自動的に適用されることを示します。ページ。チェックボックスが使用できない場合、選択すると [適用] ボタンが使用可能になり、適用時に [適用] ボタンをクリックする必要があります。カスタム スタイルをオブジェクトに適用すると、現在の HTML タグの後に class="..." を追加するのと同じになります。さらに、スタイルの前に「S」字型のシンボルがあります。これは内部定義されたスタイルを示し、シンボルの場合は、このスタイルが外部スタイル シート ファイルにリンクされていることを示します。

注: CSS スタイル パネルにはカスタム (クラス) CSS スタイルのみが表示されます。再定義された HTML タグやその他の CSS セレクター スタイルは、HTML タグ領域で制御されるスタイルに自動的に適用されるため、CSS スタイル パネルには表示されません。 (HTML タグの再定義とは、セレクターが 1 つの HTML タグである CSS スタイルを指します。元の HTML タグのスタイルを再定義して変更するため、再定義と呼ばれます。)

右下隅に 4 つの小さなボタンがあります。最も一般的に使用されるコマンドはいくつかあります:

スタイル シートの添付: (スタイル シートへのリンク) クリックすると、スタイル シートの選択ダイアログ ボックスが表示されます。以前に作成した外部スタイル シートを選択し、[OK] をクリックして外部スタイル シートにリンクします。 。外部スタイル シートを追加するときは、可能な限り相対パスを使用してください。新しいスタイル: (新しいスタイル) 通常、このボタンは CSS スタイル シートを作成するために使用します。

スタイル シートの編集: (スタイル シートの編集) クリックすると、スタイル シートの編集ダイアログ ボックスが表示され、このダイアログ ボックスで既存の内部スタイル シートと外部スタイル シートをすべて表示します。

削除: (スタイルの削除) まず、削除するカスタム CSS スタイルを選択し、このボタンをクリックすると、スタイルが削除されます。

上の小さな三角形をクリックするか、マウスの右ボタンをクリックしてメニューをポップアップします。

編集: (編集) 現在選択しているカスタム CSS スタイルを編集します。 CSS クラス スタイルの定義ダイアログ ボックス。

Duplicate: (コピー) 現在選択されているカスタム CSS スタイル クラスを複製します。

削除: (削除) 現在選択されているカスタム CSS スタイルを削除します。これはボタンと同じ効果があります。

適用: (適用) は、選択した CSS クラスをページ内の現在の要素に適用することを指します。 「適用」ボタンと同じです。

新しいスタイル: (新しいスタイル) はボタンと同等です。

スタイルシートの編集: (スタイルシートの編集) ボタンに相当します。

スタイルシートを添付: (外部スタイルシートへのリンク) ボタンに相当します。

スタイルシートのエクスポート: (スタイルシートのエクスポート) このページの内部スタイルシートを外部スタイルシートファイルにエクスポートします。注: この方法を使用して Dreamweaver4 でスタイル シートをエクスポートするほかに、メイン メニューで [ファイル] -> [エクスポート] -> [CSS スタイルのエクスポート] を使用することもできます。

2. スタイルシートの作成の種類 まず、Dreamweaver4 の 3 つのスタイルシートの種類を紹介します。CSS スタイルパネル (または CSS スタイルパネルメニューの新規スタイル) をクリックして、次のような新しいスタイル ダイアログ ボックス 画像:

[定義] で、外部スタイル シートか内部スタイル シートかを選択できます:

l [新しいスタイル シート ファイル] (新しいスタイル シート ファイル) を選択すると、システムは最初にスタイル シート ファイルを保存してから、スタイル シート ドキュメントを定義します。ページ全体のスタイルは、作成したスタイル シート ファイルに従います。この外部スタイル シート ファイルを他のページにリンクすると、1 つのスタイル シート ファイルで複数のページを制御できます。

l [このドキュメントのみ] (このドキュメントのみが存在します) を選択すると、内部スタイル シートが作成され、Dreamweaver4 は作成したスタイル シートの内容を

の

スタイルが定義されました。必要に応じてこのカスタム スタイルを適用し、Web ページ内のテキストを選択して、スタイル パネルの強調スタイルをクリックします。希望通りの効果かどうかを確認してください。

注: 選択したコンテンツが表または段落の場合、表または段落全体内のテキストは、元のコードから、 内にあることがわかります。

タグ class="emphases" パラメータが最後に追加されます。例:

....

または

......

ダン 選択したテキストにスタイルを追加するとき、テキスト自体が HTML タグで囲まれていない場合、たとえば タグが自動的に追加されます。 :

...キーポイント< ;/span>...

注:span タグ自体には意味はありません。スタイル シートの選択範囲を具体的に指定します。スタイルシートの領域も指定します。

4. 再定義スタイルシートを作成する

再定義スタイルシートは、HTML タグの形式を再定義します。たとえば、各段落の前に 2 つのスペースを残してページ上の段落を再フォーマットし、段落テキストのサイズと行間隔を設定したいとします。

[新しいスタイル] をクリックして [新規] ダイアログ ボックスを表示し、スタイル シート タイプとして [HTML タグを再定義] を選択し、[このドキュメントのみ] を選択します。スタイル シート タイプで [HTML タグの再定義] を選択すると、上のドロップダウン ボックスの名前が [タグ] に変わり、入力コンテンツが HTML タグであることを示します。ドロップダウン ボタンをクリックすると、すべての HTML タグが含まれていることがわかります。 [タグ] ドロップダウン ボックスで、段落記号 P を選択します。

[OK] の後、スタイル定義ダイアログ ボックスに入り、フォント サイズを 12 ピクセル、行間隔をテキスト サイズの 150% に設定します。以下に示すように:

[ブロック] セクションで、テキストのインデントを設定します。テキスト サイズは 12 ピクセルなので、2 つの単語の間のスペースは 24 ピクセルです。

[OK] を押すと、この再定義スタイルが完了します。この時点で、ページ上の各段落のテキスト サイズは 12 ピクセル、行間隔は 150% ですが、Dreamweaver エディターではインデントの効果は確認できません。ファイルを保存して開いてください。ブラウザで効果を確認してください。この時点での CSS スタイル シートの元のコードは次のとおりです。 }

p { font-size: 12px; line-height: 150%; text-indent: 24px}

-->



5. ダイナミックリンクスタイルシートを作成しましょうさまざまな状態でのリンクの外観のセットを作成します。 [新しいスタイル] をクリックして [新規スタイル] ダイアログ ボックスを表示し、スタイル シート タイプとして [CSS セレクターを使用する] を選択し、[このドキュメントのみ] を選択します。スタイル シート タイプとして [CSS セレクターを使用] が選択されている場合、上のドロップダウン ボックスの名前が [セレクター] に変わり、入力コンテンツが CSS セレクターであることを示します。ドロップダウン ボタンをクリックすると、CSS セレクターの 4 つの状態が表示されます。動的リンク:

l a:active スーパーリンクのステータスを選択します

l a:hover カーソルがハイパーリンクのステータス上に移動します

l a:link アクションがない場合のハイパーリンクの通常のステータス

l a:visited 訪問したハイパーリンクのステータス

次に、これらの状態を個別に設定します。まず、[OK] を選択すると、以下に示すように、スタイル定義ダイアログ ボックスが表示され、色はオレンジになります。以下に示すように、a:visited を設定し、黄色に下線を設定しないメソッド。次に、a:hover を設定し、下線と上線を付け、色をオレンジにし、背景で背景を黄色に設定します。

ここでは a:active を設定しません。カスケード ルールに従って、a:active のスタイルは次のようになります。自動的に a:hover に従います。このようにして、すべてのダイナミックリンクの効果を設定しました。設定の順序に注意してください。ブラウザでは、このページの未訪問のリンクは下線が引かれず、黄色になります。訪問済みのリンクは、下線が引かれず、黄色になります。マウスがリンクをポイントすると、上に下線が表示され、背景が黄色になります。 。スタイルシートの元のコードは次のとおりです:



このように動的リンクを定義する場合、ページ全体へのリンク 効果はすべて変わります。1 つのページに 2 セット以上のリンク効果を定義したい場合はどうすればよいですか?第 4 章で、クラスと疑似クラスを混合すると、同じページ上で異なるリンク効果が生成される可能性があると言いませんでしたか? [新しいスタイル] をクリックし、セレクター ドロップダウン ボックスに、以下に示すように、「a.link2:link」と入力します (もちろん、最初に a:link を選択してから変更することもできます)。

このようにして、次のように作成しました。新しい .link2 クラスで、.link2:link 設定スタイル、赤、下線付きです:

上記の方法に従って、引き続き a.link2:visited と a.link2:hover を定義します。 :赤色で下線付きで訪問、a.link2: ホバーは赤色で下線なし、背景は白色です。 CSS スタイル パネルには、link2 という名前の追加のカスタム スタイルがあります。次に、このスタイルをダイナミック リンクに適用します。保存してブラウザで開くと、2 つのまったく異なるリンク スタイルが表示されます。すべての CSS コードは次のとおりです:

以上がCSSチュートリアル (5) DW4を使ったCSSの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。