マスターCSSファイルを作成する方法 - ダミー

多くのデザイナーが独自のHTMLコードのCSSファイルを作成し、個々のサイトのニーズに合わせてWebサイトを構築するプロセスをスピードアップします。

あなたがウェブサイトを増やしていくにつれて、いくつかのスタイルは標準的なデザインプラクティスの標準的な部分になります。たとえば、ページの余白を0に設定し、ページの背景色を指定し、すべてのテキストにデフォルトのフォントを選択し、段落と見出しの再定義スタイルを作成し、少なくとも2つの（リンクおよび訪問した）ハイパーリンクのスタイル属性を指定することができますステートを作成し、カスタムの箇条書きスタイルを作成します。

<！ --1 - >

このファイルを使用して、マスターCSSファイルを作成するときにCSSのスタイルをテストします。サンプルHTMLファイルには、段落テキスト、見出し1、見出し2、順序付けられていないリスト、および機能するハイパーリンクが含まれています。

独自のマスターCSSファイルを作成するには、次の手順を実行します。

HTMLコードなしで新しい空のドキュメントを作成し、ファイル名masterで保存します。 CSS。

このCSSファイルをサンプルと同じ場所に保存します。 htmlファイル。
<！ - 2 - >
サンプルの領域内。 htmlファイルで、allに設定されたメディアタイプを含む新しい外部CSSファイルへのリンクを追加します。
このリンクはサンプルを示しています。 htmlファイルを使用して、リンクされた外部CSSでスタイル定義を使用します。
マスターの中に。 CSSファイルを使用して、上、左、下、右のページマージンを0pxに設定するタグのタグ再定義スタイルを作成します。 10pxにページの4つの側面のすべての詰め物; #fc3bb6という16進数の明るいピーチオレンジ色に背景を置き換えます。
<！ - 3 - >
あなたのスタイルコードは次のようになります：
```
body {margin：0px;パディング：10px; background-color：#fc3bb6;}
```
オブジェクトの4つの辺がすべて同じ値を使用する場合、ここに示すマージン間隔とパディングの場合と同じように、値をCSSで一度だけ指定する必要があります。ただし、値が1つ以上の側で異なる場合は、各側の値を指定する必要があります。
```
body {margin：10px 10px 0px 0px;パディング：20px 0px 0px 20px; background-color：#fc3bb6;}
```
タグ、
タグ、および
タグのCSSファイルで、フォント、フォントサイズ、およびフォントの色を指定して、タグを再定義します。

特定のプロジェクトに合わせて後で値をカスタマイズできるので、好みのフォント、サイズ、太さ、色を使用します。使用するコードの例を次に示します。
```
デフォルトのハイパーリンクスタイルを変更するには、4つのハイパーリンク状態ごとに擬似クラス要素スタイルを作成します。
```
フォントやフォントの太さの変更から、テキストの色や背景の色の変更、デフォルトのテキストの装飾の変更まで、4つの状態ごとに任意の属性を指定できます。

4つのリンクステートに使用するコードの例を次に示します。

a：link {font-weight：bold;テキスト装飾：下線; color：#0099cc;} a：visited {font-weight：bold;テキスト装飾：下線; color：#990000;} a：hover {font-weight：normal;テキスト装飾：なし;色：#ffffff;背景：#ff9933;} a：アクティブ{font-weight：normal;テキスト装飾：なし;色：#ffffff; background：#cc0000;}
```
順序付けされていないリストをスタイルするには、
```
タグを再定義するか、class属性を持つ
タグに選択的に適用できるクラススタイルを作成します。必要に応じて、デフォルトの箇条書きを置き換えるイメージを指定します。
スタイル定義は、

タグを再定義する場合でも独自のカスタムクラススタイルを作成する場合でも同じように見えます。セレクタだけが、liまたはおそらくasのいずれかとは異なって書き込まれます。弾丸。
bullet liタグの再定義スタイルのコードは、次のようになります。

li {list-style-position：outside;リストスタイルイメージ：url（images / bullet。gif）;フォントファミリ：Arial、Helvetica、sans-serif; font-size：12px;}
```
HTMLファイルとCSSファイルを保存し、ブラウザウィンドウでHTMLファイルを起動します。
```
ブラウザでページを表示するには、HTMLファイルをダブルクリックするか、開いているブラウザウィンドウにファイルアイコンをドラッグアンドドロップします。

ファイルには、マスターCSSファイルで作成したすべてのスタイル属性が表示されます。正しく表示されない場合や、特定の要素が正しく表示されない場合は、ファイルを再度開いて、すべてのコードの精度を確認し、見つかったエラーを修正して再テストしてください。カスタムクラス名の前にピリオド（。）を追加し、すべての16進数の色値の前に数字記号（#）を追加することを忘れないでください。

ブラウザウィンドウで新しいハイパーリンクスタイルをテストして、リンク上にマウスを移動してホバースタイルを表示します。
リンク上をマウスでクリックすると、アクティブなスタイルが表示されます。
1. ブラウザの[戻る]ボタンをクリックしてリンクをクリックし、サンプルページに戻ると、リンクが通常のリンク状態から訪問リンク状態に変わる方法を確認できます。
2. 新しいWebプロジェクトを開始するたびにホイールを再作成するのではなく、最初のマスターCSSファイルを作成したので、このファイルを開始点として使用できます。もちろん、いくつかのプロジェクトでは、CSSを一から作成する方が簡単かもしれませんが、マスターCSSファイルで時間を節約すれば、是非デザインテクニックとして使用してください。