CSSの書き方

CSS は Web ページ スタイルのデザイン言語であり、Web ページ要素のスタイルを制御するために使用されるテクノロジです。 CSS を使用すると、Web ページ上のテキスト、画像、背景、枠線などのさまざまな要素のスタイルとレイアウトを制御できます。この記事では、Web デザイナーが CSS の使用法をよりよく習得できるように、CSS の基本構文と共通プロパティを詳しく紹介します。

1. CSS の基本構文

1. CSS のコメント構文

CSS のコメントは「/」で始まり「/」で終わります。終わり。コメント ステートメント内の内容は、ブラウザーによって解析および表示されません。

例:

/*这是注释语句*/

2. CSS セレクターの構文

CSS では、スタイルを適用する要素を指定するためにセレクターが使用されます。セレクターでは要素の属性、タイプ、ID、カテゴリなどを指定できます。

セレクタには以下の種類があります。

(1) 要素セレクタ

要素セレクタは、HTML タグ内のタグ名を直接指定できます。

構文例:

p { color: red; }

(2) ID セレクタ

ID セレクタは「#」記号で指定します。

構文例:

#box { width: 200px; height: 200px; }

(3) カテゴリセレクタ

カテゴリセレクタは「.」記号で指定します。

構文例:

.box { background-color: #fff; }

(4) 子孫セレクタ

子孫セレクタは、2 つのセレクタをスペースで区切って、階層関係にある子孫要素を選択できます。

構文例:

div p { color: red; }

(5) 擬似クラス セレクター

擬似クラス セレクターは、マウス ホバー、訪問など、特定の状態の要素を選択するために使用されます。等

構文例:

a:hover { color: red; }

(6) 属性セレクター

属性セレクターは、属性または属性値に基づいて要素を選択できます。

構文例:

input[type="text"] { border: 1px solid #ccc; }

(7) 組み合わせセレクター

組み合わせセレクターでは、カンマ区切りで複数の条件を同時に指定できます。

構文例:

h1, h2, h3 { color: #000; }

3. CSS の一般的に使用されるプロパティ

CSS プロパティは、Web ページ要素の外観、レイアウト、サイズ、色、フォントなどを制御できます。 。

以下は CSS の一般的に使用されるプロパティです:

(1) font-size: フォント サイズ

構文例:

body { font-size: 14px; }

(2) color : フォントの色

構文例:

h1 { color: #ff0000; }

(3) 背景: 背景色

構文例:

body { background-color: #f7f7f7; }

(4) width: width

文法例:

img { width: 100px; }

(5) height: height

文法例:

img { height: 100px; }

(6) border: border

文法例:

.box { border: 1px solid #ccc; }

(7) パディング: 内側マージン

文法例:

.box { padding: 10px; }

(8) マージン: 外マージン

文法例:

.box { margin: 10px; }

(9) text-align: テキストを中央揃え

構文例:

h1 { text-align: center; }

4. CSS の継承と優先順位

CSS の継承は子要素を参照 スタイルを継承可能親要素からのプロパティ。たとえば、body 要素のフォント サイズを 14px に設定すると、body 要素内にあるすべての要素がこの style 属性を継承します。

CSS 優先順位ルールは、複数の CSS スタイルが同じ要素に同時に作用するときにどのスタイルが有効になるかを参照します。 CSS の優先順位ルールは以下の順序で判定されます。

(1) style 属性の値が具体的であるほど優先度が高くなります。

たとえば、ID セレクターはカテゴリ セレクターよりも優先され、カテゴリ セレクターは要素セレクターよりも優先されます。要素が複数のセレクターによって同時に選択された場合、より具体的なセレクターを持つスタイル ルールが最初に適用されます。

(2) style 属性は後から出現するほど優先度が高くなります。

たとえば、要素で複数の同じスタイル属性を同時に定義すると、後で表示されるスタイル ルールによって前のルールが上書きされます。

(3) ! important ルールで設定されたスタイルが最も優先されます。

この場合、対応するスタイル属性の値は他のセレクター ルールによってオーバーライドされません。

2. 概要

CSS は Web デザインにおいて非常に重要なテクノロジーです。 CSS の構文と共通プロパティを正しく理解して習得することで、Web デザインのレベルを大幅に向上させることができます。この記事では、Web デザイナーが CSS テクノロジーをより適切に適用できるようにするために、CSS の基本構文と共通プロパティについて詳しく説明します。

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