CSS_html/css_WEB-ITnose について知る-htmlチュートリアル-php.cn

1. はじめに

カスケードスタイルシートは、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのファイルスタイルを表現するために使用されるコンピューター言語です。

CSS は、Web ページのパフォーマンスとコンテンツを完全に分離できるスタイル設計言語です。従来の HTML のパフォーマンスと比較して、CSS は Web ページ内のオブジェクトの位置とレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントサイズスタイルをサポートし、Web ページのオブジェクトとモデルスタイルを編集する機能があり、予備的な実行が可能です。デザインは現在、テキスト表示に基づいた最も優れた表現力のあるデザイン言語です。 CSS は、さまざまなユーザーの理解力に応じて記述方法を簡素化または最適化することができるため、あらゆるタイプの人にとって可読性が高くなります。

2. 使い方

サイト Web ページでスタイルシートを使用するには、次の 3 つの方法があります:

外部リンク (外部スタイルとも呼ばれます): Web ページを外部スタイルシートにリンクします。
埋め込み (内部ページスタイルとも呼ばれます): Web ページに埋め込みスタイルシートを作成します。
インライン (インラインスタイルとも呼ばれます): インラインスタイルを Web ページの各要素に適用します。

その中で、優先順位: インライン > 埋め込み > アウトライン

外部スタイルシート

多くのページにスタイルを適用する必要がある場合、外部スタイルシートが最適です。外部スタイルシートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。

内部スタイルシート

単一のファイルに特別なスタイルが必要な場合は、内部スタイルシートを使用できます。 head セクションの

特別なスタイルを個々の要素に適用する必要がある場合、インラインスタイルに使える。インラインスタイルを使用する方法は、関連するタグで style 属性を使用することです。スタイルプロパティには、任意の CSS プロパティを含めることができます。次の例は、段落の色と左余白を変更する方法を示しています。

これは段落です

3. レイアウト機能

I. コードを合理化し、リファクタリングの難易度を軽減します。スパイダーがウェブサイトのページを巡回する際、ジャンクコードが多すぎると、検索スパイダーは不親切に感じ、ウェブサイトの SEO の観点からも巡回速度が遅くなる可能性があります。それは大きなノーノーだと言われます。従来のテーブルページの使用と同様に、Web サイトのコードを最適化する必要があり、これには CSS + div を使用する必要があります。コードの最適化に CSS + div を使用する利点について説明します。

この Web サイトではコードを非常に合理化するために DIV+CSS レイアウトが使用されており、CSS ファイルは Web サイトのどのページでも呼び出すことができるということを聞いたことがあると思いますが、テーブルを使用して一部を変更するのは非常に面倒です。ページ。ポータル Web サイトの場合、多くのページを手動で変更する必要があり、表を見ると煩雑で時間がかかりますが、css+div レイアウトを使用すると、css ファイル内のコードを変更するだけで済みます。

II. Web ページのアクセス速度

DIV+CSS レイアウトを使用した Web ページは、テーブルレイアウトと比較して多くのページコードが合理化されているため、閲覧アクセス速度が自然に向上し、Web サイトのユーザーエクスペリエンスが向上します。

III.SEO 最適化

div-css レイアウトを使用する Web サイトは検索エンジンに非常に適しているため、検索エンジンによってクロールできないネストされたレベルのテーブルが多すぎるという問題が回避され、簡潔で構造化されたコードがより簡単になります。重要なポイントを強調表示するのに役立ち、検索エンジンのクロールに適しています。

IV. ブラウザの互換性

TABLE レイアウトと比較して、DIV+CSS は複数のブラウザとの非互換性の問題が発生しやすい主な理由は、ブラウザごとに Web 標準のデフォルト値が異なることです。中国では IE が主流であり、Firefox と Chrome はあまり使用されていません。互換性テストに関しては、まず複数のバージョンの IE で問題が発生しないことを確認する必要があります。ここでは、いくつかの方法とテクニックを紹介します。ウェブサイト上の特定の問題。

V. CSS+DIV Web ページをレイアウトするときによくある小さな間違い

1. HTML 要素にスペルミスがないか、終了タグを忘れていないか確認してください

ベテランでも div の入れ子関係で間違いを犯すことがよくあります。 Dreameweaver の検証機能を使用して、エラーをチェックできます。

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ではmarginやpaddingを指定してfloat要素を表示するとバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。

8. float 要素の幅の合計は 100% 未満でなければなりません

float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。

9. デフォルトのスタイルをリセットしましたか?

マージン、パディングなどの特定の属性は、ブラウザによって解釈が異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リストスタイルをなしに設定することが最善です。

10. DTD を書き忘れていませんか?

いくら調整してもブラウザごとに表示結果が異なる場合は、ページの先頭で DTD 宣言を書き忘れていないか確認できます。

最後に、スパイダーはページ上に CSS コードが多すぎることを好まないことに注意してください。そうしないと、スパイダーのクロールや検索エンジンの組み込みにも影響するため、外部呼び出しを通じて CSS を呼び出すのは非常に良い方法です。同時に、あまり派手な Web サイトが必要ない場合は、CSS レイアウトを使用して目的の効果を実現することもできます。 Web サイトのナビゲーションやドロップダウンメニューなどのテキストの色の変更など。

IV. CSS コアコンテンツ

4 つの重要なポイント: 標準のボックスモデル、ボックスのフローティング。

HTML タグ形式: ブロックレベル要素 (div は行全体にわたるブロックレベル要素です。スタイルシートに

display:block

と記述してブロックレベル要素に変換します)、インライン要素 (span はインライン要素、サイズはコンテンツによって異なります)。

1. フロー: 前にランク付けされているラベルを指し、表示されるときも前にあります (比較: フロー)。

2. ボックスモデル：いわゆるモデルとは、その形状を模倣し、それのように見せ、客観的なもので示すことを指します。

3. ボックスのフローティングについて簡単に説明します:

float:left /* ボックスは左にフロートします*/

特定の列のフロートをクリアする必要がある場合:

clear:left /* ボックスをクリアしますleft float*/

4. ボックスの配置: 相対配置は標準フローから逸脱しません。絶対配置は標準フローから逸脱しません。

position：relative;          /* 相对定位 */

ログイン後にコピー

position：absolute;         / * 绝对定位 */

ログイン後にコピー

5. 学習まとめ最近牛バラ肉の動画を見て勉強しているのですが、たまたまCSSの学習と使い方について学びました。知識の。この部分の学習は非常にスムーズで、要約も非常に簡単です。コードのこの部分と比較すると、理解しやすく、入力するのがかなり良いように見えます。要約すると、一言で言えば、「もっと練習することによってのみ、この部分の知識をよりよく習得できるようになる」ということです。これは非常に簡単です。

著作権に関する声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。