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

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 コードは次のとおりです: