10 の古典的な CSS テクニック_CSS/HTML

PHP中文网

リリース： 2016-05-16 12:12:36

オリジナル

1130 人が閲覧しました

1. CSS フォント属性の省略規則

一般に、CSS でフォント属性を設定する方法は次のとおりです:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif ;

ただし、これらをすべて 1 行に記述することもできます:

font: 太字斜体小文字 1em/1.5em verdana,sans-serif;

本当に良いです!注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。

2. 2 つのクラスを同時に使用する

通常、1 つの要素には 1 つのクラス (Class) のみを設定できますが、これは 2 つのクラスを同時に使用できないという意味ではありません。使用されます。実際、これを行うことができます:

...

に 2 つの P 要素を指定します。同時にクラスをスペースで区切って、テキストクラスとサイドクラスのすべての属性が P 要素に追加されるようにします。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。

補足: ID の場合、

...

と書くことはできません。

3. CSS ボーダーのデフォルト値

通常、次のようにボーダーの色、幅、スタイルを設定できます。

border: 3px Solid #000

これは、境界線を幅 3 ピクセルの黒の実線として表示します。しかし実際には、ここでスタイルを指定するだけで済みます。

スタイルのみが指定されている場合、他の属性はデフォルト値を使用します。通常、Border のデフォルトの幅は中程度で、通常は 3 ～ 4 ピクセルに相当します。デフォルトの色はテキストの色です。この値が適切であれば、それほど多くの設定を行う必要はありません。

4. 文書印刷用 CSS

多くの Web サイトには印刷用のバージョンがありますが、CSS Set 印刷スタイルで設定できるため、実際には必要ありません。

つまり、ページに 2 つの CSS ファイルを指定できます。1 つは画面表示用、もう 1 つは印刷用です。

1行目は表示用、2行目は印刷用のメディア属性に注目してください。

しかし、印刷用 CSS には何を書けばよいのでしょうか?通常の CSS を設計するのと同じ方法で設定できます。デザイン時にこのCSSを設定してCSSを表示し、効果を確認することができます。おそらく、display: none コマンドを使用して、一部の装飾画像をオフにし、一部のナビゲーションボタンをオフにすることになるでしょう。詳細については、「印刷の違い」の記事を参照してください。

5. 画像置換スキル

一般的には、標準の HTML を使用して画像の代わりにテキストを表示することをお勧めします。これにより、高速なだけでなく読みやすくなります。ただし、特殊なフォントを使用する場合は、画像のみを使用できます。

たとえば、物を販売するためのアイコンを作成したい場合は、次の画像を使用します:

もちろん可能ですが、検索エンジンにとっては、通常のテキストと比較して、alt の置換テキストにはほとんど関心がありません。これは、多くのデザイナーが検索エンジンを騙すためにここに多くのキーワードを配置しているためです。したがって、メソッドは次のようになります:

ウィジェットを購入

ただし、この方法では特別なフォントは必要ありません。同じ効果を実現するには、次のように CSS を設計できます。

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

画像の高さを実際の画像の高さに置き換えることに注意してください。ここでは画像が背景として表示され、実際のテキストは-2000ピクセルのインデントが設定されているため、画面左側に2000ポイント表示されて見えなくなります。ただし、画像をオフにしている人にとっては、まったく見えなくなる可能性があるので注意してください。

6. CSS ボックスモデルの別の調整テクニック

このボックスモデルの調整は主に IE6 以前のブラウザ向けです。、境界線の幅と空白も要素の幅にカウントされます。例:

#box { width: 100px; border: 5px; padding: 20px }

次のように呼び出します:

< p id="box">...

現時点では、ボックスの全幅は 150 ポイントである必要があります。これは、以下のすべてのブラウザに当てはまります。 IE6 より前の IE ブラウザデバイスではすべてが正しく動作します。ただし、IE5 などのブラウザでは、全幅は依然として 100 ポイントです。この違いは、先人が発明したボックス調整方法を使用して処理できます。

しかし、CSS を使用して表示の一貫性を持たせることで同じ目的を達成できます。

#box { width: 150px } #box p { border: 5px; padding: 20px }

次のように呼び出します:

...

このように、どのブラウザでも幅は 150 ポイントになります。

7. ブロック要素の中央揃え

固定幅の Web ページを作成し、Web ページを水平方向に中央揃えにしたい場合は、通常次のようになります。これ:

#content { width: 700px; margin: 0 auto }

すべての要素を囲むには

を使用します。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSS を次のように変更します。

body { text-align: center } #content { text-align: left; margin: 0 auto }

これにより、Web ページのコンテンツが中央に配置されるため、コンテンツに text-align: left が追加されます。