div+css どれくらい知っていますか?一見の価値あり_html/css_WEB-ITnose

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

 

产生背景　　

     HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后发布了XML。
　　XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。
　　而CSS关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）??但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

 

流行优势　　

符合W3C标准。 　　 支持浏览器的向后兼容。 　　 搜索引擎更加友好。 　　 样式的调整更加方便。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

嵌入方式

行内套用　　可以在HTML文件内直接宣告样式。 　　举例来说，Thisisfontsize16.
　　以上的HTML文件在浏览器上会显现为：Thisisfontsize16.
　　嵌入套用样式可以嵌入于HTML文件中(通常是在内)。 　　举例来说，背景颜色是红**ody>
　　以上的HTML会显现出：背景颜色是红色 　　

外部连接套用 　　在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。
　　该档案通常名称为.css。
　　在HTML文件的

..

之中，我们将用以下的程式码将这个.css档案连接进入：
　　
　　以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。
汇入套用　　外部的CSS样式也可以被汇入进HTML文件。 　　汇入的做法为利用@import这个指令。
　　@import的语法为：
　　@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，后被加入的CSS样式有优先的顺位(详情请见CSS串接)。
　　还有一种嵌入的方式是直接写在标签上的，不过这种写法有些限制，大多数标签都可以接受这种解法: 　　

文字

このコードはラベルを直接埋め込むことでラベル内の文字の色を変更していますが、cssの優先呼び出しレベルに応じてラベルを直接埋め込む書き方の方がより直接的で優先的に呼び出されます。

レイアウトのメリット

1. ページの読み込みを高速化します
ページのコードのほとんどがCSSで記述されているため、ページのボリュームと容量が小さくなります。テーブルのネスト方法と比較して、DIV+CSS はページをより多くの領域に分割し、ページを開いたときにレイヤーごとに読み込まれます。テーブルの入れ子のような大きなテーブルでページ全体を囲むのではなく、読み込み速度が非常に遅くなります。
2. トラフィック コストの削減: ページ サイズが小さくなり、閲覧速度が速くなります。これは、ホスト トラフィックを制御する一部の Web サイトにとって最大の利点です。

3. デザイン修正の効率化
DIV+CSS 制作方法を使用するため、ページ修正の時間を節約しやすくなります。地域コンテンツ タグに従って、CSS で対応する ID を見つけます。これにより、ページの他の部分のレイアウト スタイルを破壊することなくページを変更することがより便利になります。

4. 視覚的な一貫性を維持する
DIV+CSS の最も重要な利点の 1 つは、視覚的な一貫性を維持することです。これまで、ネストされたテーブルの作成方法では、ページ間または領域間で表示効果が変化していました。 。 DIV+CSS 制作方法を使用すると、全ページまたは全領域が CSS ファイルによって均一に制御され、異なる領域または異なるページに反映される効果の偏りが回避されます。

5. 検索エンジンによるインデックスの強化
HTML コードとコンテンツ スタイルのほとんどは CSS ファイルに書き込まれるため、Web ページのテキスト部分がより目立つようになり、検索エンジンによるインデックスが作成されやすくなります。

6. 閲覧者とブラウザにとってよりフレンドリー
ウェブサイトは閲覧者のために作られており、この点で DIV+CSS にはさらに多くの利点があることは誰もが知っています。 CSS は豊富なスタイルを備えているため、さまざまなブラウザに応じてページをより柔軟に統一した表示効果を実現できます。

問題はあります

DIV+CSS には一定の利点がありますが、現段階で CSS+DIV Web サイト構築に存在する問題も比較的明白で、主に次の点に反映されています。
まず、CSS への依存度が高いため、Web デザインは次のようなものになります。かなり複雑です。 HTML4.0 のテーブル レイアウト (表) と比較すると、CSS+DIV は手が届かないわけではありませんが、少なくともテーブルの配置よりもはるかに複雑で、初心者はもちろん、Web サイト デザインの専門家でも問題が発生しやすいです。これは、XHTML ウェブサイト デザイン言語の普及と応用にある程度の影響を与えました。
第二に、異常な CSS ファイルは Web サイト全体の通常の閲覧に影響を与えます。 CSS Web サイトで作成されたデザイン要素は、通常、複数の外部ファイルに配置されます。このファイルは非常に複雑であり、CSS ファイルが異常に呼び出されると、Web サイト全体が悲惨な状態になります。
第三に、CSS ウェブサイトのデザインにおけるブラウザーの互換性の問題は非常に顕著です。 HTML4.0 に基づいた Web デザインには、IE4.0 以降のバージョンではブラウザ互換性の問題はほとんどありません。ただし、CSS+DIV でデザインされた Web サイトは、IE では正常に表示されますが、Firefox では正しく表示されない可能性があります (これが、インターネット マーケターには認識できない理由です。 Firefox を使用することをお勧めします)。 CSS+DIV は、さまざまなブラウザ メーカーからのさらなるサポートがまだ必要です。
第四に、CSS+DIVが検索エンジン用に最適化されているかどうかは、CSS+DIVそのものではなく、Webデザインのプロフェッショナルレベルに依存します。 CSS+DIV の Web デザインは、Web ページが検索エンジン向けに最適化されることを保証するものではなく、さらに、コードのデザインが HTML Web サイトの Web ページの組み込みと検索エンジンによる並べ替えに比べて単純になることも保証しません。明らかに、テーブルや CSS の配置が使用されているかどうかによって測定されるものではありません。これが、従来のテーブル レイアウトで作成された多くの Web サイトが検索結果で上位にランクされるのに、CSS や Web 標準を使用して作成された多くの Web ページが依然として下位にランクされる理由です。検索エンジンにとって、Web サイトの構造、コンテンツ、関連する Web サイトのリンクなどの要素は常に Web サイトの最適化にとって最も重要な指標であるためです。

よくある間違い

1. HTML 要素にスペルミスがないか、終了タグを忘れていないか確認してください
ベテランでも div の入れ子関係で間違いを犯すことがよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。

2. CSSが正しいか確認してください
スペルミスがないか、末尾の}を忘れていないかなどを確認してください。 CleanCSS を使用して、CSS のスペル ミスをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。

3. エラーが発生した場所を特定します
エラーがレイアウト全体に影響を与える場合は、div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除してから、エラーが発生した場所を特定できます。エラーが発生しました。

4. border 属性を使用してエラー要素のレイアウト特性を決定します。レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。

5. float要素の親要素にclear属性を指定することはできません
MacIE上でfloat要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。

6. Float 要素は width 属性を指定する必要があります
幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。
さらに、要素を指定するときは、単位として px ではなく em を使用するようにしてください。

7. Float要素はmarginやpaddingなどの属性を指定できません
IEではmarginやpaddingを指定してfloat要素を表示するとバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。

8. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。

9. デフォルトのスタイルをリセットしましたか?
マージン、パディングなどの特定の属性の解釈はブラウザごとに異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。

10. DTD を書き忘れていませんか? ブラウザによって表示結果がどのように調整しても異なる場合は、ページの先頭にある次の行の DTD を書き忘れているかどうかを確認できます。

一般的に使用されるツール

1.Notepad.exe メモ帳、(小さなプログラム、いつでも手動編集、ジャンクが少ないコード、ビジュアルプレビューなし)

2.Dreamweaver (古いブランドの Web ページ編集ツール、フル機能、比較的大規模なプログラムですが、DIV+CSS 視覚化サポートにはあまり適していません)

3..editplus (アップグレードされたバージョンである必要があります)

4.Ultraedit

5.Golive (将来 Dreamweaver に代わる製品)

6.Topstyle (非常に多くの機能があり、記述エラーの可能性を減らすための CSS コードチェック機能。特に、ヘルプ ファイル内の CSS 命令の詳細な紹介は、CSS を初めて使用する人による学習に非常に適しています)

互換性メソッド。

IE6 と FF の違い: 背景:オレンジ;*背景:青;

IE6 と IE7 の違い: 背景:緑 !重要 ;背景:青;

IE7 と FF の違い: 背景:オレンジ; :green;

FF、IE7、IE6 の違い: 背景:オレンジ; IE8 互換:

HEAD

1. いくつかのブラウザは CSS で異なるキーワードをサポートしており、閲覧できます ブラウザ互換性の繰り返しの定義!重要 FireFox および IE7 で認識可能 IE6、IE7 で認識可能 IE6 で認識可能*+ IE7 で認識可能

2. IE 固有の条件付きコメント link rel="stylesheet" type="text/css" /> ->

3. いくつかのブラウザによる実際のピクセルの解釈 IE/Opera: オブジェクトの実際の幅 = (マージン左) + 幅 + (マージン右) Firefox/Mozilla: オブジェクトの実際の幅 = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-右)

4. マウスジェスチャーの問題: FireFox のカーソル属性はハンドをサポートしていませんが、IE は両方をサポートしているため、FireFox で HTML タグの Style 属性を設定する場合にポインターが使用されます。 、すべての位置、幅、高さ、サイズの値の後に px を付ける必要があります。IE もこの書き方をサポートしているため、一律に px 単位を追加します。 Obj.Style.Height = imgObj.Style.Height + 'px';

6. FireFox は、padding 5px 4px 3px 1px などの省略されたパディング属性設定を解析できません。 ;padding-right:4px;padding-bottom:1px0;

7. ul や ol などのリストのインデントを削除する場合は、list-style:none;margin: と記述する必要があります。 0px;padding:0px; ここで、margin 属性は IE で有効ですが、padding 属性は FireFox

8 で有効です。 IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox: 不透明度:0.6;

9. 角丸: IE: 角丸はサポートされていません。 -moz-border-radius-topleft:4px; -radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;

10. CSS 二重線バンプボーダー: IE: border:2px outset; -moz-border-top-colors: #d4d0c8 white; -moz-border- right -colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

11. IE は、カーソル スタイル ファイルとスクロール バーのカラー スタイルをカスタマイズするための CSS メソッドをサポートしています。上記の 2 つをサポートします。どれもサポートしていません

12。IE には、Select コントロールが常に最前面に表示され、すべての CSS が Select コントロールで機能しないというバグがあります

13。IE は、フォーム内のラベル タグをサポートします。およびテキストコンテンツ; FireFox はサポートしていません 画像を含むラベル、画像をクリックしても、Radio または CheckBox でマークされたラベルは効果を持ちません

14. FireFox の TextArea は onScroll イベントをサポートしません

15。表示のインラインとブロックをサポートします

16. FireFox の Div 設定 margin-left と margin-right が auto に設定されている場合、それらはすでに中央に配置されていますが、IE では text-align が Body に設定されません。 Div は、中央に配置されるように margin: auto (主に margin-left margin-right) を設定する必要があります

18. ハイパーリンクの CSS スタイルの順序は、L-V-H-A に従うのが最善です。つまり、 (IE のみに適用)

25. テキストを垂直方向に中央揃えに設定します。 ="text/css" , 解決策: overflow:hidden | line-height:1px のようにコンテナを設定して表示します。 Flash の上のレイヤー