ウェブサイトのビジュアルスタイルとレイアウトは、CSSまたはカスケードスタイルシートによって決定されます。 これらは、ウェブページのHTMLマークアップを形成するドキュメントであり、そのマークアップの結果として表示されるページの表示方法に関するWebブラウザの指示を提供します。 CSSはページのレイアウト、カラー、背景イメージ、 タイポグラフィなどを処理します。
CSSファイルを見ると、マークアップやコーディング言語と同様に、これらのファイルには特定の構文があることがわかります。 各スタイルシートは、いくつかのCSSルールで構成されています。 これらのルールは、完全に採用された場合、サイトのスタイルを決定します。
CSSルールの部分
CSSルールは、セレクタと宣言という2つの異なる部分で構成されています。 セレクタはページ上で何がスタイリングされているかを判断し、宣言はどのようにスタイリングされるべきかを決定します。 例えば：
p {
色：＃000;
}
これはCSSルールです。 セレクタ部分は "p"で、これは "段落"の要素セレクタです。 したがって、サイト内のすべての段落を選択して、このスタイルを提供します（ただし、CSSドキュメントの他の場所でより特定のスタイルを対象とする段落がない限り）。
"color：＃000;"というルールの一部 宣言として知られているものです。 その宣言は、プロパティと値の2つの部分で構成されています。
このプロパティは、この宣言の「カラー」部分です。 セレクタのどの部分が視覚的に変更されるかを指示します。
値は、選択したCSSプロパティを変更する値です。 この例では、＃000という16進数の値を使用しています。これは、「黒」のCSS略記です。
したがって、このCSSルールを使用すると、ページの段落は黒色のフォント色で表示されます。
CSSプロパティの基本
CSSプロパティを記述するときは、CSSプロパティを適切に設定することはできません。 インスタンスの場合、「color」は実際のCSSプロパティであるため、使用することができます。 このプロパティは、要素のテキストの色を決定します。 CSSプロパティとして "text-color"または "font-color"を使用しようとすると、CSS言語の実際の部分ではないため、これらは失敗します。
別の例は、プロパティ "background-image"です。 このプロパティは、背景に使用できる画像を次のように設定します。
.logo {
背景画像：url（/images/company-logo.png）;
}
"background-picture"や "background-graphic"をプロパティとして使用しようとすると、これらは実際のCSSプロパティではないため、失敗します。
いくつかのCSSプロパティ
サイトのスタイルを設定するために使用できるいくつかのCSSプロパティがあります。 いくつかの例があります：
- ボーダー（ボーダースタイル、ボーダーカラー、ボーダー幅を含む）
- パディング（パディングトップ、パディング - 右、パディング - ボトム、パディング - 左を含む）
- マージン（マージン・トップ、マージン・ライト、マージン・ボトム、マージン・レフトを含む）
- フォントファミリー
- フォントサイズ
- 背景色
- 幅
- 高さ
これらのCSSプロパティは、例として使用するのに最適です。なぜなら、これらのCSSプロパティはすべてわかりやすく、CSSを知らなくても名前に基づいて何を行うかを推測できます。
あなたが遭遇する他のCSSプロパティーもありますが、名前に基づいてどのように動作するかは分かりません。
- 浮く
- クリア
- オーバーフロー
- テキスト変換
- Z-インデックス
あなたがウェブデザインをより深く理解するにつれて、これらのすべてのプロパティなどに遭遇します（そして使用する）でしょう！
プロパティに値が必要です
プロパティを使用するたびに、そのプロパティに値を渡す必要があります。また、特定のプロパティは特定の値のみを受け入れることができます。
"color"プロパティの最初の例では、カラー値を使用する必要があります。 これは、 16進値 、RGBA値、またはカラーのキーワードであってもよい。 しかし、これらの値はどれもうまくいくはずですが、このプロパティで「憂うつ」という言葉を使用した場合は、何もしません。なぜなら、その単語のように記述的には、CSSでは認識されていない値なのでです。
2番目の「背景イメージ」の例では、サイトのファイルから実際のイメージを取得するためにイメージパスを使用する必要があります。 これは必要な値/構文です。
すべてのCSSプロパティには、期待する値があります。 例えば：
- ボーダーカラーはカラー値を期待します
- Border-sizeは、ピクセルやパーセンテージなどのサイジング値が必要です
- 境界線スタイルは、このプロパティに使用される予約されたスタイルの1つ、
CSSプロパティのリストを調べると、それぞれのスタイルが意図したスタイルを作成するために使用する特定の値があることがわかります。
ジェレミージラール編集