ホームページ > 記事 > ウェブフロントエンド > CSS スタイルシートを使用する理由
#この記事の動作環境: Windows10 システム、css3、thinkpad t480 コンピューター。 (推奨チュートリアル:css スタイル シートは、開発者がドキュメントの情報コンテンツを、ドキュメントの表示方法という些細な事柄から分離するのに役立ちます。つまり、スタイルをコンテンツから分離することで、次のような利点があります。同じコンテンツを異なるスタイルで異なる目的を達成する; 2. 重複を避ける; 3. メンテナンスを容易にする; 4. Web ページのコード量を削減し、Web ページの送信効率を向上させる。
CSS ビデオ チュートリアル )
CSS スタイル シートを使用する理由
通常は、スタイルではなく HTML を使用してページのコンテンツを記述し、CSS を使用してコンテンツではなくページのスタイルを指定します。もちろん例外はあり、HTML にはスタイルを指定するためのメソッドがいくつか用意されています。たとえば、HTML では、a4b561c25d9afb9ac8dc4d70affff419 タグを使用してテキストを太字にすることができ、6c04bd5ca3fcae76e30b72ad730ca86d タグでページの背景色を指定できます。 CSS を使用する場合、すべてのスタイル情報が 1 か所に保持されるように、通常は HTML のスタイル機能の使用を避けます。
CSS スタイル シートを使用する主な目的は、Web デザインの分業とコラボレーションを促進することです。たとえば、HTML 部分は 1 人またはチームで完成し、JS プログラム部分も 1 人で完成させます。 CSSもプロに任せてやれば確実に効率アップ 家の装飾と同じで、ハードもソフトもプロのエンジニアリングチームがやります きっと早くてきれいに仕上がります。逆に、すべての作業をエンジニアリングチームに引き継いでしまうと、品質や工期が保証されません。
さらに、Web ページの CSS スタイル シートは、別の Web ページや他の Web サイトの Web ページでもそのまま使用できます。これは、CSS を再利用できることを意味し、コードの量を大幅に削減できます。をWebページ上に配置することで、Webページの送信効率が向上し、Webサイトの見た目の統一性を保つことができ、もちろんWebデザイナーの作業負荷も軽減できます。これは、ある家の装飾スタイルを同じような構造の別の家に完全にコピーできるのと同じで、家の装飾コストを削減できるだけでなく、統一された装飾スタイルを維持することもできます。
実践: HTML ドキュメントのスタイル シートを作成するスタイル シートを作成する
1. テキスト ファイルを作成します。このファイルがスタイルになります。シート。 style1.css
2 という名前を付けます。CSS ファイルで、次のコード行をコピーしてファイルを保存します:
strong { color: red; }
ドキュメントとスタイル シートをリンクします。
1. 別のテキスト ファイルを作成します。このファイルがドキュメントになります。任意の名前を付けます。2. HTML ファイルで、次のコードをコピーして、bd72bfde891514677616a913ab9d9cad 行に独自のスタイル シートを引用してください:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html>3. ファイルを保存し、ブラウザで開きます。スタイル シートにより、次のように 8e99a69fbe029cd4e2b854e244eab143 タグ内の文字が赤で表示されます: ##C
ascading
Style Sheets プログラミング関連の知識について詳しくは、プログラミング コースをご覧ください。 !
以上がCSS スタイルシートを使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。