[トップ] CSS+DIV summary_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML は Web の急速な発展において重要な役割を果たし、重要な位置を占めています。 HTML の本来の目的は、タグ (

、

) の内容情報を表現することでした。同時に、ドキュメントのレイアウトは、フォーマットタグを使用せずにブラウザによって完成されます。 IE は徐々に新しい HTML タグと属性を HTML 仕様に追加し続けており、ドキュメントコンテンツがドキュメントプレゼンテーション層から明確に独立しているサイトを作成することがますます困難になってきています。そこで、この問題を解決するために、HTML 以外のスタイル、つまり CSS カスケードスタイルシートが作成されました。

私は CSS+DIV を 1 週間勉強しました。要約は次のとおりです:

このビデオでは主に Web ページのレイアウトに CSS+DIV を使用する方法について説明します。前半はいくつかの基本的な CSS スタイル、後半はいくつかの例を使用して CSS+DIV のレイアウトを理解できます。各ブロックを div として記述し、CSS を使用してそのスタイルを制御し、実際の操作に重点を置いてレイアウト効果を美しくします。

このビデオには主に CSS の基本的な構文と概念、つまりテキスト、画像、背景、テーブル、メニュー、その他の Web 要素の設定方法、および CSS フィルターの使用方法が含まれています。 CSS と JavaScript、CSS と XML、CSS と Ajax の包括的な応用など、拡張された知識もあります。この後、いくつかの大きな例を紹介します。これらを通じて、CSS+DIV レイアウトを深く理解できます。コンテンツの一部を DIV に配置し、そのタグの ID とクラススタイルを CSS で設定します。 HTML コードと CSS コードを分離してください。

次に、HTML に CSS を導入する 3 つの方法は次のとおりです:

1. インラインスタイル

<body> <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p> <p style="color:#000000; font-style:italic;">正文内容2</p> <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p> </body>

ログイン後にコピー

スタイルを行に直接記述すると、要素に対して個別にスタイルを定義するのが非常に簡単になります。

2. インライン

<head> <title>页面标题</title> <style type="text/css"> <!-- p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } --> </style> </head>

ログイン後にコピー

一部の古いバージョンのブラウザは、style タグを認識できません。つまり、古いバージョンのブラウザは、style タグ内のコンテンツを無視し、style タグ内のコンテンツをテキストとして直接変換します。ページ。この状況を回避するために、HTML コメント () を使用して、コンテンツを表示せずに非表示にします。

3. 外部スタイルシートへのリンク

<link href="1.css" type="text/css" rel="stylesheet">

ログイン後にコピー

4. 内部スタイルをインポートする

<head> <style type="text/css"> <!-- @import url(1.css); --> </style> </head>

ログイン後にコピー

内部スタイルシートに存在する外部スタイルシートをインポートします。スタイルシートの先頭、他の内部スタイルシートの上に配置する必要があります。

概要: CSS+DIV の学習は、理解と操作に重点を置いています。まだまだ練習が必要です。どの言語であっても、長所と短所があります。

Div+CSS の利点:

1. ページの読み込み時間を短縮します

ページのサイズが小さくなり、閲覧速度が速くなります。

2. 変更が簡単

HTML ページと CSS コードが分離され、Web ページのコンテンツとプレゼンテーションが分離されます。デザインを変更する場合、スタイルを変更するだけでよく、ページ上の他のスタイルのレイアウトは壊されません。この機能は表では使用できません。

3. 視覚的な一貫性、強力なフォント、組版機能を維持します

異なる領域やページでの効果の逸脱を避けるために、すべてのスタイルを CSS ファイルに配置します。

4. 検索エンジンクローラーにとって有益です。一般的に、同じページの HTML ファイルのテーブルレイアウトのバイト数は DIV+CSS レイアウトのバイト数よりも大きいため、検索エンジンクローラーのクロール時間を節約できます。ページのコンテンツをダウンロードします。

欠点:

1. 高度な開発技術: さまざまなブラウザーとブラウザーのバージョンとの互換性が必要です。

2. 長い開発時間: テーブルの配置よりもはるかに複雑で、問題が発生しやすいです。

3. 開発コストが比較的高い: 高度な技術と長い時間がかかるため、コストが高くなります。