div+css style_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS とは、Cascading Style Sheets の英語の略称で、

margin: value 1 up, down, left and right margin: value 1 value 2 up, down, left and right です。 margin: 値 1 値 2 値 3 値 4 右上 左下

CSS スタイルプロパティ フォントプロパティ font (省略形) font-weight (太さ) font-size (サイズ) font-family (フォント) カラー (フォントの色) テキストのプロパティ 行の高さ テキストの配置 文字間隔 テキストの装飾 ボックスのプロパティ マージン ボーダー パディング /Padding) 幅 (幅) 高さ (高さ) 背景関連プロパティ background（省略形） background-color（背景色の設定） background-image（背景画像の設定） background-repeat（背景のタイリング方法の設定） background-position（背景の座標とオフセットの設定） )

CSS スタイル シートの分類: インライン スタイル 機能: タグの style 属性を使用して定義されたスタイル 例: G1T57

g1t57

インライン スタイル 機能: タグは HTML ドキュメントに埋め込まれ、通常は の間に記述されます。 /head> 利点: 1. 明確なコード構造 2. 簡単で柔軟なアプリケーション 3. コンテンツとパフォーマンスの分離

外部スタイル 外部スタイルをインポート 1) @import url("path/filename.css"); 2) <link rel ="stylesheet" type="text/css" href="path/filename.css"&gt ;

//タグセレクター タグセレクター { 属性: value; } //クラスセレクター class .Class selector { 属性: value; } //ID セレクター id #ID selector { 属性: value; } / /セレクター機能が含まれます: { より前のセレクターのみが属性 style に従います セレクター 1 セレクター 2 { 属性: value; } //結合されたセレクター機能: すべてスタイル ルール属性に従います セレクター 1 、セレクター 2 { 属性: 値; } // 疑似セレクター セレクター: 疑似クラス名 { 属性: 値;

同じスタイル属性の近接原則

異なるスタイル属性のオーバーレイ

CSS で一般的に使用されるセレクターには、ラベル セレクター、ID セレクター、クラス セレクター、疑似クラス セレクター、包含セレクター、および組み合わせセレクターが含まれます

CSS の優先順位: インライン スタイル > インライン スタイル > 外部スタイル ID セレクターはクラス セレクターより優先されます

---------------------------- --- --------------------------------------------------- --- ------

従来のテーブルレイアウトの欠点 1 冗長なコードと不明確な構造

2 ページの読み込み速度が遅い 3 柔軟性に欠ける配置

DIV+CSS レイアウトの利点 1 実際のコンテンツとパフォーマンスを分離できる？

2 コードは簡潔で構造が明確です 3 検索エンジンの優れたサポート 4 レイアウトの変更が簡単 5 正確かつ柔軟な配置

コンテンツとパフォーマンスの分離は DIV+CSS レイアウト設計の基礎です コンテンツとは、ページが実際にユーザーに伝える必要があるもの データ、ドキュメント、写真などを含む情報です。 パフォーマンスとは、タイトルのフォント サイズ、背景など、コンテンツの装飾的な部分を指します。

分離の利点コンテンツとパフォーマンス 1. Web ページのファイルは小さく、クライアントによってより速くダウンロードできます 2 コンテンツがデバイスに依存しないように、さまざまなスタイルシートを通じてさまざまなデバイスに適応するデータの多様な表示 3サイト全体の視覚的な一貫性を保ち、スタイルシートを変更することで簡単に修正できます 4. ページ構造がシンプルで、データの統合、更新と処理がより便利で柔軟です 5. 検索エンジンに検索されやすい

コンテンツとプレゼンテーションの分離を実現する手順 1. div を使用してセマンティック構造を定義します 2. CSS を使用して、背景、境界線、配置属性などを追加するなど、Web ページを美しくします。 3. DIV にコンテンツを追加します。テキスト、画像などとして (パフォーマンスなし) 属性ラベル)

ボックス モデル: ボックス モデルは、コンテンツ、ボーダー、パディング、マージンの 4 つの部分で構成されます。 分類: 1. 標準 W3C ボックス 機能: 標準W3C ボックス モデルの範囲にはマージン、ボーダー、パディング、コンテンツが含まれ、コンテンツ部分には他の部分は含まれません 使用範囲: すべてのブラウザに適用可能 計算式: 1) 標準 W3C ボックス モデル、ボックスが占める必要があるのは次のとおりです: 幅の式: margin*2 + border*2 + padding*2 + width 高さの式: margin*2 + border*2 + padding*2 + height 2) 標準 W3C の実際のサイズボックス モデルは次のとおりです: 幅の式: ボーダー *2 + パディング * 2 + 幅 高さの式: ボーダー * 2 + パディング * 2 + 高さ 2. IE ボックス 特徴: IE ボックス モデルの範囲には、マージン、ボーダー、パディング、コンテンツ 標準の W3C ボックス モデルとは異なります 内容: IE ボックス モデルのコンテンツ部分にはボーダーとパディングが含まれます 利用範囲: IE ブラウザーに適しています 計算式: IE ボックス モデル、ボックスが占める必要があるのは次のとおりです: 幅の式: margin*2 + 幅 高さの式: margin*2 + 高さ ボックスの実際のサイズは次のとおりです: 幅の式: 幅 高さの式: 高さ ボックス間の関係 1 水平ボックスの間隔 ボックスを2つ並べて表示した場合のボックス間の距離 距離はBOX1の右マージンとBOX2の左マージンの合計です 2つのボックスの縦の間隔 2つのボックスを表示した場合垂直方向では、それらの間の距離はBOXのmargin-bottomとBOX2のmargin-topです 2つの合計ではなく、大きい方 3つのボックスの重なり いずれかのマージン属性値を設定できますボックスの重なりを実現するには、ボックスを負の値に設定します

ボックスの配置 定義: 配置とは、要素を位置のどこかに配置することです カテゴリ: 1. フローティング配置 2. ボックスのフロー配置 3. 位置配置

3.1. 位置の位置決め 機能: Position 属性はページ要素の位置を制御するために使用されます 構文: Position: static/absolute/relative ;

注: 標準の W3C ボックス モデルと IE ボックスの最も重要な違いモデルは、IE ボックス モデルのコンテンツ部分にボーダーとパディングが含まれていることです

-------------------------------- - ------------------------------------------------- - ----------------- 1 標準ドキュメント ストリームはブラウザ側のパイプラインであり、ブラウザはドキュメント ストリームからデータを読み取り、順番に解析します。 2 フロー) は、デフォルトの Web ページ レイアウト モード 3 相対的な配置はフロー モデルのレイアウト ルールに従い、HTML ドキュメント フローに従って上から下に流れます 4 フローティング要素はブロック要素として表示されるように自動的に設定され、その幅と高さの属性はbe set 5 Floating elements are always located in the containing element and will be Breakaway from the document flow

フローモデル 定義: フローモデルは、絶対配置、固定配置を除き、標準のドキュメントフローレイアウトモードに基づいています。およびフローティング要素 、どの要素もデフォルトでフロー レイアウト モードになります したがって: ドキュメント フローからドラッグする位置決めメソッド属性を定義していない要素 (位置: 絶対; または位置: 固定;)、 は定義されませんDistribution の場合、左右にフローティングの属性 (float: left; または float: right;) を定義します。デフォルトでは、ブロック要素の幅は 100% であるためです。 インライン要素は、それを含む要素内で左から右に水平に表示されます。要素 相対配置フロー: フロー モデルのレイアウト ルールに従い、HTML ドキュメントに従います。 フローは上から下に流れます 相対的に配置された要素が定義されて移動された後、他のフロー要素の位置を占有することはありません が、可能です他の要素をカバーする フローティング モデル:

フローティング モデルの実装:

注: XHTML は、XML ルールに基づいて HTML4 を再構築する新しい仕様です。 XHTML は、さまざまなネットワーク デバイスやアプリケーションのニーズに適合し、表示するブロック要素として設定されます。フローティング要素は、垂直方向ではドキュメント フロー内の要素の位置と一致します。水平方向では、含まれる要素の端にドッキングされます フローティング要素はドキュメント フローから切り離されることはなく、常に含まれる要素内にあります。要素 浮動崩壊 親要素に浮動要素のみが含まれており、高さがゼロに崩壊する場合 Float Clear CSSでFloatをクリアする方法: clear属性 空のdivタグ overflow属性 擬似セレクタ後

注意: 絶対配置モデルでは、要素の位置は、それを含むブロックの左上隅のオフセットに基づきます 絶対配置された要素は、ドキュメント フローから完全に外れます