div+css (重要なレビュー)_html/css_WEB-ITnose

CSS カスケード スタイル シート

优势：使页面结构和表现分离1.引入方式：   1）行内样式：<h2 id="Hello-World">Hello World</h2>　　2）内部样式：<style type="text/css">        　　　　  h2{        　　　　　　　　 color:#F00;           　　　　   }　　　　　　　　 </style>　　3）外部样式：<link href=“a.css”  type=“text/css” rel=“stylesheet”/>    推荐　　　　　　　 　<style type="text/css">     　　　　     @import url("a.css");                    //  @import “a.css”;　　　　　　    </style>　　　　问题：link和@import的区别：　Link和@import的区别： 　　　　　　　　　　　　　　　　　　  1.隶属上的差别     　　　　　　　　　　　　　　　　　　 link是一个html的一个标签，而@import是css的一个标签　 　　　　　　　　　　　　　　　　　　  2. @import次数限制  听说在IE下只能导入61个CSS样式文件   　　　　　　　　　　　　　　　　　　  3.加载顺序的不同   　　　　　　　　　　　　　　　　　　    当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，   　　　　　　　　　　　　　　　　　　    而@import引用的CSS 会等到页面全部被下载完再被加载。    　　　　　　　　　　　　　　　　　　  4.兼容性上的差别   　　　　　　　　　　　　　　　　　　    由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题    　　　　　　　　　　　　　　　　　　  5.使用DOM控制样式时的差别   　　　　　　　　　　　　　　　　　　    当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。　  优先级问题：行内样式  > 内部样式 > 外部样式   就近原则

 2.CSS选择器

      1）语法格式：选择器{属性：属性值；}    举例：h2{color：#0F0;}

　　2) 常见选择器

タグ セレクター h2{ } クラス セレクター .a { }

// 数値 ID セレクターは使用できません #a{ } // ID は一意の交差セレクタである必要があります h1,h2{ } ユニオン セレクタ (親クラス セレクタ) p a{ } 疑似クラス セレクタ アンカー接続 LoVe Hate CSS2 - :first-child 疑似クラス p:first -child { font-weight:大胆な; } ユニバーサルセレクター *{ }

　　注意：

　　　　一个HTML元素只能有一个ID选择器，但是可以有多个类选择器。

　　　　?<h1 id = “a” id = “b”></h1>                                             错误

border,margin,padding.

boder: テーブルボックスの境界線。 ： In Margin: テーブルボックスと外界との間の距離

パディング: テーブルボックスとボックスの中身の境界線との間の距離。

border: 1px 使用する 使用する 使用する 使用する 使用する ‐ ‐ オフからオフ。

ボーダーを個別に設定します:bottom border: border-bottom: 2px Solid #cccccc;

Head border: border-top: 2px Solid #cccccc;

マージンとパディングはボーダーと同様です。

IE6/IE7/Firefox の最終的な幅 = 左外側マージン + 左境界幅 + 左内側マージン + 幅 + 右内側マージン + 右境界幅 + 右外側マージン。

4. CSS フローティング

フローティングの概念:

div レイアウトを使用すると、各 div がブロック状に配置されていることがわかりました。これはページのレイアウトに役立たないため、CSS は要素のフローティング テクノロジーを提案しています。ブロック要素をフローティング時に同じ行に表示させることができます。

特徴

フローティング時に要素が親コンテナの境界線に当たるとスタックしてしまいます

子要素と親要素が同時に反対方向にフローティングすると、親要素が先にフロートし、次に子要素がフロートします親要素内でフローティングになります

親要素の場合 要素がフローティングではなく、フローティングの子要素を含む場合、フローティング要素はドキュメントフローから切り離されます（キーポイント）

1：Webページのレイアウト方法：フローティングレイアウト、位置決めレイアウト。これらはすべて文書の流れの制御の外にあります (トップダウンの関係)。 理 2: フローティング クリーニング: クリア

3: フローティング配置が選択されている場合
注: Web サイトの解像度とコンテンツ サイズの適応性が高い場合、フローティングする必要があります。中央レイアウトでは、水平幅をパーセンテージで拡大縮小でき、マージン、パディング、ボーダーなどの属性を使用する必要があります。
レイヤーをフローティングに設定すると、レイヤーはドキュメント フローから分離され、後続のレイヤーがこのレイヤーに流れ込みますが、テキストはこのレイヤーに流れ込みません。ドキュメントフローから完全に分離されていません


絶対配置ではレイヤーをドキュメントフローから完全に分離し、他のオブジェクトの上に配置します。このとき、レイヤーにはz-index属性が付いています。 z-index 属性の値が大きいほど、このレイヤーがより上に表示されます。位置には、絶対値と相対値という 2 つの一般的に使用される値があります。前者は絶対位置を表し、スペースを占有しません。後者は相対的な位置を表し、スペースを占有します。デフォルトではstaticに設定されていません

z-index
CSSのz-index属性は、ノードの重なり順を設定するために使用され、重なり順が高いノードは、重なり順が低いノードの前に表示されます。 z-index 属性の共通理解。