1. cssフォントの略語規則<br />CSS を使用してフォントを定義する場合、次のようにすることができます。
| フォントサイズ: 1em; 行の高さ: 1.5em; フォントの太さ: 太字; フォント スタイル: イタリック体。 font-variant: スモールキャップ; フォントファミリー: verdana、serif; |
実際、これらのプロパティは次のように省略できます。
| フォント: 1em/1.5em 太字イタリック小文字ベルダナ、セリフ。 |
現在ははるかに改善されていますが、注意すべき点が 1 つあります。この短縮方法を使用するには、少なくとも font-size および font-family プロパティを指定する必要があります。他のプロパティ (font-weight、font-style、font-. varient) が指定されていない場合は、デフォルト値が自動的に使用されます。
2. 2 つのクラスを同時に使用する
通常、属性には 1 つのクラスのみを指定しますが、これは 1 つだけを指定できるという意味ではなく、実際には、次のようにいくつでも指定できます。
| <div class="注目のニュース"> コンテンツ </div> |
2 つのクラスを同時に使用する (カンマではなくスペースで区切る) と、この段落では両方のクラスで指定されたルールが適用されます。いずれかのルールが重複する場合は、後者のルールが優先されます。
3. CSSの枠線のデフォルト値
境界線ルールを作成するときは、通常、色、幅、スタイルを (任意の順序で) 指定します。例: border: 3px Solid #000 (幅 3 ピクセルの黒の実線境界線) 実際、この例で指定する必要がある唯一の値はスタイルです。スタイルをソリッドとして指定した場合、残りの値にはデフォルト値が使用されます。デフォルトの幅は中 (3 ～ 4 ピクセルに相当) で、デフォルトの色は境界線のテキストの色です。 。これがまさに必要な場合は、CSS で指定する必要はありません。
4. ! important は IE によって無視されます。
CSS では、通常、最後に指定されたルールが優先されます。ただし、IE 以外のブラウザの場合は、! important でマークされたステートメントが絶対に優先されます。次に例を示します。
| マージントップ: 3.5em !重要 マージントップ: 2em |
上部マージンは、IE を除くすべてのブラウザでは 3.5em ですが、IE では 2em であり、特に相対マージン値を使用する場合 (この例のように)、IE と他のブラウザの違いを示すのに便利です。
(ここでの IE は、IE7 を除く、IE6 以下を指します。実際、IE7 は ! important 属性をサポートしており、同じことが CSS サブセレクターにも当てはまります)
5.画像置換スキル
多くの場合、画像の代わりに標準の HTML を使用してテキストを表示する方が、ダウンロードが高速化され、使いやすさが向上するだけでなく、賢明です。ただし、訪問者のマシンでは使用できない可能性のあるフォントを使用する場合は、画像のみを選択できます。
たとえば、各ページの上部に「ウィジェットを購入」というタイトルを使用したいと考えていますが、見た目の美しさのために珍しいフォントを使用している場合は、画像を使用する必要があります。わかりました:
これは確かに真実ですが、検索エンジンは代替テキストよりも実際のテキストをはるかに重視しているという証拠があるため (すでに多くの Web サイトが代替テキストをキーワードとして使用しているため)、別の方法を使用する必要があります。
ウィジェットを購入しますが、美しいフォントはどうでしょうか? 次の CSS が役立ちます。
| h1 { 背景: URL(widget-image.gif) 繰り返しなし; } h1スパン { 位置: 絶対; 左:-2000ピクセル; } |
これで、美しい画像と実際のテキストの適切な非表示の両方が得られました。CSS の助けを借りて、テキストは画面の左側から -2000 ピクセルの位置に配置されました。
6. CSS ボックス モデル ハックの別のオプション。CSS ボックス モデル ハックは、IE6 より前のブラウザの表示の問題を解決するために使用されます。IE6.0 より前のバージョンでは、幅内に要素の境界値とパディング値が追加されます。幅の値)。たとえば、次の CSS を使用してコンテナの寸法を指定できます。
| ＃箱 { 幅: 100ピクセル; 境界線: 5px; パディング: 20px; } |
次に、HTML で適用します。
ボックスの合計幅は、ほとんどすべてのブラウザで 150 ピクセル (幅 100 ピクセル + 5 ピクセルの境界線 2 つ + 20 ピクセルのパディング 2 つ) ですが、IE6 より前のブラウザでは依然として 100 ピクセルです (境界線の値とパディングの値は、幅の値)、ボックス モデルのハックはこの問題を解決するように設計されていますが、問題も発生します。より簡単な方法は次のとおりです。
| css: ＃箱 { 幅: 150ピクセル; } #box div { 境界線: 5px; パディング: 20px; } html: ... |
これにより、どのブラウザでもボックスの合計幅は 150 ピクセルになります。
7.センターブロック要素
Web サイトが固定幅レイアウトを使用し、すべてのコンテンツが画面の中央に配置されていると仮定すると、次の CSS を使用できます。
| ＃コンテンツ { 幅: 700ピクセル; マージン: 0 自動; } |
HTML の本文内に任意の項目を配置でき、その項目は自動的に等しい左右の境界値を取得して中央揃えで表示されます。ただし、これは IE6 より前のブラウザでは依然として問題であり、中央揃えにならないため、次のように変更する必要があります。
| 体 { テキスト整列: 中央; } ＃コンテンツ { テキスト整列: 左; 幅: 700ピクセル; マージン: 0 自動; } |
body を設定すると、メイン コンテンツが中央に配置されますが、すべてのテキストが中央に配置されることもあります。このため、#content の div には text-align: left という値も指定する必要があります。
8. CSS を使用して垂直方向の中央揃えを実現する
表の場合、垂直方向の中央揃えは簡単です。セルをvertical-align: middleとして指定するだけですが、これはCSSレイアウトでは機能しません。ナビゲーション メニューの高さを 2em に設定し、CSS で垂直方向の配置規則を指定したとします。テキストは依然としてボックスの上部に配置され、まったく違いはありません。
この問題を解決するには、ボックスの行の高さをボックスの高さと同じに設定するだけです。この例では、ボックスの高さは 2em なので、CSS に別の行の高さ 2em を追加するだけです。垂直センタリングを実現！
9.コンテナ内での CSS の配置
CSS の最大の利点の 1 つは、ドキュメント内のどこにでもオブジェクトを配置でき、コンテナ内にもオブジェクトを配置できることです。 CSS ルールをコンテナに追加するだけです。
| ＃容器 { 位置: 相対的; } |
次に、コンテナ内の要素はコンテナを基準にして配置されます。次の HTML 構造を使用すると仮定します。
...
コンテナ内のナビゲーションを左端から 30 ピクセル、上から 5 ピクセルの位置に配置する場合は、次の CSS ステートメントを使用できます。
| #ナビゲーション { 位置: 絶対; 左: 30ピクセル; 上: 5px; } |
10.画面下まで広がる背景色
CSS の欠点の 1 つは、垂直方向の制御が欠如していることです。これにより、テーブル レイアウトでは発生しない問題が発生します。 Web サイトのナビゲーションを配置する列をページの左側に設定するとします。ページの背景は白ですが、ナビゲーション列の背景を青にするには、次の CSS を使用します。
| #ナビゲーション { 背景: 青; 幅: 150ピクセル; } |
問題は、ナビゲーション項目がページの下部まで拡張されておらず、当然のことながら、その背景色も下部まで拡張されていないことです。そのため、左の列の青い背景がページの途中で切り取られ、デザインが無駄になってしまいます。残念ながら、本文の背景を左の列と同じ色と幅の画像として指定することしかできません。CSSは次のとおりです。
| 体 { 背景: url(blue-image.gif) 0 0repeat-y; } |
背景画像は幅 150 ピクセルの青色の画像である必要があります。この方法の欠点は、em を使用して左列の幅を指定できないことです。ユーザーがテキストのサイズを変更してコンテンツの幅が拡大しても、背景色の幅はそれに応じて変更されません。
この記事の執筆時点では、これがこの種の問題に対する唯一の解決策であるため、自動的に引き伸ばされる別の背景色を取得するには、左側の列のピクセル値のみを使用できます。