1.CSSフォント属性の省略規則
一般に、CSS はフォント属性を設定するために使用されます。
フォントの太さ:太字;
フォントスタイル:斜体;
フォントの種類:小文字;
フォントサイズ:1em;
行の高さ:1.5em;
フォントファミリー:verdana、サンセリフ;
これらすべてを 1 行で書くことができます。
フォント: 太字斜体小文字 1em/1.5em ベルダナ、サンセリフ;
これは非常に簡単だと思われませんか? 注意すべき点が 1 つだけあります。この省略方法は、font-size プロパティと font-family プロパティが同時に指定されている場合にのみ機能します。また、font-weight、font-style、font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。
2.CSSボーダーのデフォルト値
通常、次のように境界線の色、幅、スタイルを設定できます。
ボーダー: 3px ソリッド #000;
これにより、境界線が幅 3 ピクセルの黒の実線で表示されます。しかし実際には、ここでスタイルを指定するだけで済みます。
styleのみを指定した場合、他のプロパティはデフォルト値が使用されます。通常、Border のデフォルトの幅は中程度で、通常は 3 ～ 4 ピクセルに相当します。デフォルトの色はテキストの色です。この値が適切であれば、それほど多くの設定を行う必要はありません。
3. 要素に 2 つのクラスを同時に使用する
通常、1つのクラス(Class)には1つの要素が設定されますが、2つ使用できないわけではありません。実際、次のようにすることができます。
<p class="text side">…</p>
P 要素にスペースで区切って 2 つのクラスを同時に指定すると、テキスト クラスとサイド クラスのすべての属性が P 要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。
補足: ID の場合、<p id="text side">…</p> やこのように書くことはできません。
4. 文書印刷用CSS
多くの Web サイトには印刷専用のバージョンがありますが、CSS を使用して印刷のスタイルを設定できるため、これは実際には必要ありません。
つまり、ページに 2 つの CSS ファイル (画面表示用と印刷用に 1 つ) を指定できます。
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
1行目は表示用、2行目は印刷用です。メディア属性に注意してください。
しかし、印刷用CSSには何を書けばいいのでしょうか？通常の CSS を設計するのと同じ方法で設定できます。デザイン時にこのCSSを設定してCSSを表示し、効果を確認することができます。おそらく、一部の装飾画像をオフにしたり、一部のナビゲーション ボタンをオフにしたりするために、display: none コマンドを使用することになるでしょう。
5. CSS画像置換スキル
一般に、標準の HTML を使用して画像ではなくテキストを表示することをお勧めします。これにより、高速なだけでなく読みやすくなります。ただし、特殊なフォントを使用する場合は、画像のみを使用できます。
たとえば、物を販売するためのアイコンを作成したい場合は、次の画像を使用します。
<h1><img src=”widget-image.gif” alt=”ウィジェットを購入” /></h1>
もちろんこれは可能ですが、検索エンジンにとっては、通常のテキストに比べて、alt の置換テキストにあまり関心がありません。これは、多くのデザイナーが検索エンジンを欺くために、ここに多くのキーワードを配置するためです。したがって、メソッドは次のようになります。
<h1>ウィジェットを購入する</h1>
ただし、特別なフォントはありません。同じ効果を実現するには、次のように CSS を設計します。
h1 { 背景: url(widget-image.gif) 繰り返しなし; 高さ: 画像の高さ テキストインデント: -2000px }
画像の高さを実際の画像の高さに置き換えることに注意してください。ここでは画像が背景として表示され、-2000ピクセルのインデントが設定されているため、実際のテキストは画面左側の2000ポイントに表示され、見えなくなります。ただし、画像をオフにしている人にとっては、まったく見えなくなる可能性があるので注意してください。
6. CSSボックスモデルのもう一つのテクニック
この Box モデルの調整は主に IE6 より前の IE ブラウザ向けであり、境界線の幅と空白も要素の幅にカウントされます。例えば：
#box { 幅: 100 ピクセル; パディング: 20 ピクセル }
次のように呼び出します。
<div id="box">…</div>
ボックスの全幅は 150 ポイントになるはずです。これは、IE6 より前の IE を除くすべてのブラウザで正しくなります。ただし、IE5 などのブラウザでは、全幅は依然として 100 ポイントです。この違いは、先人が発明したボックス調整方法を使用して処理できます。
ただし、表示に一貫性を持たせるために CSS を使用しても同じ目的を達成できます。
#box { 幅: 150px }
#box div { ボーダー: 5px; パディング: 20px }
次のように呼び出されます:
<div id="box"><div>…</div></div>
このように、どのブラウザでも幅は 150 ポイントになります。
7. CSS はブロック要素が中央に水平に配置されるように設定します
固定幅の Web ページを作成し、その Web ページを水平方向の中央に配置したい場合、通常は次のようになります。
#content { 幅: 700px; マージン: 0 自動 }
<div id="content"> を使用してすべての要素を囲みます。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSSを次のように変更します。
body { text-align: center } #content { text-align: left; マージン: 0 auto }
これにより、Web ページのコンテンツが中央に配置されるため、text-align: left が Content に追加されます。
8. CSS を使用して垂直方向の配置を処理する
テーブルユニットを垂直配置：中央に設定するだけで、テーブルを使用して簡単に垂直方向の配置を実現できます。しかし、これは CSS では役に立ちません。ナビゲーション バーの高さを 2em に設定し、ナビゲーション テキストを垂直方向の中央に配置したい場合、この属性を設定しても役に立ちません。
CSSメソッドとは何ですか？ちなみに、これらの単語の行の高さを 2em に設定します: line-height: 2em これで完了です。
9. コンテナ内での CSS の配置
CSS の利点の 1 つは、コンテナ内であっても要素を任意に配置できることです。たとえば、このコンテナの場合:
#container { 位置: 相対 }
このようにして、コンテナ内のすべての要素が相対的に配置され、次のように使用できます。
<div id="container"><div id="navigation">…</div></div>
左から 30 点、上から 5 点の位置を特定したい場合は、次のようにします。
#ナビゲーション { 位置: 左: 30 ピクセル; 上: 5 ピクセル
もちろん、次のようにすることもできます。
マージン: 5px 0 0 30px
4 つの数字の順序は上、右、下、左であることに注意してください。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。
CSS レイアウトとテクニックの詳細については、52CSS.com にある多数のチュートリアルを参照してください。
10. 背景色を画面の一番下まで表示
垂直方向の制御は CSS の機能を超えています。ナビゲーション バーをコンテンツ バーと同様にページの下部に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のように CSS のみを使用する場合は次のようになります。
#ナビゲーション { 背景: 青; 幅: 150px }
短いナビゲーション バーは最後まで到達せず、コンテンツの途中で終了します。何をするか？
残念ながら、チートする唯一の方法は、短い列に列幅と同じ幅の背景画像を追加し、設定された背景色と同じ色にすることです。
body { 背景: url(blue-image.gif) 0 0 繰り返し-y }
現時点では単位として em を使用することはできません。リーダーがフォント サイズを変更するとトリックが明らかになるためです。また、使用できるのは px だけです。