div+css ページのレイアウトについての簡単な説明_html/css_WEB-ITnose

説明:

DIV+CSS は Web デザインの標準であり、Web ページのレイアウト方法です。従来のテーブルレイアウトによる配置方法とは異なり、Webページのコンテンツとプレゼンテーションの分離を実現できます。 「DIV+CSS」という名前は実際には間違っており、標準の名前は XHTML+CSS である必要があります。 DIV と table はどちらも XHTML または HTML 言語のマークであり、CSS は単なる表現形式だからです。

方法:

HTML文書にCSSを追加します。 cssとはCascading Style Sheets（Cascading Style Sheets）の略で、HTML要素の表示形式を定義するために使用される、W3Cによって導入されたWebコンテンツを整形するための標準技術であり、Webデザイナーが習得しなければならない技術の1つです。

開発:

1. スタイル定義は別のファイルに配置されます。たとえば、サフィックス CSS が付いた新しいスタイル定義を作成します。

要素 {属性の色: 値 red;} head セクションで タグを使用します。

引用構文:

2. 埋め込みスタイル シート:

4. インラインスタイルシート:

開始タグに記述たとえば、H1 を赤にしたい場合は、

take red

概要: 3 つのスタイル シートには、外部スタイル シートと埋め込みスタイル シートを使用します。まず、デバッグ目的では、インライン スタイル シートは通常は使用されません。

5. スタイル ルール:

スタイル ルールは、宣言ブロックが続くセレクターで構成され、中括弧の中央の部分で構成されます。宣言ブロックは 1 つずつ宣言で構成されます。属性と値はコロンで区切られ、各宣言には 1 つの属性のみが含まれます。属性値にスペースが含まれる場合は、二重引用符で囲みます。たとえば、宣言ブロック内に複数の宣言をセミコロンで区切って指定できます。

Selector

宣言ブロック

要素を選択

Declaration { }

Attribute: value;

コロンで始まりセミコロンで終わります

6 注: 関連する詳細が詳しく説明されています。

7. セレクターのグループ化

複数のセレクターがステートメントを共有する場合、各セレクターをカンマで区切る必要があります。例: h1, h2, h3, h4 { color red;} セレクターをグループ化する場合、各セレクター パスを完全に記述する必要があり、グループの末尾にカンマを含めることはできません。

例: 不完全なパス: #maincontent p, ul{ border-top:1pxsolid #ddd;}

正しい書き方: #maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}

例: 多すぎます語尾カンマ: .a1 p, .a1 ul,{color:red;}

8. セレクター

要素セレクター: 構文形式: 要素 {color: blue;}

クラス セレクター: 構文形式: クラス名 {属性: 値;}

ID セレクター: #id name {属性: 値;} ID 名を繰り返すことはできません

ワイルドカード セレクター: 構文形式: *{属性: 値;}

疑似クラス セレクター:

クラス セレクターは、ハイパーリンク 要素の 4 つの異なる状態をさまざまな方法でフォーマットできます。次の順序で記述します。(メモリ メソッド: Love または Hate)

a:link は未訪問のリンク セレクター

a に使用されます。 :visited は、訪問したリンクに使用されるセレクターです

a:hover は、マウス カーソルが置かれているリンクに使用されるセレクター

a:active は、フォーカスに使用されます (たとえば、クリックされました

必要に応じて、これらの状態を組み合わせて、次の順序で記述することができます:

a:link, a:visited { color :blue;}

a:hover , a: active { color :blue;}

9.疑似要素セレクター

標準セレクターは、要素のコンテンツの最初の文字または最初の行をフォーマットできませんが、疑似要素セレクターは以下を実現できます:

すべてのブラウザ 2 つのタイプがサポートされています::first-line と :first-letter

例: 段落の最初の行: p:first-line {property: value;}

例: 段落の最初の文字: p:first -letter {Attribute: value;}

Priority:

いわゆる CSS 優先度は、CSS スタイルがブラウザーで解析される順序を指します。

インライン スタイル (インライン スタイル) > ID セレクター > クラス セレクター (クラス)、疑似クラス (疑似クラス) および属性 * (属性) セレクター > カテゴリ (タイプ)、疑似オブジェクト (疑似要素) 。

使用上の誤解:

1. DIV+CSS の合理性は、スタイルシートを介して Web ページの統一的なデザインと管理を実行できることです。スタイルシートを変更するだけで、サイト全体のスタイルに影響を与えることができます。 1ページごとに統一する場合 グローバルなデザイン概念を持たずにスタイルシートやdivを作成する場合は、div+CSSのデザイン方法は全く不要であり、負担にもなります

2. +CSS は Table のようなもので、ネストの効果は Table デザインと同じです。ただし、ページへの負担は増加します

3. Div+CSS は尊重されます。 TABLE デザインは長い歴史があり、多くのブラウザでサポートされているため、表示効果は非常に優れており、ずれは発生しません。ただし、DIV+CSS は一部のブラウザでページのずれを引き起こすため、異なるブラウザを考慮する必要があります。設計時に考慮して、変更を加えてデバッグします。

機能:

1. DIV+CSS レイアウトを使用した合理化されたコード、合理化されたページ コード、XHTML を知っている人なら誰でもこれを知っていると思います。 HTML チュートリアル コンテンツをさらにご覧ください。コードの簡素化により、Baidu Spider のクロール効率が向上し、ページ全体を最短時間でクロールできるようになります

2. アクセス速度が向上し、ユーザー エクスペリエンスが向上します。読み込み速度を大幅に改善すると、ユーザーがページをクリックするまでの待ち時間が短縮され、ユーザーエクスペリエンスが向上し、検索エンジンに好まれ、Webサイトのランキングが向上します。

3. div+css の構造は明確であり、検索エンジンで検索されやすいため、SEO の最適化、Web ページのサイズの縮小、Web ページの小型化に適しています。注: div+css 構造は明確で簡潔ですが、たとえば、上記の を除いて、HTML タグ全体がすべて DIV であることを意味するわけではありません。上の

、もう 1 つはすべて

であり、HTML 全体が 10,000 の無関係なコンテンツで構成されているかのように、ページ全体が

• として構造化されているかのようになります。このページのすべての要素はリストです。実際、これら 2 つの状況は非常によくあることですが、「DIV+CSS」の本当の意味が誤解されているため、DIV+CSS だけで完全なページを完成させることはほぼ不可能であるため、そのような記述はまったくあってはならないのかもしれません。 。