効率的な CSS_html/css_WEB-ITnose を作成する

1. 効率的な使い方はCSSです

①：外部スタイルを使用してインラインスタイルまたはインラインスタイルを置き換えます。

インライン スタイルの使用は推奨されません:

インライン スタイルの使用は推奨されません:

推奨されます外部スタイルを使用するには: < ;link href="">

②: 古いバージョンのブラウザと互換性を保つために、@import を使用してスタイルをインポートするのではなく、link を使用して外部スタイル シートを導入することをお勧めします。 @import は CSS2.1 で導入されたため、古いブラウザではサポートされていません。

@import インポート方法は推奨されません:

外部スタイルシートの導入を推奨します:

③: 継承を使用する: 子要素が共有するスタイルを親要素に割り当てます

④: 複数のセレクターを使用します: assign 要素 よく使用されるスタイルをまとめて記述します。たとえば、h1、h2、h3、および h4 が同じスタイルである場合、これらを 4 つの別々の部分として記述するのではなく、まとめて記述します。

⑤: 複数の宣言を使用します。次のようには書かず、一緒に書く必要があります。

p { margin: 0 0 1em; }

p { background: #ddd; }
p { color: #666; }

⑥: 短縮形の属性を使用します。 margin:10px 10px;

⑦: !重要 の使用は避けてください。特定の場合に重みレベルを上げるために使用できます。 ---------------------------------

COLORS

本体背景：#def455

コンテナ背景：#fff

本文: #333

リンク: #00600f

訪問リンク: #098761

ホバーリンク: #aaf433

H1, H2, H3: #960

H4, H5, H6: #000
----------- ---------- ------------------------
*/

③: ID と Class に意味のある名前を付けます

④: 関連するスタイルルールを統合

#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }

#navigation { ... }

#navigation ul { ... }

#navigation ul li { ... }

#navigation ul li a { ... }

#navigation ul li a:hover { ... }

#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }
⑤: スタイルに明確さを加える コメント
3. サイト全体のCSSファイルを管理する

①: コンポーネント化されたCSS

②: 条件付きコメントを使用する