CSS を使用してコンテンツとデザインを分離するにはどうすればよいですか?

優れた Web サイトは常に、完璧に構造化された HTML ドキュメントとユーザーの注意を引く美しいデザインで構成されています。この種の Web サイトは、Web サイト全体のインタラクティブ性を強化し、より魅力的なものにすることができます。

Web ページにスタイルを適用する場合、カスケード スタイル シート (略して CSS) を使用します。 CSSを活用することで、より簡単にWebサイトを美しくすることができます。これは、HTML ドキュメントの構造とそのプレゼンテーションを区別し、ユーザーが表示して操作する要素を指します。

単純に HTML を使用して作成された当たり障りのない Web サイトとは異なり、ユニークで創造的なスタイルを持つことは Web サイトにとって必須の機能となっています。

CSSを結合

CSS は 3 つの異なる方法で Web サイトに組み込むことができます -

• インライン スタイル - 個々の HTML タグごとにスタイルを適用すると、それはインライン スタイルと呼ばれます。

• 埋め込みスタイル - head タグは style タグ内に含まれており、CSS が HTML ファイルにマージされているように見えます。次に、「埋め込みスタイル」という用語を使用します。

• 外部スタイル - これは、CSS を HTML から分離するために使用されるため、CSS を使用する場合に最も推奨される手法です。 HTML コンテンツは、すべてのスタイル情報を含む CSS ファイルに接続されています。このスタイル設定アプローチを使用すると、多くの CSS ファイルを添付できます。

個別のファイルを使用し、同様のタイプの形式を同じ属性にグループ化することで、使用されるコードの長さを大幅に削減できます。これにより、コードが減ってバグ発見プロセスが容易になり、コード全体の読みやすさが大幅に向上するため、コードの維持に役立ちます。

個別の CSS ファイルを使用するもう 1 つの利点は、各ページで個別に書式設定を繰り返す必要がある従来の書式設定と比較して、同じファイルを必要に応じて何度でも再利用できることです。ファイルをインポートするか、ワークシートをリンクすることで、ファイルを再利用できます。

リンクタグを使用してファイルをリンクする

すでに説明したように、HTML ドキュメントにリンクされた .CSS ファイルを使用すると、Web ページのコンテンツ (構造) をそのデザイン (書式設定とスタイル) から分離できます。 html タグを使用して、CSS ファイルを HTML ファイルにリンクできます。

リンク タグを使用して、2 つのドキュメントが相互にどのように関連するかを指定します。これは空の要素であり、開始タグや終了タグ​​がなく、また自己終了タグでもないことを意味します。必要な情報はすべてそのプロパティに保存されます。リンク タグで使用できる属性は多数ありますが、使用する必要がある属性は以下に定義されています。

• Rel - これは、現在使用されているドキュメントがリンク先のドキュメントにどのように関連しているかを指定するリンク タグの必須属性です。通常、私たちはスタイルシートやファビコンを単に関係として考える傾向があります。

• Href - リンクするファイルの URL を指定するために使用されます。

linkタグはheadタグ内で使用されます。同じドキュメント内で、各タグは、異なるファイルを指すリンク タグの複数のインスタンスを持つことができます。以下は、リンク タグ -

リンク タグを使用して Web ページのコンテンツ部分とデザイン部分を分離する例を見てみましょう。

リーリー インポート宣言を使用する

CSS で import ステートメントを使用して、コンテンツをデザインから分離することもできます。別のファイルに保存されているスタイルをインポートする必要がある場合は常に、このステートメントを使用します。 CSS ファイルが配置されている URL またはソース パスを引用符で囲んで指定するだけです。

このステートメントでメディア クエリを使用することも選択できます。これは、スタイル シートのカスケードもサポートする柔軟なステートメントです。

これを使用してデザインとコンテンツを分離するときに変更する必要がある唯一のことは、上記のコード例からリンク タグを削除し、その場所に次のステートメントを追加することです。

コードの出力は、上記のコード例の出力と同じになります。

要約すると、CSS は Web デザイナーにとって強力なツールであり、コンテンツをデザインから分離できるようになります。 CSS を使用すると、デザイナーはコンテンツを整理して更新しやすくしながら、複数の Web サイトやデバイスにわたって一貫した外観を作成できます。 HTML と CSS を正しく理解していれば、デザイナーは誰でもこの機能を簡単に活用して、使いやすさやアクセシビリティを損なうことなく素晴らしいデザインを作成できます。

以上がCSS を使用してコンテンツとデザインを分離するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。