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

この記事では、Web サイト再構築の基礎を築くための CSS Web ページを作成するための 9 つの実践的なテクニックを紹介します。

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

2. 値が 0 でない場合は単位を明確に定義します。 サイズの単位を定義するのを忘れたCSS初心者です

この記事では、Web サイト再構築の基礎を築くためのいくつかの一般的な CSS テクニックをまとめました。何か役立つことを学んでいただければ幸いです。
1. CSS の略語を使用する
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSSの略語に関する主なルールについては、「CSSの基本構文」を参照してください。
2. 値が 0 でない場合は、単位を明確に定義します サイズの単位を定義するのを忘れるのは、CSS 初心者によくある間違いです。 HTML では単に ;100 と書くことができますが、CSS では「width:100em」のように正確な単位を指定する必要があります。単位を未定義のままにできる例外は 2 つだけです: 行の高さと 0 の値、それ以外の場合。他の値は単位の後に続く必要があります。

3. 大文字と小文字を区別する XHTML で CSS を使用する場合、この種類の要素名は大文字と小文字を区別します。エラーが発生する可能性があるため、すべての定義名を小文字にすることをお勧めします。 HTML と XHTML ではクラスと ID の値も大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS と XHTML のタグでの定義を注意深く確認してください。
4. class と id の前に要素の修飾を解除します
要素の class または id を定義する場合、Lass はページ内で複数使用できるため、前の要素の修飾を省略できます。たとえば、
p#content { /*declarations */ } fieldset.details { /*declarations */ } と記述することはできません。 { /* 宣言 */ }
.details { /* 宣言 */ }
これにより、いくつかのバイトが節約されます。

5. デフォルト値

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

6. 継承可能な値を繰り返し定義する必要はありません CSSでは、親要素で定義された色やフォントなどの属性値を子要素が自動的に継承します。子要素に直接継承できます。定義を繰り返す必要はありません。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。
7. 最も近い第一原理
同じ要素の定義が複数ある場合、最も近い（最小レベルの）定義が優先されます。例えば、次のようなコードがあります
Update: Lorem ipsum dolor set
。 CSS ファイルでは、要素 p が定義されており、classupdate
p {
margin:1em 0; color:#333; font-weight:bold; も定義されています。
カラー:#600;
これら 2 つの定義のうち、class が p より近いため、class="update が使用されます。詳細については、W3C の「セレクターの特異性の計算」を確認してください。 8. 複数のクラス定義

1 つのタグで同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。
.one{;background:#666;}
.two{border:10px ソリッド #F00;}
ページのコードでは次のように呼び出すことができます
＜p class="one" two＞＜/p＞
最終的な表示効果は、p に #666 の背景と 10 ピクセルの境界線の両方があることです。はい、これは可能です、試してみてください。

9. 子孫セレクターを使用する

CSS 初心者は、子孫セレクターの使用が効率に影響を与える理由の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう:
＜p id="subnav＞"
＜ul＞
＜li class="subnavitem>" ＜li class="subnavitemselected＞" ＜a href=# class="subnavitemselected＞" 項目 1＜/a＞ ＜/li＞ ＜li class="subnavitem＞" ＜a href=# class=" subnavitem ＞「項目 1＜/a＞ ＜/li＞
＜/ul＞
＜/p＞
このコードの CSS 定義は次のとおりです:
p#subnav ul { /* いくつかのスタイリング */ }
p#subnav ul li.subnavitem { /* いくつかのスタイリング */ }
p#subnav ul li.subnavitem a.subnavitem { /* スタイリング */ }
p#subnav ul li.subnavitemselected { /* スタイリング */ } p#subnav ul li.subnavitemselected a.subnavitemselected { /* スタイリング */ }代わりに次のメソッドを使用できます上記コード
＜ul id="subnav＞"
＜li＞＜a href=#＞項目1＜/a＞＜/li＞
＜li class="sel＞"＜a href=#＞項目1＜ /a＞ ＜/li＞
＜li＞ ＜a href=#> 項目 1＜/a＞ ＜/li＞
＜/ul＞
スタイル定義は次のとおりです:
#subnav { /* いくつかのスタイリング */ }
# subnav li { /* スタイリング */ }
#subnav a { /* スタイリング */ }
#subnav .sel { /* スタイリング */ }
#subnav .sel a { /* スタイリング */ }
サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。                                                                        

以上がCSS Web ページを作成するための 9 つの実践的なヒントを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。