CSS プロパティの設計定義
CSS プロパティとは何ですか?また、それらをどのように使用しますか?
目次拡大Web サイトのビジュアル スタイルとレイアウトは、 CSS またはカスケーディング スタイル シート .これらは、Web ページの HTML マークアップを形成するドキュメントであり、そのマークアップの結果として生じるページを表示する方法を Web ブラウザに提供します。 CSS は、ページのレイアウトだけでなく、色、背景画像、タイポグラフィなども処理します。
CSS ファイルを見ると、他のマークアップ言語やコーディング言語と同様に、これらのファイルには特定の構文があることがわかります。各スタイル シートは、多数の CSS ルールで構成されています。これらのルールを完全に理解すると、サイトのスタイルが決まります。
CSS ルールの構成要素
CSS ルールは、セレクターと宣言という 2 つの異なる部分で構成されています。セレクターはページ上で何をスタイルするかを決定し、宣言はスタイルをどのようにすべきかを決定します。例えば：
|_+_|
これは CSS ルールです。の セレクタ 部分は p 、「段落」の要素セレクターです。したがって、サイト内のすべての段落が選択され、このスタイルが提供されます (CSS ドキュメントの他の場所により具体的なスタイルの対象となる段落がない限り)。
ルールの「 色: #000; ' は、宣言として知られているものです。その宣言は 2 つの部分で構成されています。 財産 そしてその 価値 .
の 財産 それは 色 この宣言の一部。セレクターのどの側面が視覚的に変更されるかを指定します。
の 価値 選択した CSS プロパティが変更されるものです。この例では、16 進値を使用しています。 #000 、これは「黒」の CSS 短縮形です。
したがって、この CSS ルールを使用すると、ページの段落は黒の font-color で表示されます。
CSS プロパティの基本
CSS プロパティを記述する場合、単純に自分の好みに合わせて作成することはできません。たとえば、'color' は実際の CSS プロパティなので、使用できます。このプロパティは、要素のテキストの色を決定するものです。 「text-color」または「font-color」を CSS プロパティとして使用しようとすると、これらは CSS 言語の実際の部分ではないため、失敗します。
もう 1 つの例は、プロパティ「background-image」です。このプロパティは、次のように、背景に使用できる画像を設定します。
|_+_|「background-picture」または「background-graphic」をプロパティとして使用しようとすると、これらは実際の CSS プロパティではないため失敗します。
一部の CSS プロパティ
サイトのスタイルを設定するために使用できる CSS プロパティがいくつかあります。いくつかの例は次のとおりです。
- ボーダー (border-style、border-color、border-width を含む)
- パディング (padding-top、padding-right、padding-bottom、および padding-left を含む)
- 余白 (margin-top、margin-right、margin-bottom、および margin-left を含む)
- フォントファミリー
- フォントサイズ
- 背景色
- 幅
- 身長
これらの CSS プロパティは、例として使用するのに最適です。それらはすべて非常に単純であり、CSS を知らなくても名前からその機能を推測できるからです。
名前に基づいてどのように機能するかが明確ではない可能性がある他の CSS プロパティもあります。
- 浮く
- クリア
- オーバーフロー
- テキスト変換
- Z-インデックス
Web デザインに深く入り込むと、これらすべてのプロパティやその他のプロパティに遭遇 (および使用) するようになります!
プロパティには値が必要
プロパティを使用するたびに、値を指定する必要があります。また、特定のプロパティは特定の値のみを受け入れることができます。
「color」プロパティの最初の例では、色の値を使用する必要があります。これは、16 進値、RGBA 値、または 色のキーワード .これらの値はどれも機能しますが、このプロパティで「暗い」という単語を使用した場合、その単語は説明的ですが、CSS で認識される値ではないため、何もしません。
'background-image' の 2 番目の例では、使用するイメージ パスが必要です。 実際の画像を取得する サイトのファイルから。これは、必要な値/構文です。
すべての CSS プロパティには、期待される値があります。例えば：
- Border-color には色の値が必要です。
- Border-size には、ピクセルやパーセンテージなどのサイズ変更値が必要です。
- 境界線のスタイルには、このプロパティに使用される予約済みのスタイルの 1 つが必要です ('solid' など)。
CSS プロパティのリストに目を通してみると、目的のスタイルを作成するために使用する特定の値がそれぞれにあることがわかります。