【読書メモ】CSSを使いこなそう 第2版_html/css_WEB-ITnose

div と scan:

div はブロックレベルの要素をグループ化するために使用され、span は行レベルの要素をグループ化するために使用されます。 div は分割を表し、文書をいくつかの意味のある部分に分割できます。div は、既存の要素が領域を分割できない場合にのみ使用してください。

Microformat (microformat):

HTML には対応する要素がないため、人、場所、日付などの情報を強調表示することが困難です。

参考: Microformat

Document Type Definition DTD:

DTD はセットです

DOCTYPE は、Web ページを解析するときに、これらのルールを使用してページの有効性をチェックし、適切なアクションを実行します。現在、厳密なスタイルと暫定的なスタイルの 2 つのタイプがあります

ブラウザ ベンダーが標準に準拠したブラウザを作成し始めたとき、下位互換性を確保したいと考えて、

標準モード

互換モード

ほぼ標準モード

セレクタ:

を作成しました。要素セレクター

descendantセレクター：2つのセレクター間のスペースで表されます

didセレクター

classセレクター

pseudo-classセレクター：

's' s 's' s 's' s '' 'sprow - - - ‐‐w‐selected で使用します。

ユニバーサル セレクター: *、要素のすべての子孫にスタイルを適用するか、子孫の 1 レベルをスキップするために使用できます

子セレクター: > のみを選択します要素の直接の子孫、つまり子要素

隣接兄弟セレクター :+、同じ親要素の下にある要素の後の要素を見つけるために使用されます

属性セレクター: 属性が存在するかどうか、または属性の値に基づいて要素を検索します属性

カスケードと特異性:

!重要な場合は重要性が高まります。

作成者のスタイルシート、つまりサイト開発者が最も重要で、次にユーザー、そして最後にブラウザまたはユーザーエージェントが使用するデフォルトのスタイルシートです

2つのルールの特異性が同じである場合、最後に定義されたものが優先されます

カスケードは次の重要な次数の順序を採用します:

でマークされています!重要なユーザー スタイル

のマークが付いています!著者スタイル

著者スタイル
ユーザー スタイル
ブラウザ/ユーザー エージェントによって適用されるスタイル
4. 継承:
5. スタイルが適用される要素の子孫は、スタイルの特定のプロパティを継承します

要素に直接適用されるもの継承されたスタイルの特異性が null であるため、スタイルは継承されたスタイルを常にオーバーライドします

スタイル シートの編成と保守の計画: コードを管理する方法

最近のブラウザーのベンチマークでは、リンクされたスタイルシートが遅いよりもスタイル シートのインポートの方が速いことが示されています

複数ファイルがあるとサーバーからより多くのパケットが送信され、これらのパケットの数 (コンテンツではない) がダウンロード時間に影響します

ブラウザは同じドメインから同時に限られた数のファイルしかダウンロードできません (古いブラウザの場合は 2、最新のブラウザの場合は 8)

CSS は C スタイルの /* */ コメントを使用します。簡単に検索できるように、各コメント ヘッダーにフラグ @ コメントを追加することをお勧めします

リンク: CSSDoc プロジェクト: CSS モジュール アノテーション

CSS ドキュメント構造

/* @group 一般スタイル 一般スタイル

----------------------------- ------ ---------------------------------*/

ボディスタイル

リセットスタイル

リンク
タイトル
その他の要素
4. /* @group ヘルパー スタイル 補助スタイル
5. --------------------------- ------ ------------------------------------*/

フォーム

通知とエラー

一貫したエントリ
2. /* @group ページ構造 ページ構造
3. -------------------------- -------- ----------------------------------*/

タイトル、フッター、ナビゲーション

レイアウト

その他のページ構造要素
2. /* @group ページコンポーネント ページコンポーネント
3. ----------------------- --------- ---------------------------------------*/

各種ページ

/* @group は

1. をオーバーライドします ----------------------------- ------ ----------------------------*/

カラー基準値テーブル

開発前のスタイルシート ヘッダーにカラールックアップテーブルを追加コメントとして入力し、完了後に削除します

/* カラー変数

@colordef #434343; ダークグレー;

@………………………………………….

*/

CSS の最適化

コメントの削除、空白の削除

リンク:

サーバー側圧縮: Apache の mod_gzip または mod_deflate

ボックスモデル

要素に背景を追加すると、背景はコンテンツとパディングで構成される領域に適用されるため、コンテンツが背景と混ざらないように要素の周囲に分離バンドを作成するためにパディングをよく使用します. 境界線を追加すると、内側のマージンの外側に線が追加されます。これは通常、要素間の間隔を制御するために使用されます。

css2.1 には、border 属性とは異なり、アウトライン属性も含まれています。アウトラインは要素ボックスの上に描画されるため、要素のサイズや位置に影響を与えません。アウトラインはページ レイアウトに影響を与えないため、バグの修正に役立ちます。 、ほとんどの最新ブラウザ (IE8 を含む) はアウトラインをサポートしています。

パディング、境界線、マージンはすべてオプションであり、デフォルトは 0 です。ただし、多くの要素には、ユーザー エージェント スタイルシートによって設定されたマージンとパディングが含まれます。

マージンは負の値にすることもできます

マージンオーバーレイ: 2 つ以上の垂直マージンが重なると、重なり合う 2 つのマージンの高さに等しいマージンが形成されます。要素が別の要素内に含まれている場合、要素を区切るパディングや境界線がないと仮定すると、上下のマージンも重なり合います。空の要素にマージンのみがあり、パディングやボーダーがない場合、その要素自体の上下のマージンも重なり合います。

マージンオーバーレイは、実際には、複数の段落で構成されるテキストページのどこでも距離を一定にする重要な意味があります。

通常のドキュメントのブロック ボックスの垂直方向の余白のみが重なり、インライン ボックス、フローティング ボックス、または絶対配置ボックス間の余白は重なりません。

ビジュアルフォーマットモデル

display: 生成されるボックスのタイプを変更します

block: ブロックレベルの要素、ブロックボックス、上から下に次々と垂直に配置され、ボックス間の垂直距離は、ボックスの垂直マージンによって計算されますbox , =

inline: インライン要素、インライン ボックスは、水平方向に一列に配置されます。水平方向のパディング、境界線、およびマージンを使用して水平方向の間隔を調整できますが、垂直方向のパディング、境界線、およびマージンは高さに影響しません。インラインボックス。インラインボックスで表示の高さまたは幅を設定しても効果はありません。線によって形成される水平フレームはフレームと呼ばれます。フレームの高さは常に、そこに含まれるすべての線を収容するのに十分な値になりますが、設定された高さによって、このフレームの高さまたは水平方向の境界線のパディングとマージンが増加する可能性があります。

none: 表示されず、生成された要素にはボックスがまったくなく、ドキュメント領域を占有しません

inline-block 名前が示すように、このステートメントでは要素をインライン要素のように水平に配置できますが、ボックスの動作はは依然としてブロックレベルのボックスの動作と一致しています

理解してください 画面に表示されるものはすべて何らかのボックスを形成します

匿名ブロックボックス: ブロックレベル要素 (div など) の先頭にテキストを追加するとき)、テキストはブロックレベル要素として扱われます

匿名行ボックス: ブロックレベル要素内のテキスト行。段落に 3 行のテキストが含まれると仮定すると、テキストの各行が匿名行ボックスを形成します

非一般的なものを使用する場合を除き、匿名のブロックまたはライン ボックスにスタイルを直接適用することはできません: 最初の行の疑似要素

CSS の 3 つの位置決めメカニズム:

通常のフロー: 要素ボックスの位置は、要素ボックスの位置によって決定されます。 HTML の要素

to 要素の位置は、通常のフローの初期位置に対してオフセットされますが、移動するかどうかに関係なく、要素は元のスペースを占有するため、要素を移動すると他のボックスを覆うことになります。

フローティング:

フローティング ボックスは、その外側の端が収容ボックスまたは別のフローティング ボックスの端に触れるまで、左右に移動できます。フローティングボックスは通常のドキュメントフローには存在しないため、通常のドキュメントフローのブロックボックスはフローティングボックスが存在しないかのように動作します

実際には、フローティングボックスが存在する場合でも、フローティングボックスは非フローティング要素に完全に影響を与えるわけではありません。ドキュメント フロー内の要素の後にフローティング ボックスがある場合、この要素のボックスはフロートがまったく存在しないかのように動作します。ただし、ボックスのテキスト コンテンツはフローティング要素の影響を受け、スペースを空けるように移動します。技術的に言えば、フロート要素の隣のライン ボックスは、フロート要素用のスペースを確保するために短縮されます。そのため、ライン ボックスはフロート ボックスの周囲を包みます (フロートは、実際にはテキストの折り返し効果を実現するように設計されています)。

ライン ボックスがフローティング ボックスの外側を囲むのを防ぐには、これらのライン ボックスを含む要素に clear 属性を適用する必要があります。clear 属性の値は、left、right、both、または none のいずれかで、どれであるかを示します。ボックスの側面がフローティングボックスに触れないようにしてください。要素をクリアするとき、ブラウザは要素の上端がフローティング ボックスの下に垂直に落ちるように、要素の上端に十分なマージンを追加します。

フローティング要素はドキュメント フローから切り離され、周囲の要素に影響を与えませんが、要素を削除すると、実際にはその前にフローティング要素用の垂直方向のスペースが残ります。

絶対配置:position:absolute;

絶対配置は、要素の位置をドキュメントフローから独立させます。通常のドキュメントフロー内の他の要素のレイアウトは、絶対配置された要素が存在しないかのようになります。 。絶対配置されたボックスを拡大した場合 (フォント サイズを大きくするなど)、周囲のボックスは再配置されないため、サイズを変更すると絶対配置されたボックスが重なり、慎重に調整されたレイアウトが台無しになる可能性があります

絶対配置された要素は、最も近い位置にある祖先を基準に配置されます。祖先が存在しない場合は、最初の包含ブロックを基準に配置されます。

絶対的に配置されたボックスはドキュメント フローとは関係がないため、これらのボックスの積み重ね順序は、z-index 値が大きいほど、その位置を制御できます。スタック内のボックスが高くなります。

要素

IE とボックス モデル

IE6 を含む以前のバージョンでは、これらのブラウザーの幅プロパティは、プロミスキャス モードで独自の非標準ボックス モデルを使用していました。コンテンツですが、コンテンツの幅、パディング、ボーダーの合計です。そのため、IE 独自のボックス モデルにより、要素が予想よりも小さくなります。

IE6 は固定位置をサポートしていません。IE7 は部分的にサポートしていますが、多くのバグがあります