CSS をマスターする: 高度な Web 標準ソリューション (第 2 版)_html/css_WEB-ITnose

Mastering CSS: Advanced Web Standards Solutions (第 2 版)

ジャンプ先: ナビゲーション、検索

1. 重要度の段階: (つまり、user! important はインライン スタイルをオーバーライドできます)
   1. ! important、user>author、そして最後にブラウザ/ユーザー エージェント
2. ルールの特異性 (順序) の計算: a、b、c , d 同じ場合は後から定義した方が優先
   1. インライン形式の場合はa=1
   2. b=IDセレクター(#id)の数
   3. c=クラス、擬似クラス、属性 セレクターの数
   4. d=type、疑似要素セレクターの数
3. => 複雑なコンテンツを含む大規模な Web サイトでルールの順序を管理するにはどうすればよいですか? ? ?
4. @import はリンクよりも遅いですか?
5. p41 (縦) マージンオーバーレイ (=max(上のマージン-下、下のマージン-上))
   1. 要素がネストされて含まれており、空の要素はオーバーレイされます
   2. 通常のドキュメントフロー、インライン、フロートのブロックボックスのみ、position:absolute は重なりません
6. inline: 高さと幅を設定しても効果はありません、line-height
   1. => inline-block
7. {匿名ブロック、テキスト行ボックス} にスタイルを直接適用することはできません
8. position:relative: 元の位置を「基準にして」左と上を指定できます。要素は引き続き元のスペースを占有します
9. position:absolute: 要素はドキュメント フロー スペースを占有しません (これは、その z を増やすことと同等です) -index?)
   1. 距離に相対 最も近い祖先要素の位置決め (このことから、CSS が最初に祖先要素を配置し、次に子孫要素を配置することがわかります?)
10. position:fixed: ビューポートを基準とした相対位置 (通常は次の目的で使用されます)ユーザー コメント)
11. position:float: yes (ドキュメント フローの外) 包含ボックスまたは別のフローティング ボックスに当たるまで左右に移動します
    包含ブロック (包含ブロック?) がすべての要素を水平方向に収容できない場合、その他float 要素は下に移動します
    テキスト要素は float の影響を受け、WORD の「テキストの折り返し」と同様の効果が生じます
    2. これを防ぐには、これらのテキスト行のフロートをクリアします。
       空の要素clear:bothを使用して、親コンテナにフローティング要素を含めることができます。 (float コンテナを直接使用することもできますが、これは次の要素に影響します) IE 6- 'Holly hack' in
       p56 背景画像を使用して箇条書きを作成します
    p65 角丸は CSS 3 で扱いやすく、CSS 2.1 時代のさまざまなトリックはスキップされます
9-cut border-image: url(user-corner.gif) 25% 25% 25% 25% / 25pxroundround;
13. CSS シャドウ: box-shadow
    CSS 視差: 背景位置: 20% 0 ;
画像置換 (CSS 2.1):
FIR: display:none of text はスクリーン リーダーに適さないようにします
Phark: 画像をオフにして CSS をオンにする場合、text-indent:-5000px を使用しても効果はありません
16. ; sIFR (JS+Flash)
    p87 CSS 3 では次のことが可能です: ターゲット疑似クラス? (まあ、これで情報漏洩の問題はありません)
    外部リンクスタイル(Wiki共通)
p92 テキストは行ボックス(??)内で常に縦方向中央に配置されます。行の高さを設定するだけで、高さを使用すると問題が発生します。テキストは垂直方向の中央に配置されていないため、追加のパディングを設定する必要があります
CSS ツールヒント: 最も単純な title 属性はどうでしょうか?
p105 ナビゲーション バーで現在のページを強調表示します: 2 つの ID を使用し、そのうちの 1 つは本文に適用されます組み合わせの要素 Match (これにより、ナビゲーション バーの背景に特別な処理が必要なくなります...)
p114 古いバージョンの IE は、非アンカー要素での :hover の使用をサポートしていません。JS または .htc 動作ファイルを使用して、この機能を有効にすることができます。
CSS 画像マッピング: img を div でラップし、そのサイズを次と等しく設定します。画像と位置 :relative; 次に、各 li 要素を div に対して相対的に配置し、:hover を使用して境界線を表示します。 。 。
p129 長距離反転: アンカー要素で div/span/li をラップし、絶対配置を使用してこれらの要素をページ上の他の位置に移動します。アンカーの :hover を設定するだけです。要素。
p136 テーブル要素の境界線の 2 つのモデル: 崩壊|分離
フォーム要素
フィールドセット: ブロック タイトル (グループ パネル/ボックス)
ラベルを使用する 2 つの方法: 入力 (id) を関連付ける属性に使用します。
26. p153 'すべての CSS レイアウトの基礎は、位置決め、フローティング、マージン操作という 3 つの基本概念です。 '
    IE 6 - margin:auto をサポートしていません; 幸いなことに、IE は text-align:center; をテキストだけでなくすべてを中央に配置すると誤って解釈します (...)
p159 標準準拠のブラウザでは、要素のコンテンツがあまりにも大きい場合、大きい場合は、単にボックスの外側に拡張されます。ただし、IE では要素全体が展開されます (...-_-)
27. 3 列レイアウト: 2 つのネストされた 2 列レイアウトに分割されますか? ? ?
28. p164 フローレイアウト: + min-width! (笑、オンライン CSS 試験システムが開発できると思います。問題は px までの正確なレイアウトについてです。効果が正しいかどうかを確認するには JS が必要です...笑)
29. p166 柔軟なレイアウト: フォント サイズに応じて ( em 単位) レイアウト (ページのスケーリングをサポートするブラウザには必要ありません)
    1. body{font-size:62.5%;} はコンテナの幅を em 単位で設定するだけで、内部幅は引き続き %
30. p170 擬似列を使用します(略)

バグとバグ修正

1. IEの「hasLayout」(hasLayout)
   1. 次の属性を設定すると要素にレイアウトが付きます: float、display:inline-block;、width/height、zoom、writing- mode:tb- rl; IE7 で追加: overflow、min-width: 任意の値、max-width: none を除く任意の値
   2. 例: IE テキスト段落にはレイアウトがあり、周囲の float 要素の影響はありません
   3. 別の例: IE 6- では、レイアウトを持つ要素がコンテンツのサイズに合わせて誤って拡張されます...
2. ハックとフィルター (省略)
3. IE 6 の一般的なバグ:
   1. フロート要素のマージンを 2 倍にしますか? ? ? display:inline; に変更します
   2. 3px テキスト オフセット
   3. 一連のフロート要素の最後の要素の最後の数文字を重複します: コメントを削除します (...!)
   4. *IE6 の「いないいないばあ」バグ
   5. *相対コンテナ内の絶対配置 (o、i c、shit): .rel-container{height:1%;}

ケーススタディ

1. Roma Italia
   1. Cufon?画像や @font-face (???) なしで、選択したフォントを使用して HTML を表示します: 選択したフォントの EULA では、Web 上でのフォントの埋め込みを許可する必要があります
2. 山に登る
   1. :first-child
   2. combinationクラス