CSS+DIV Webページ再構成技術の基礎_html/css_WEB-ITnose-htmlチュートリアル-php.cn

DIV+CSS は、Web サイト標準 (または「WEB 標準」) でよく使用される用語の 1 つであり、通常、XHTML Web デザイン標準では、HTML Web デザイン言語のテーブル配置方法との違いを説明するために使用されます。テーブル配置テクノロジを使用する代わりに、DIV+CSS を使用してさまざまな配置を実現します。
CSSとは英語のCascading Style Sheetsの略で、HTMLやXMLなどのファイルスタイルを表現するために使われるコンピュータ言語です。
HTML言語がHTML4.01以降、新しいバージョンをリリースしなくなった理由は、HTML言語がますます複雑化、専門化しているためです。つまり、タグの数はますます増えており、さまざまなブラウザの製造元でも、特定のブラウザにのみ適した HTML タグを開発しているため、明らかに HTML Web ページの互換性が妨げられています。そこで W3C 組織は SGML から栄養を取り戻し、XML は HTML よりも厳密なマークアップ言語であり、正式名は Extensible Markup Language (EXtensible Markup Language) です。ただし、XML は複雑すぎるため、現在のほとんどのブラウザは XML を完全にはサポートしていません。そこで便利なのが、XHTML 言語です。XHTML 言語で書き換えられた HTML ページは、多くの XML アプリケーション技術を適用できます。これにより、Web ページを拡張しやすくなり、自動データ交換に適した、より規則的なものになります。ここまでお話しましたが、そろそろ CSS の本題に入ります。実際、CSS は、単独で使用する場合に少し面倒であることを除けば、HTML に比べて明らかな利点はありません。重要なのは、スクリプト言語 (JavaScript など) と XML テクノロジ、つまり CSS+Javascript+XML との統合にあります (実際には、XML+XSL+Javascript というより優れた統合があります)。しかし、XSL は拡張可能なスタイルです。シート CSS に比べて言語が複雑すぎて使いにくい。 CSS の出現以来、HTML はついに乱雑さの悪夢から解放され、ページのコンテンツをスタイルから分離し始めました。ここまで言いましたが、実際のところ、本当の意味は使ってみないと分からないので、今から使いこなせるようにしましょう。
DIV要素は、HTMLドキュメント内のブロックレベルのコンテンツの構造と背景を提供するために使用される要素です。 DIV の開始タグと終了タグの間のすべてがブロックの形成に使用され、含まれる要素のプロパティは DIV タグのプロパティによって、またはスタイルシートを使用してブロックをフォーマットすることによって制御されます。
近い将来、テーブルの地位は依然として非常に重要であるため、Googleのような企業は依然として繁栄するでしょう。しかし、div はオンライン世界の発展の方向性を表します。一つは簡単、もう一つは上級、大根とキャベツ、何を選んでもメリットがあります。お客様のご要望に合わせて真剣に対応させていただきます！
divはhtml（ハイパーテキスト言語）の要素です。 div+cssは、従来のテーブルレイアウトとは異なり、まさにw3cのコンテンツとパフォーマンスの分離を実現するWebページのレイアウト方法です。 , css はカスケードスタイルシートです
DIV+CSS の高度なレイアウトが徐々に普及してきましたが、いわゆる DIV+CSS レイアウトは人々をより不安にさせます。DIV を Table の代替にしないでください。多層ネスト DIV は真剣に考えます。コードの読みやすさに影響を与えるため、HTML が提供するタグを利用してみましょう。
DIV はどのような場合に使用する必要がありますか? Global Security Network を構築する場合、90% の確率で CSS+DIV が使用されますが、これに関しては厳密なルールはありませんが、個人的には DIV の方が適切であると考えています。たとえば、ヘッダー領域は次のように DIV を定義する必要があります。
これはヘッダーフレームに書き込む内容です
もちろん、クラスごとに定義することもできますが、一般的には、クラスがあれば、同じページに重複する要素はありません。ID を使用できます。区別する方が良いです。
次の定義コードを参照してください

No. 214
トップナビゲーション (ul 部分)、上の大きなロゴを定義します。左と丸い No. 提供されているタグとスタイル名の定義
その他の最も一般的に使用されるレイアウトタグ
h1
このタグで表示されるフォントが非常に「大きい」ため、実際にこのタグを使用する人はほとんどいないかもしれませんが、私たちは CSSer です。変更できないタグのスタイルは何でしょうか。また、このタグで表現できる意味は元のタグと同じです。関数は（大きなタイトル）と同じくらい明白です。使い方はすでにわかっていると思います^_^
ul
このタグはナビゲーション部分を定義するためによく使用されます。もちろん、olに置き換えることもできます。ナビゲーション接続に順序はありません。違うので、ul を使用する方が正確です (CSS を削除すると効果がより顕著になります)
b
中国秘書ネットワーク個人的な仕事の概要半年の仕事の概要年末の仕事の概要財務業務概要教師業務概要教育業務概要道徳教育業務概要学校業務概要安全業務概要青年団委員会業務概要党員業務概要企業業務概要クラス教師業務概要党支部業務概要党支部主催者スピーチ開会式スピーチ新年のスピーチ結婚式司会者スピーチフェスティバルスピーチ夕べのスピーチ記念スピーチリーダーシップスピーチお悔やみとお祝いの言葉年間活動計画個人活動計画学校活動計画党支部活動計画、青年団委員会活動計画、学級教師活動計画、活動報告、思想報告、報告資料、経験、学習経験、研修経験、実務経験、個人評価調査報告書、職務報告書、インターンシップ報告書、政府報告書、検査報告書、誠実性報告書、競技演説、就任演説、愛国演説、競技演説、先進行為、学習資料検査資料、経験資料、連絡資料、個人の行為および行為、申請資料、イベント計画、作業計画、是正計画、実施計画、マーケティング計画、規則および規制、会社通知、法令、調和社会、このラベルは推奨されなくなりましたが、レイアウトに多くの注目を集めることができ、便利です (短いため)。私はこのタグの使用にはあまり賛成ではありませんが、場合によっては (狭い場所でのレイアウト定義など)、それでも良い選択です
h2
h2 が最もよく使用される場所はレイアウトではなくサブタイトルですが、列のスタイルを定義する必要がある場合は、このタグを使用する方が適切です。 [この段落を編集] DIV+CSSの利点は何ですか?
1. W3C標準に準拠します。 Microsoft およびその他の企業は W3C の支持者です。これは、将来の Web アプリケーションのアップグレードによって Web サイトが廃止されないようにするため、最も重要です。 2. ブラウザの下位互換性をサポートします。つまり、将来ブラウザ戦争で IE7 と Firefox のどちらが勝っても、Web サイトの互換性は高くなります。 3. 検索エンジンがよりフレンドリーになりました。従来のテーブルと比較して、DIV+CSS テクノロジーを使用した Web ページは検索エンジンにとってよりフレンドリーです。 4.スタイル調整がより便利になりました。コンテンツとスタイルを分離すると、ページとスタイルの調整がより便利になります。現在、YAHOO や MSN などの国際ポータル、NetEase や Sina などの国内ポータル、主流の WEB2.0 Web サイトはすべて DIV+CSS フレームワークモデルを採用しており、DIV+CSS が一般的な傾向であることがさらに裏付けられています。 5. CSS の大きな利点は、その簡潔なコードにあり、大規模な Web サイトの帯域幅を大幅に節約できます。周知のとおり、検索エンジンはクリーンなコードを好みます。 6. パフォーマンスと構造を分離することで、チーム開発における分業と協力が容易になり、相互関係が軽減されます。
[この段落を編集] Web ページに CSS を組み込むいくつかの方法
インラインアプリケーション
HTML ファイルで直接スタイルを宣言できます。
たとえば、上記の HTML ファイルはブラウザ上で次のように表示されます: Thisisfontsize16.
埋め込みアプリケーションスタイルは HTML ファイル (通常は ) に埋め込むことができます。
例: div{div{background-color:#FF0000;}< head>背景色は赤です
上記のHTMLは次のように表示されます: 背景色は赤です
外部リンクはこの方法で適用され、すべてのCSSスタイル宣言は別のファイルに保存されます。
このファイルの名前は通常 .css です。
HTML ドキュメントの

で、次のコードを使用して .css ファイルを接続します。

上記の行は、external-stylesheet.css ファイルで宣言されたスタイルを HTML ファイルに追加します。
インポートアプリケーション外部CSSスタイルをHTMLファイルにインポートすることもできます。
インポート方法は@importコマンドを使用します。
@import の構文は次のとおりです: <@import">!--@importurl(http: / /www.divhome.com/#.mysite.com/style.css);@importurl(
@import ディレクティブの本来の目的は、異なるスタイルを異なるブラウザに適用できるようにすることでした。ただし、これは不要になりました。@import を使用する最も一般的な目的は、複数の CSS スタイルが @import によって追加され、異なる CSS スタイルが互いに競合する場合に、後で追加された CSS スタイルが使用されることです。優先順位があります (詳細については CSS 連結を参照してください)
div css - その他の最も一般的に使用されるレイアウトタグ
h1 表示されるフォントが実際には「大きすぎる」ため、このタグを使用する人はほとんどいないかもしれませんが、私たちは CSSer です。変更できないタグスタイルと、それが表現できる意味は何ですか?元の機能 (大きなタイトル) と同じくらい明白です。使い方はもうご存知だと思います^_^。ul このタグはナビゲーション部分を定義するためによく使用されます。もちろん、代わりに使用することもできますが、ナビゲーション接続での順序を変更するため、ul を使用する方が正確です (CSS を削除した後の効果はより明らかです)
b このタグは推奨されなくなりましたが、レイアウトに不便が生じる可能性があります。私はこのタグの使用にはあまり賛成ではありませんが、場合によっては (小さな場所でのレイアウト定義など)、それでも良い選択です。
h2 h2 が最も使用される場所はレイアウト内にあるべきではありません。ただし、字幕では、ただし一部の列スタイルをどこかで定義する必要がある場合は、このタグを使用し、列の内容に p を使用する方が適切です。
[この段落を編集] CSS+DIV ウェブサイトデザインの問題
イデオロギー宣伝、反汚職と誠実、第 17 回党大会の分析資料、農村問題、八栄八恥、先進性、教育、組織、人材スキル、経験、履歴書、求職申請書テンプレート、サンプルプログラム、ゲーム、手紙、日記、党会議、演説、入党教育申請書、教育申請書、企業文化、党員申請書、関連金融、都市建設、環境保護、党、政府、正義、経済活動、契約、取り決め、エチケット、金の色、麻衣の小説、風と風、第四章、成都自動車衝突事件、工商局長の演説、万里の長城建国記念日を祝う軍事パレード国慶節 60 周年建国記念日を歓迎するスピーチ PHP ダイナミックウェブページテクノロジースピーチ武林外伝東府旅館スピーチサンプルアニメーション麗江観光聖地ゴートラベル中国軍事パレード DIV+CSS には一定の利点がありますが、CSS+DIV ウェブサイトには問題もありますこれはより明白であり、主に以下の点に現れています:
まず、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デザインのプロフェッショナルレベルに依存します。 Global Security Network が最初に設立されたとき、CSS+DIV の Web デザインは、Web ページが検索エンジン用に最適化されることを保証するものではなく、Web ページがより単純なコード設計になることさえ保証できません。 HTML Web サイトよりも、検索エンジンによる Web ページの包含と包含は言うまでもなく、ランキングはテーブルと CSS の配置が使用されているかどうかによって測定されないのは明らかです。そのため、従来のテーブルレイアウトで作成された多くの Web サイトが検索結果で上位にランクされます。一方、CSS や Web 標準を使用して作成された多くの Web ページは依然として下位にランクされています。検索エンジンにとって、Web サイトの構造、コンテンツ、関連する Web サイトのリンクなどの要素は常に Web サイトの最適化にとって最も重要な指標であるためです。
[この段落を編集] Web サイトのレイアウトに DIV+CSS を使用するメリットとデメリット
WEB2.0 の標準化されたデザイン概念の普及により、国内の大手ポータルの多くが DIV+CSS の制作方法を採用し、Endeavor Network もCSS Web ページのレイアウト実際のアプリケーションから判断すると、テーブルページを作成する方法よりもこの方法が優れていることがわかります。
今日のほとんどの Web サイトは依然としてテーブルとネストされたコンテンツを使用して Web サイトを作成していますが、この方法は私たちにとって馴染みがあり、使いやすいものですが、より優れた、よりフレンドリーで、より強力な Web サイト設計方法を妨げています。 +CSS。
CSS Web ページレイアウトの重要性は、次の側面に反映されます:
1. ページの読み込みを高速化します
ページのコードのほとんどが CSS で記述されているため、ページのボリュームと容量が小さくなります。テーブルのネスト方法と比較して、DIV+CSS はページをより多くの領域に分割し、ページを開いたときにレイヤーごとに読み込まれます。テーブルの入れ子のような大きなテーブルでページ全体を囲むのではなく、読み込み速度が非常に遅くなります。
2. トラフィックコストを削減します
ページサイズが小さくなり、閲覧速度が速くなります。これは、ホストトラフィックを制御する一部のWebサイトにとって最大の利点です。
3. デザイン修正の効率化
DIV+CSS 制作方法を使用しているため、ページの変更がより簡単かつ時間の節約になります。地域コンテンツタグに従って、CSS で対応する ID を見つけます。これにより、ページの他の部分のレイアウトスタイルを破壊することなくページを変更することがより便利になります。
IV. 視覚的な一貫性を維持する
DIV+CSS の最も重要な利点の 1 つは、視覚的な一貫性を維持することです。以前のネストされたテーブルの作成方法では、ページ間または領域間で表示効果が異なります。 DIV+CSS 制作方法を使用すると、全ページまたは全領域が CSS ファイルによって均一に制御され、異なる領域または異なるページに反映される効果の偏りが回避されます。
5. 検索エンジンによるインデックスの強化
HTML コードとコンテンツスタイルのほとんどは CSS ファイルに書き込まれるため、Web ページのテキスト部分がより目立つようになり、検索エンジンによってインデックスされやすくなります。
6. 閲覧者やブラウザにとってよりフレンドリーになる
ウェブサイトは閲覧者のために作られており、閲覧者にとってもブラウザにとってもフレンドリーであることは誰もが知っています。 CSS は豊富なスタイルを備えているため、さまざまなブラウザに応じてページをより柔軟に統一した表示効果を実現できます。
CSS Web ページレイアウトの重要性と利点についてはこれだけ述べましたが、セキュリティネットワークが遭遇する問題を例として、CSS Web ページレイアウトの副作用を過小評価すべきではありません。達成不可能ですが、少なくともテーブルの配置よりも複雑です。非常に多くあるため、初心者はもちろん、Web サイト設計の専門家でも問題が発生しやすいです。
2. CSS ウェブサイト制作のデザイン要素は、通常、1 つの外部ファイル、または複数のファイルに配置されており、CSS ファイルが異常に呼び出されると、ウェブサイト全体がひどいものになる可能性があります。
3. DIV+CSS はブラウザの互換性の問題のほとんどを解決しますが、Firefox などの一部のブラウザで使用する場合には例外もあります。IE で表示される通常のページが Firefox ではまったく異なる場合があります。もちろん、これはブラウザの問題であるはずですが、現時点では DIV+CSS はまだすべてのブラウザに対して統一的な互換性を実現していないと言えます。
4. DIV+CSS が検索エンジン用に最適化されているかどうかは、DIV+CSS 自体ではなく、Web デザインのプロのレベルに依存します。 DIV+CSS Web デザインは、Web ページが検索エンジン用に最適化されることを保証するものではなく、さらに、Web ページが HTML Web サイトよりも単純なコード設計になることも保証しません。エンジンは明らかに、テーブルや CSS の配置が使用されているかどうかによって評価されるわけではありません。これが、従来のテーブルレイアウトで作成された多くの Web サイトが検索結果で上位にランクされるのに、CSS や Web 標準を使用して作成された多くの Web ページが依然として下位にランクされる理由です。検索エンジンにとって、Web サイトの構造、コンテンツ、関連する Web サイトのリンクなどの要素は常に Web サイトの最適化にとって最も重要な指標であるためです。
上記で説明した DIV+CSS の利点と傾向を踏まえると、WEB2.0 のデザイン標準をより効果的かつ合理的に使用するには、長い時間の研究と実践が必要になると思います。 DIV+CSS をより良く使用するには、この技術を使いこなすには、継続的な練習と実際の検証、そして豊富なデザイン経験の蓄積が必要だと思います。
[この段落を編集] Div+CSS の一般的なエラーの概要
CSS+DIV は、Web サイト標準 (または「WEB 標準」) で一般的に使用される用語の 1 つで、通常は HTML Web デザインにおけるテーブル配置方法との違いを説明するために使用されます。 XHTML Web サイトのデザイン標準では、テーブル配置テクノロジは使用されなくなりましたが、さまざまな配置を実現するために css+div が使用されるためです。 DIV+CSS コーディングを適用する場合、いくつかの間違いを犯しやすくなります。この記事では、よくある間違いをいくつか挙げます:
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 には、マージンとパディングを指定して float 要素を表示するときにバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。
8. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。
9. デフォルトのスタイルをリセットしましたか?
ブラウザが異なれば、マージンやパディングなどの特定の属性の解釈も異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リストスタイルをなしに設定することが最善です。