これらのヒントを使って事実を知る
すべてのWebブラウザには、「偏見スタイル」として知られているものが含まれています。 これらは、他のスタイル情報がない場合でもHTML要素のルックアンドフィールを決定するスタイルです。 たとえば、ほぼすべてのブラウザで、ハイパーリンクのデフォルトの外観は下線付きの明るい青色です。 これは、異なる方法で表示するように指示しない限り、それらのリンクがどのように見えるかです。
デフォルトのブラウザスタイルが役立つかもしれませんが、多くの場合、Webデザイナーはこれらのスタイルを削除して、100％コントロールしているスタイルで新しく始めることができます。 これは「マスタースタイルシート」として知られているものを使用して行われます。
マスタースタイルシートは、すべての文書で最初に呼び出すスタイルシートでなければなりません。 マスタースタイルシートを使用して、ブラウザ間のWebデザインに問題を引き起こす可能性のあるデフォルトのブラウザ設定を消去します。 マスタースタイルシートを使用してスタイルをクリアすると、デザインはすべてのブラウザの同じ場所から開始されます。つまり、ペイント用のきれいなキャンバスのようです。
グローバルデフォルト
マスタースタイルシートは、ページの余白、パディング、および枠線をゼロにすることから始める必要があります。 一部のWebブラウザでは、ドキュメントの本文がブラウザペインの端からインデントされた1〜2ピクセルにデフォルト設定されています。 これにより、すべて同じものが表示されます。
html、body {margin：0px; パディング：0px。 border：0px; }また、フォントの一貫性を持たせたいとします。 また、フォントサイズを100％または1emに設定して、ページにアクセスできるようにしますが、サイズは変わらないようにしてください。 そして、行の高さを含めてください。
本文{font：1em / 1.25 Arial、Helvetica、sans-serif; }見出しの書式設定
見出しまたはヘッダータグ（H1、H2、H3など）は、通常、ボールドテキストにデフォルトで設定されています。 ウェイト、マージン、およびパディングを消去することにより、これらのタグが余分なスタイルを持たずに、周囲のテキストよりも大きく（または小さく）保たれるようにします。
h1、h2、h3、h4、h5、h6 {margin：0; パディング：0; font-weight：normal; フォントファミリ：Arial、Helvetica、sans-serif; }特定のサイズ、レタースペーシング、およびパディングをヘッドラインタグに設定することを検討したいと思うかもしれませんが、実際には設計しているサイトのスタイルに依存し、マスタースタイルシートから除外する必要があります。 特定のデザインに必要に応じて、これらの見出しにスタイルを追加することができます。
プレーンテキストの書式設定
見出し以外にも、クリアする必要がある他のテキストタグがあります。 人々がよく忘れるのは、表のセルタグ（THとTD）とフォームタグ（SELECT、TEXTAREA、INPUT）です。 あなたの本文や段落のテキストと同じサイズに設定しないと、ブラウザがそれらをどのようにレンダリングするかに不愉快に驚くかもしれません。
p、th、td、li、dd、dt、ul、ol、blockquote、q、acronym、abbr、a、input、select、textarea {margin：0; パディング：0; フォント：normal normal normal 1em / 1.25 Arial、Helvetica、sans-serif; }見積もり（BLOCKQUOTEとQ）、頭字語、略語に少し余分なスタイルを付けるといいですね。
blockquote {margin：1.25em; パディング：1.25em} q {font-style：italic; }頭字語、abbr {カーソル：ヘルプ; border-bottom：1px破線。 }リンクと画像
リンクは、上記の明るい青色の下線付きテキストから管理して変更するのが簡単です。 私はいつも私のリンクに下線を付けることを好みますが、あなたがそれを好むならば、あなたはこれらのオプションを別々に設定することができます。 マスター・スタイル・シートには、デザインに依存しているため、色も含まれていません。
a：リンク、a：訪問、a：アクティブ、a：ホバー{テキスト装飾：下線; }画像では、枠線をオフにすることが重要です。 ほとんどのブラウザはプレーンなイメージの周りに境界線を表示しませんが、イメージがリンクされると、ブラウザは境界線をオンにします。 これを修正するには：
img {border：none; }テーブル
テーブルはレイアウト目的では使用されなくなりましたが、サイトでは実際のタブーデータに引き続き使用できます。 これはHTMLテーブルをうまく使います。 既定のテキストサイズがテーブルセルで同じであることを既に確認しましたが、テーブルが同じになるように設定する必要がある他のスタイルがいくつかあります。
テーブル{margin：0; パディング：0; ボーダー：なし; }フォーム
他の要素と同様に、フォームの周りの余白やパディングを取り除く必要があります。 私がやりたいことは、フォームタグを " インライン "として書き直して、コード内にタグを置く場所を余分に追加しないようにすることです。 他のテキスト要素と同様に、私はselect、textareaのフォント情報を定義し、上に入力して、それが他のテキストと同じになるようにします。
form {margin：0; パディング：0; 表示：インライン; }ラベルのカーソルを変更することもお勧めします。 これは、ラベルをクリックしたときにラベルが何かをすることを人々が見るのに役立ちます。
ラベル{カーソル：ポインタ; }共通クラス
マスタースタイルシートのこの部分では、あなたに合ったクラスを定義する必要があります。 これらは私が最も頻繁に使用するクラスの一部です。 それらは特定の要素に設定されていないので、必要なものに割り当てることができます。
.clear {クリア：両方; }。フロート左{フロート：左; }。フロート右{フロート：右; } .textLeft {text-align：left;}。 } .textRight {text-align：right;}。 } .textCenter {text-align：center;} } .textJustify {text-align：justify;} } .blockCenter {display：ブロック; margin-left：auto; margin-right：auto; } / *幅を設定することを忘れない* / .bold {font-weight：bold; } .italic {font-style：italic;}。 } .underline {テキスト装飾：下線; } .noindent {margin-left：0;} パディング - 左：0; } .nomargin {margin：0;}。 } .nopadding {パディング：0;}。 } .nobullet {リストスタイル：なし; リストスタイルイメージ：なし; }これらのクラスは他のスタイルの前に書かれており、クラスだけであるため、後でカスケードで発生するより具体的なスタイルプロパティで簡単に上書きできます。 ある要素に共通のクラスを設定しても効果がない場合は、それ以降のスタイルシートに同じ要素に影響する他のスタイルがないことを確認する必要があります。
マスタースタイルシート全体
/ *グローバルデフォルト* / html、body {margin：0px; パディング：0px。 border：0px; }ボディ{フォント：1em / 1.25 Arial、Helvetica、sans-serif; } / *ヘッドライン* / h1、h2、h3、h4、h5、h6 {margin：0; パディング：0; font-weight：normal; フォントファミリ：Arial、Helvetica、sans-serif; } / *テキストスタイル* / p、th、td、li、dd、dt、ul、ol、blockquote、q、acronym、abbr、a、input、select、textarea {margin：0; パディング：0; フォント：normal normal normal 1em / 1.25 Arial、Helvetica、sans-serif; } blockquote {margin：1.25em; パディング：1.25em} q {font-style：italic; }頭字語、abbr {カーソル：ヘルプ; border-bottom：1px破線。 } small {font-size：.85em; } big {font-size：1.2em; } / *リンクと画像* / a、a：リンク、a：訪問済み、a：アクティブ、a：ホバー{テキスト装飾：下線; } img {border：none;} } / *テーブル* /テーブル{マージン：0; パディング：0; ボーダー：なし; } / *フォーム* /フォーム{マージン：0; パディング：0; 表示：インライン; } label {カーソル：ポインタ; } / *共通クラス* / .clear {clear：both; }。フロート左{フロート：左; }。フロート右{フロート：右; } .textLeft {text-align：left;}。 } .textRight {text-align：right;}。 } .textCenter {text-align：center;} } .textJustify {text-align：justify;} } .blockCenter {display：ブロック; margin-left：auto; margin-right：auto; } / *幅を設定することを忘れない* / .bold {font-weight：bold; } .italic {font-style：italic;}。 } .underline {テキスト装飾：下線; } .noindent {margin-left：0;} パディング - 左：0; } .nomargin {margin：0;}。 } .nopadding {パディング：0;}。 } .nobullet {リストスタイル：なし; リストスタイルイメージ：なし; }Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：10/6/17