div+css_html/css_WEB-ITnoseの埋め込み方法とレイアウトのメリット-htmlチュートリアル-php.cn

div+css_html/css_WEB-ITnoseの埋め込み方法とレイアウトのメリット

WBOY

リリース： 2016-06-24 12:31:02

オリジナル

1307 人が閲覧しました

div+css 埋め込み方法とレイアウトのメリット

1. 埋め込み方法

インラインアプリケーション

HTML ファイル内で直接スタイルを宣言できます。

たとえば、Thisisfontsize16 です。上記の HTML ファイルはブラウザ上で次のように表示されます: Thisisfontsize16。埋め込みアプリケーションスタイルは HTML ファイル (通常は ) に埋め込むことができます。たとえば、背景色は赤です< body>上記の HTML は次のようになります: 背景色は赤です

外部リンクアプリケーション

このように、すべての CSS スタイル宣言は別のファイルに保存されます。通常、ファイルの名前は .css です。 HTML ドキュメントの

では、次のコードを使用して .css ファイルをリンクします:

上記の行は、external-stylesheet.css ファイルで宣言されたスタイルを HTML ファイルに追加します。

アプリケーションのインポート

外部 CSS スタイルを HTML ファイルにインポートすることもできます。インポート方法は @import コマンドを使用します。

@import の構文は次のとおりです:

@import;ディレクティブ本来の目的は、ブラウザごとに異なるスタイルを使用できるようにすることでした。ただし、これはもう必要ありません。現在 @import を使用する最も一般的な目的は、複数の CSS スタイルを追加することです。複数の CSS スタイルが @import 経由で追加され、異なる CSS スタイルが互いに競合する場合、後から追加された CSS スタイルが優先されます (詳細については、CSS の連結を参照してください)。

ラベルに直接埋め込む方法もありますが、この書き込み方法にはいくつかの制限があります:

Text

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

2. レイアウトの利点

1. ページの読み込みが速くなります

ページのコードのほとんどが CSS で記述されているため、ページのボリュームが小さくなります。テーブルのネスト方法と比較して、DIV+CSS はページをより多くの領域に分割し、ページを開いたときにレイヤーごとに読み込まれます。テーブルの入れ子のような大きなテーブルでページ全体を囲むのではなく、読み込み速度が非常に遅くなります。

2. トラフィックコストの削減

ページサイズが小さくなり、閲覧速度が速くなります。これは、ホストトラフィックを制御する一部の Web サイトにとって最大の利点です。

3. デザイン修正時の効率化

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

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

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

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

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

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

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