li> ;
スタイル定義は次のとおりです:
#subnav { /* いくつかのスタイリング */ }
#subnav li { /* いくつかのスタイリング */ }
#subnav a { /* いくつかのスタイリング */ }
# subnav .sel { /* いくつかのスタイリング */ }
#subnav .sel a { /* いくつかのスタイリング */ }
サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。
DIV+CSS Web ページ レイアウト スキルの例 13: 背景画像のパスに引用符を追加する必要はありません 引用符は必要ないため、バイト数を節約するために、背景画像のパスに引用符を追加しないことをお勧めします。例:
background:url("images/***.gif") #333;
background:url(images/***.gif) #333; と書くことができます。代わりに、いくつかのブラウザエラーが発生します。
DIV+CSS Web ページ レイアウト スキル例 14: グループ セレクター
グループ セレクター (グループ セレクター)
一部の要素タイプ、クラス、または ID に共通の属性がある場合、グループ セレクターを使用して複数の繰り返し定義を回避できます。これにより、かなりのバイトを節約できます。
例: すべてのタイトルのフォント、色、マージンを定義するには、次のように記述できます:
h1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande",Lucida, Arial,Helvetica, sans-serif;
color:#333;
margin:1em 0;
}
使用中に独立したスタイルを定義する必要がある個別の要素がある場合は、次のように新しい定義を追加したり、古い定義を上書きしたりできます。
h1 { font-size:2em; }
h2 { font-size:1.6em; }
DIV+CSS Web ページのレイアウト スキル 例 15: 正しい順序でリンク スタイルを指定する
CSS を使用して複数のリンクを定義する場合ステータス スタイルを設定する場合は、その記述順序に注意してください::link :visited :hover :active。抽出された最初の文字は「LVHA」で、「LoVe HAte」（好きか嫌いか）として覚えられます。なぜそのように定義されているのでしょうか? Eric Meyer の「Link Specificity」を参照してください。
ユーザーがキーボードを使用して制御する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます。 :focus 属性の効果は、フォーカスされた要素に :hover 効果を表示させる場合は、:hover 効果を置き換える場合は :focus を記述する位置によっても異なります。 :hover の後に :focus を置きます。
DIV+CSS Web ページ レイアウト スキル例 16: フロートのクリア
非常に一般的な CSS の問題は、配置にフロートを使用する場合、下位レイヤーがフローティング レイヤーで覆われているか、レイヤー内にネストされているサブレイヤーが外側のレイヤーを超えていることです。レイヤー範囲。
通常の解決策は、フローティング レイヤーの後ろに div や br などの追加要素を追加し、そのスタイルをクリアとして定義することです:両方。この方法は少し突飛ですが、幸いなことに、これを解決する良い方法があります。「構造マークアップを使用せずにフロートをクリアする方法」を参照してください。 上記の 2 つの方法は、フローティング オーバーフローの問題を非常にうまく解決できますが、レイヤーまたはレイヤー内のオブジェクトを本当にクリアする必要がある場合はどうすればよいでしょうか?簡単な方法は、オーバーフロー属性を使用することです。この方法はもともと「フロートの単純なクリア」で公開され、「クリアランス」および「フロートの超簡単なクリア」で広く議論されています。
上記の明確な方法のどれがあなたにより適しているかは、特定の状況によって異なるため、ここでは説明しません。さらに、float の適用については、いくつかの優れた記事で明確に説明されています。「Floatutorial」、「Float を含む」、および「Float Layouts」を読むことをお勧めします
私の方法は、次のコードをスタイル シートに追加することです。
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
次に、float をクリアする必要があるページを追加します:
この記事は、DIV+CSS Web ページ レイアウト スキルの例 17: 水平方向のセンタリング (センタリング) から引用しました
これは簡単なトリックですが、次のような初心者の質問が多すぎるため、もう一度言う価値があります: CSS を水平方向に中央揃えにする方法は?レイアウトがレイヤー (コンテナー) に含まれている場合は、要素の幅を定義し、水平方向のマージンを定義する必要があります。
水平方向に中央揃えにするには、次のように定義できます。
#wrap {
width :760px ; /* レイヤーの幅に変更します */
Margin:0 auto;
}
ただし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、非常に便利なトリックを使用します。それは、text-align 属性を使用することです。こんな感じです:
body {
text-align:center;
}
#wrap {
width:760px; /* レイヤーの幅に変更します*/
margin:0 auto;
}
本文の最初の text-align:center; ルールは、IE5/Win の本文のすべての要素が中央に配置されることを定義し、2 番目の text-align:left; はテキストを中央に配置することを定義します。 #warp の要素 テキストは左側にあります。
DIV+CSS Web ページ レイアウト テクニックの例 18: CSS をインポートして非表示にする
古いバージョンのブラウザーは CSS をサポートしていないため、一般的なアプローチは @import テクニックを使用して CSS を非表示にすることです。例:
@import url("main.css");
しかし、この方法はIE4では機能せず、しばらく頭を悩ませていました。後で、次のように書きました:
@import "main.css";
これで、IE4 で CSS を非表示にすることができます。笑、これで 5 バイトも節約できました。 @import 構文の詳細な説明を知りたい場合は、「centricle の CSS フィルター チャート」を参照してください
DIV+CSS Web ページ レイアウト スキル例 19: CSS ハックを使用して IE を最適化する
場合によっては、いくつかの特別なバグを定義する必要がありますIE ブラウザの場合 世の中には非常に多くの CSS ハックがありますが、私はそのうちの 2 つだけを使用します。どちらも最も安全です。
1.注釈方法この書き込み方法については、IEブラウザー（他のブラウザーから隠された）によってのみ理解できます（他のブラウザーから隠されています）
* html p {
/*宣言*/
}
（c）時々、ie/が欲しい/ Win to be valid but IE/Mac to be hidden, you 「バックスラッシュ」テクニックを使用できます:
/* */
より持続可能なアプローチは、Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用することです。この方法を使用すると、メインのスタイル シートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。このように:
