div+css は背景、一般的な利点などを生成します_html/css_WEB-ITnose

产生背景

　　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终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

流行优势

　　1、符合W3C标准。

　　2、支持浏览器的向后兼容。

　　3、搜索引擎更加友好。

　　4、样式的调整更加方便。

　　5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。

　　6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

嵌入方式 行内套用

　　可以在HTML文件内直接宣告样式。

　　举例来说，Thisisfontsize16.

　　以上的HTML文件在浏览器上会显现为：Thisisfontsize16.

　　嵌入套用样式可以嵌入于HTML文件中(通常是在内)。

　　举例来说，背景颜色是红色

　　以上的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 を見つけます。これにより、ページの他の部分のレイアウト スタイルを破壊することなくページを変更することがより便利になります。

IV. 視覚的な一貫性を維持する

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

5. 検索エンジンによるインデックスの強化

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

6. 閲覧者とブラウザにとってよりフレンドリー

ウェブサイトが閲覧者のために作られており、閲覧者とブラウザにとってよりフレンドリーであることは、この点でより多くの利点があることは誰もが知っています。 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 サイトの最適化にとって最も重要な指標であるためです。