CSSの使い方

CSS (Cascading Style Sheets の正式名) は、Web ページのスタイルをデザインするために使用される言語です。 CSS は HTML ドキュメント内のコンテンツと表示スタイルを分離し、ページをより美しく、デザイナーの要件に沿ったものにすることができます。この記事では、初心者が CSS を始めるのに役立つ、CSS の基本概念、構文、実際の応用方法を紹介します。

1. CSS の基本概念

CSS はセレクターと宣言で構成されます。セレクターはスタイルを適用する HTML 要素を指定するために使用され、宣言は適用されるスタイルを定義します。以下にいくつかの重要な基本概念を示します:

1. セレクター

セレクターは、どの HTML 要素がスタイル設定されるかを示すコードです。セレクターには、以下に紹介するタグ セレクター、クラス セレクター、ID セレクターなどが含まれます。

(1) タグ セレクター

タグ セレクターは、HTML ドキュメント内の要素のタグ名と一致する最も一般的に使用されるセレクターです。たとえば、次のコードはすべての

要素のテキストの色を赤に設定します:

h1 {
    color: red;
}

(2) クラス セレクター

クラス セレクターは . と一致するクラス名を使用します。 。たとえば、次のコードは、クラス「text-center」の要素のテキストを中央に配置します。

.text-center {
    text-align: center;
}

(3) ID セレクター

ID セレクターは、# と照合する ID 名を使用します。 。 HTML ドキュメント内の各要素は ID を 1 つだけ持つことができるため、ID セレクターで一致する要素は 1 つだけです。たとえば、次のコードは、ID が「main」の要素の背景色を白に設定します:

#main {
    background-color: white;
}

2. 宣言

宣言は、対応する要素に適用されるスタイルの説明を参照します。 HTML要素。宣言は属性と値で構成されます。たとえば、次のコードはすべての

要素のテキストの色を赤に設定します:

h1 {
    color: red;
}

ここで、color は属性名、red はその属性値です。各ステートメントは中括弧内に記述し、セミコロンで終わる必要があります。

2. CSS 構文

CSS の構文は、キーと値のペアと同様、非常に単純です。各 CSS ルールは、以下に示すように、セレクターと、中括弧で囲まれた宣言ブロックで構成されます。

选择器 { 属性: 值; 属性: 值; }

このルールでは、セレクターは、CSS スタイルが適用される HTML 要素、および属性とvalue は CSS スタイル自体の説明です。読みやすくするために、複数行ルールでは、コードを整理するためにインデントと改行がよく使用されます。

以下は、グラデーション背景を適用するための CSS コードです:

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

このルールは、グラデーション背景がドキュメントの body 要素に適用されることを示します。スタイルは、左から右へ、#00bfff (水色) から #007fff (濃い青) までのグラデーションで表示されます。

3. CSS の適用

HTML ドキュメントでは、インライン スタイルを直接使用することも、外部スタイル シートを使用して CSS スタイルを適用することもできます。

1. インライン スタイル

インライン スタイル属性は、インライン スタイルの形式で HTML タグに直接埋め込まれます。たとえば、次のコードは 要素のテキストの色を赤に設定します:

<span style="color: red;">Hello, CSS!</span>

ただし、インライン スタイルは指定された HTML 要素にのみ適用され、他の要素に継承することはできません。したがって、必然的に HTML コードが複雑になります。

2. 外部スタイル シート

インライン スタイルの使用による HTML コードでの混乱を避けるために、外部スタイル シートを使用できます。外部スタイル シートは .css ファイルの形式で HTML ドキュメントとは別に保存されるため、ページのメンテナンスがより便利になります。以下は、外部スタイル シートの簡単な例です:

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

この例では、

、クラス "text-center"、および HTML の ID に対応する 3 つのルールが CSS ファイルに定義されています。 「メイン」の要素。この CSS ファイルを使用するには、HTML ファイルに次のタグを追加する必要があります。

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

このようにして、HTML ドキュメントはルールで定義されたスタイルを自動的に適用します。

4. 概要

CSS は、Web ページをより美しく、読みやすく、保守しやすくする非常に重要なデザイン言語です。 CSS の基本的な概念、構文、実際の応用を理解することは、Web デザインにとって不可欠な基礎です。この記事が、CSS の使い方をよりよくマスターするのに役立つことを願っています。

以上がCSSの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。