CSS3 の基本的な構文を調べる

CSS は、Web デザインに使用されるスタイル シート言語です。CSS3 は、より多くのスタイルと特殊効果を提供する CSS のアップグレード バージョンです。この記事では、CSS3 をより適切に適用できるように CSS3 を記述する方法を説明します。

1. セレクター

CSS3 では、さまざまな HTML 要素を選択するために使用できる新しいセレクターが多数あります。これらのセレクターには次のものが含まれます:

1. 属性選択

属性セレクターを使用すると、属性値に基づいて要素を選択できます。たとえば、次の CSS ルールは、title 属性値が「example」であるすべての要素を選択します。

[title=example] {
  color: red;
}

2. 部分文字列一致セレクター

部分文字列一致セレクターを使用すると、次の要素を選択できます。属性値の部分文字列によって要素が選択されます。 * を使用して要素を照合する例を次に示します。

a[href*="example"] {
  color: red;
}

これは、href 属性値に文字列「example」が含まれるすべてのアンカー要素を選択します。

3. 疑似要素セレクター

CSS3 には、要素の特定の部分にスタイルを追加できる新しい疑似要素セレクターも追加されています。たとえば、

p::first-letter {
  font-size: 200%;
}

p::first-line {
  color: red;
}

上記のルールは、段落の最初の文字のフォント サイズとテキストの最初の行の色を変更します。

2. 新機能

CSS3 は、次のような多くの新機能も提供します:

1. 角丸

border-radius: 50%;

上記のコード要素の角が丸くなります。

2. グラデーション

グラデーションを使用して、要素に滑らかな色の遷移を追加します。グラデーションの使用例を次に示します。

background: linear-gradient(to bottom right, red, yellow);

これにより、要素の背景が左上隅から右下隅に向かって、赤から黄色にグラデーションされます。

3. Box Shadow

CSS3 では、要素に影を追加するために使用できる新しいボックス シャドウ プロパティも提供します。例:

box-shadow: 10px 10px 5px grey;

上記のルールは、要素の右下隅に影を追加します。

4. トランジション

トランジション効果を使用すると、要素の変化をよりスムーズにすることができます。トランジションの使用例を次に示します。

transition: width 2s;

これにより、要素の幅がある値から別の値に変更されるまでに 2 秒かかります。

5. アニメーション

アニメーションを使用すると、要素をより面白く、生き生きとしたものにすることができます。アニメーションの使用例を次に示します。

animation: example 5s infinite;

これは、5 秒間継続し、永久にループする「example」というアニメーションを要素に追加します。

3. ブラウザの互換性

CSS3 機能の互換性はブラウザごとに異なることに注意してください。 Web サイトがすべてのブラウザーで適切に動作することを確認するには、ブラウザーのサポートを実装するために使用する必要があるいくつかのトリックがあります。

1 つの解決策は、ブラウザーのプレフィックスを使用し、CSS プロパティの前に -vendor- プレフィックスを追加して、さまざまなブラウザーがコードを正しく解析できるようにすることです。例:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

Sass や Less などの CSS プリプロセッサを使用することもできます。これにより、CSS の記述がより簡潔になり、ミックスインや変数などの機能が提供されます。

つまり、CSS3 は、Web デザインをより鮮やかで興味深いものにする多くの新機能とセレクターを提供します。これらの新しい機能と作成方法を理解すると、Web ページがより魅力的になり、ユーザーに優れたエクスペリエンスを提供できます。

以上がCSS3 の基本的な構文を調べるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。