サンプルスタイルシートによるカスケードスタイルシートの概要
最初からウェブサイトを構築するときは、定義された基本スタイルから始めるのが賢明です。 これは、きれいなキャンバスと新鮮なブラシから始まるようなものです。 Webデザイナーが直面する最初の問題の1つは、 Webブラウザがすべて異なっていることです。 デフォルトのフォントサイズはプラットフォームごとに異なります。デフォルトのフォントファミリは異なります。一部のブラウザではbodyタグに余白やパディングが定義されていますが、そうでないものもあります。 Webページのデフォルトのスタイルを定義して、これらの不一致を回避してください。
CSSと文字セット
まず最初に、CSSドキュメントの文字セットをutf-8に設定します。 設計したページのほとんどは英語で書かれている可能性がありますが、言語や文化の違いによってローカライズされたものもあります。 そうであれば、utf-8はプロセスを単純化します。 外部スタイルシートに文字セットを設定することはHTTPヘッダーよりも優先されますが、他のすべての状況ではそうなります。
文字セットを設定するのは簡単です。 CSSドキュメントの最初の行には次のように書いてあります。
@charset "utf-8";このように、contentプロパティで国際文字を使用するか、クラス名とID名として使用すると、スタイルシートは引き続き正しく動作します。
ページ本文のスタイル設定
次にデフォルトスタイルシートに必要なのは、マージン、パディング、およびボーダーをゼロにするスタイルです。 これは、すべてのブラウザが同じ場所にコンテンツを配置し、ブラウザとコンテンツの間に隠されたスペースがないことを保証します。 ほとんどのWebページでは、これはテキストの端には近すぎますが、そこから開始して、背景イメージとレイアウトの区画が正しく並ぶようにすることが重要です。
html、body {margin：0px; パディング：0px。 border：0px; }デフォルトのフォアグラウンドまたはフォントの色を黒に、デフォルトの背景色を白に設定します。 これはほとんどのウェブページのデザインではおそらく変化しますが 、本文やHTMLタグにこれらの標準色を設定すると、最初にページを読みやすくして扱いやすくなります。
html、body {color：＃000; 背景：#fff; }デフォルトのフォントスタイル
フォントサイズとフォントファミリは、設計が完了してから必然的に変更されるものですが、デフォルトのフォントサイズは1 em 、デフォルトのフォントファミリはArial、Geneva、またはその他のサンセリフフォントから始まります。 emを使用すると、ページはできるだけアクセシブルに保たれ、sans-serifフォントは画面上で見やすくなります。
html、body、p、th、td、li、dd、dt {font：1em Arial、Helvetica、sans-serif; }テキストを見つけることができる場所は他にもあるかもしれませんが、 p 、 th 、 td 、 li 、 dd 、 dtは基本フォントを定義するのに適しています。 大文字と小文字を区別してHTMLと本文を含めることができますが、HTMLや本文用にフォントを定義するだけの場合は、多くのブラウザがフォントの選択を上書きします。
見出し
HTML見出しは、サイトの概要を助け、検索エンジンをサイトに深く浸透させるために使用することが重要です。 スタイルがなければ、それらはすべてかなり醜いので、それらのすべてにデフォルトスタイルを設定し、それぞれのフォントファミリとフォントサイズを定義します。
h1、h2、h3、h4、h5、h6 {font-family：Arial、Helvetica、sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; }リンクを忘れないでください
リンクカラーのスタイルはほとんどの場合デザインの重要な部分ですが、デフォルトのスタイルでそれらを定義しないと、擬似クラスの少なくとも1つを忘れる可能性があります。 青の小さなバリエーションでそれらを定義し、サイトのカラーパレットを定義したら変更してください。
リンクを青色で設定するには、次のように設定します。
- 青色のリンク
- ダークブルーとして訪問したリンク
- ホバーリンクをライトブルー
- アクティブなリンクもより淡い青色
この例に示すように：
a：リンク{色：＃00f; } a：訪問済み{color：＃009; } a：ホバー{色：＃06f; } a：アクティブ{カラー：＃0cf; }かなり無害な配色でリンクをスタイリングすることで、クラスを忘れずに、デフォルトの青、赤、紫より少し小さくすることができます。フルスタイルシート
ここには完全なスタイルシートがあります：
@charset "utf-8"; html、body {margin：0px; パディング：0px。 border：0px; 色：＃000; 背景：#fff; } html、body、p、th、td、li、dd、dt {font：1em Arial、Helvetica、sans-serif; } h1、h2、h3、h4、h5、h6 {font-family：Arial、Helvetica、sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; } a：リンク{色：＃00f; } a：訪問済み{color：＃009; } a：ホバー{色：＃06f; } a：アクティブ{カラー：＃0cf; }