CSSスタイルの使い方

CSS (Cascading Style Sheets) は、HTML または XML (SVG、XHTML などのさまざまな XML ブランチを含む) ドキュメントのプレゼンテーションを記述するために使用される Web ページ スタイル定義言語です。 CSS を使用すると、開発者は HTML ファイルのコンテンツとスタイルを分離できるため、スタイルの保守と変更が容易になり、ページの表示をより柔軟で管理しやすくなります。この記事では、CSS スタイルを使用して Web ページを美しく最適化する方法を紹介します。

1. 基本的な CSS 構文

CSS ルールは、セレクターと宣言ブロックという 2 つの主要な部分で構成されます。

セレクターは、ルールが適用される HTML 要素を指定します。たとえば、次のセレクターを使用して、すべての段落のテキストの色を赤に設定できます。

p {
    color: red;
}

宣言ブロックには、選択した要素に適用されるスタイル ルールを指定する 1 つ以上のプロパティが含まれています。上記の例では、「color」が属性、「red」が属性値です。宣言ブロックに複数のプロパティを追加するには、セミコロン「;」を使用して各プロパティを区切ります。たとえば、次の宣言ブロックを使用して、段落内のテキストの色とフォント サイズを設定できます。

p {
    color: red;
    font-size: 16px;
}

2. CSS セレクター

上記の要素セレクターに加えて (例: p、div など)、CSS は他にもさまざまなセレクターを提供します。

1. クラス セレクター

クラス セレクターを使用すると、開発者はルールを見つけて適用するために、特定の HTML 要素にクラス名を割り当てることができます。

たとえば、すべての見出しの色を青に設定したい場合は、次の CSS を使用できます:

h1, h2, h3 {
    color: blue;
}

ページ上の一部の見出しの色のみを設定したい場合各見出し要素は特定のクラスとしてマークされ、スタイル ルールがそのクラスに適用されます。たとえば、次のコード スニペットは、「my-class」クラスのすべてのタイトルに同じ青色のルールを割り当てます:

<h1 class="my-class">Title 1</h1>
<h2 class="my-class">Title 2</h2>
<h3 class="my-class">Title 3</h3>

.my-class {
    color: blue;
}

2. ID セレクター

ID セレクターは、CSS で最も一般的に使用されます。セレクターのひとつ。 ID セレクターは、ページ上の単一の要素を一意に識別するために使用されます。

たとえば、次のコード スニペットを使用して、ID「my-element」の要素の背景色を赤に設定できます:

#my-element {
    background-color: red;
}

3. 子孫セレクター

Descendants セレクターは、要素の下にあるすべての子要素または孫要素を選択できることを意味します。

たとえば、ページ上のすべての段落の下にある要素を選択する場合は、次の構文を使用できます。

p a {
    color: blue;
}

上記のコードは、その下のすべての a 要素に青色を設定します。各 p 要素。

4. 組み合わせセレクター

組み合わせセレクターとは、単一の要素または要素のセットを同時に選択するために 2 つ以上のセレクターを選択することを指します。

たとえば、次のコードは、クラス「my-class」のスパン要素に青いシェーディングを設定します。

span.my-class, .my-class span {
    background-color: blue;
}

上記のコードは、クラス「my-class」要素の任意のスパンを選択します。または、クラス「my-class」を持つ任意の要素内のspan要素に青のシェーディング スタイルを適用します。

3. CSS レイアウト

CSS を使用すると、開発者はページ レイアウトをほぼ完全に制御でき、フローティング、配置、ボックス モデルなどのさまざまなテクニックを使用して要素のサイズと位置を制御できます。

1. フローティング レイアウト

フローティング レイアウトは、複数の要素をグループ化し、通常のコンテンツ フローの外側に配置するのに適した流動的なレイアウト手法です。次のコードは、p 要素の右側を画像の左側にフローティングします。

p {
    float: right;
    width: 50%;
}

img {
    float: left;
    width: 50%;
}

2. 配置レイアウト

配置レイアウトは CSS で最も柔軟なレイアウト タイプの 1 つであり、開発者は相対位置、絶対位置、または固定位置を使用して要素を配置できます。ブラウザ ウィンドウ内の特定の場所に要素を配置する場合は、次のような CSS を使用します:

#my-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. ボックス モデル レイアウト

ボックス モデル レイアウトとは、CSS を使用して定義することを指します。要素の外観。 CSS ボックス モデルには、マージン、ボーダー、パディング、コンテンツという 4 つの主要コンポーネントがあります。ボックス モデルのスタイルを設定するには、次の CSS を使用します:

.box {
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 10px solid black;
}

上記の CSS は、10 ピクセルのマージン、10 ピクセルのパディング、および他の要素からの 10 ピクセルのマージンを持つ 200x200 ピクセルの正方形のボックスを設定します。 。

4. CSS アニメーション

CSS アニメーションは、開発者がフェードイン、スライド、回転、変形などのさまざまな動的効果を作成できる強力なテクノロジーです。以下は、高速に点滅するテキスト効果の CSS の例です。

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
 
h1 {
    animation: blink 1s infinite;
}

上記の CSS は、h1 要素が徐々に透明になり、ページ上で素早く点滅する「blink」と呼ばれるアニメーションを定義しています。

概要

CSS は、幅広いアプリケーションを備えた非常に便利な Web 開発ツールであり、開発者は静的な Web ページにさらに動的な効果を追加できます。 CSS の基本的な構文とレイアウト スキルを理解して学習すると、開発者は Web ページのプレゼンテーションをより柔軟に制御できるようになり、ページの美しさとインタラクティブ性を重視する今日の世界では不可欠な重要なスキルの 1 つです。

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