CSS Web ページを作成するための 9 つの実践的なヒント

この記事では、Web サイト再構築の基礎を築くためのいくつかの一般的な CSS テクニックをまとめました。何か役立つことを学んでいただければ幸いです。

1. CSS の略語を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSSの略語に関する主なルールについては、「CSSの基本構文」を参照してください。

2.値が0でない限り、単位を明確に定義します

サイズの単位を定義するのを忘れるのは、CSS初心者にありがちな間違いです。 HTML では単に ;100 と書くことができますが、CSS では「width:100em」のように正確な単位を指定する必要があります。単位を未定義のままにできる例外は 2 つだけです: 行の高さと 0 の値、それ以外の場合。他の値は単位の後に続く必要があります。値と単位の間にスペースを追加しないように注意してください。 3. 大文字と小文字の区別

XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。 HTML と XHTML では、クラスと ID の値も大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS タグの定義を注意深く確認してください。

4. クラスと ID の前に要素の修飾を解除します

要素のクラスまたは ID を定義するために記述するとき、ID はページ内で一意であるため、前の要素の修飾を省略できます。 s はページ内で複数回使用できます。例:

div#content { /*declarations */ }

#content { /* 宣言 */ }
.details { /* 宣言 */ }

これにより、いくつかのバイトを節約できます

5. デフォルト値

通常、padding のデフォルト値は 0、background-color です。デフォルト値は透明ですが、競合が心配な場合は、次のようにスタイルシートの先頭ですべての要素のマージンとパディングの値を 0 として定義できます。

* {

margin :0;

padding:0;

}

6. 継承可能な値を繰り返し定義する必要はありません

CSSでは、色などの親要素の属性値を自動的に継承します。はい、繰り返し定義することなく子要素に直接継承できます。ただし、ブラウザーがいくつかのデフォルト値で定義を上書きする可能性があることに注意してください。 7. 最近の第一原則

同じ要素の定義が複数ある場合は、最も近い（最小レベルの）定義が優先されます。例えば、このようなコードがあります

Update: Lorem ipsum dolor set

CSSファイルには、要素 p を定義し、classupdate

p {

margin:1em 0;

font-size:1em;

}

.update {

font-weight:bold; 600;

}

この 2 つの定義のうち、class が p より近いため、class ="update が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。 8. 複数のクラス定義

1 つのタグで複数のクラスを同時に定義できます。例: まず 2 つのスタイルと、最初のスタイルの背景を定義します。 style は # 666;2 番目のスタイルの境界線は 10 px です

.one{;background:#666;}
.two{border:10px Solid #F00;}

ページのコード内で呼び出すことができます。このように

最後の表示効果は、この div に #666 の背景と 10px の境界線の両方があることです。はい、これは可能です。試してみてください。 . 子孫セレクターを使用する

CSS 初心者は、子孫セレクターの使用が効率に影響を与える理由の 1 つであることを知りません。次のコードを見てみましょう。 class="subnavitem>"

div>

このコードのCSS定義は

div#subnav ul { /* スタイリング */ }

div#subnav ul li.subnavitem { /* スタイリング */ }

div#subnav ul li.subnavitem 上記のコードを次のメソッドに置き換えることができます

スタイル定義は次のとおりです。

#subnav { /* いくつかのスタイリング */ }
subnav .sel a { /* いくつかのスタイリング */ }

サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。