CSS3スタイルの基本

CSS3でスタイルを開始する最も良い方法は、単に画面上に情報を書式設定する手段としてそれらを表示することです。作業する情報の大半はテキストなので、スタイルを理解するための基礎としてテキストから始めるのが最も簡単です。この基本的なHTML5形式のページから始めましょう：

A Simple Page

A Simple Heading

<！ --1 - >

見出しに付ける簡単なテキスト。

現時点では、見出しと段落はかなり明白です。テキストは、ブラウザ用に選択したデフォルトのフォントで表示されます。通常、テキストは、異なる色の組み合わせを選択しない限り、白い背景上で黒です。

この時点で、ページの再生を少しずつ開始し、別の方法でフォーマットする方法を確認できます。次の手順では、基本ページを変更して少し面白く見えるようにします。書式を追加しない限り、任意のテキストエディタを使用できます。ただし、Komodo Editなどの製品を使用すると、作業がかなり簡単になります。

<！ - 2 - >

テキストエディタで新しいHTML5ファイルを作成します。

エディタがHTML5ファイルをサポートしていない可能性があります。すべてのテキストファイルが行います。特定のファイルタイプを使用すると、エディタが自動的にコードを挿入するため、入力時間が節約されます。
HTMLページのコードを入力します。

このセクションの前半に表示されているコードを正確に入力してください。
タグの直後に次のコードを挿入します。
<！ - 3 - >
タグはスタイルの先頭を定義します。このようにページに直接タグを置くと、内部スタイルと呼ばれます。外部スタイルシートを作成することもできます。外部スタイルシートはCSSファイル内にあります。

type属性は、タグにテキスト形式のCSS情報が含まれていることをブラウザに通知します。
タグ内で、（項目と項目の間に次のコードを入力します。
```
p {font-family：筆記体;フォントサイズ：大;色：#0000ff;背景色：#ffff00;} >これは複雑ですが、実際にはそうではありません.pは
```
（段落）タグを表します。このエントリのすべてが文書の
タグに影響します。
中括弧（{}）

中括弧の中には、属性の名前と値のペアが表示されます（これらの中のすべての書式設定命令は、文書内の
タグに適用されます）たとえば、font-familyは、使用するフォントを定義するCSS属性の名前です。この場合、属性はプラットフォームとブラウザのデフォルトの筆記フォントを指定します。CSSの総称名を使用すると、ブラウザを使用してアプリケーションがすべてのプラットフォームで一般的に互換性のある結果を生成することが保証されます。

font-size属性は、相対的なサイズを定義します。この場合、largeは、フォントをデフォルトのサイズに比べて大きくしたいと指定します。特定のフォントサイズを指定していないため、各プラットフォームおよびブラウザでは、個々の環境で通常よりもフォントを大きくすることができます。

color属性は、フォントの色に使用する赤、緑、青の値を指定します。値の前には、0からffまでの16進数のカラー値のあとにハッシュ（#）が続きます。この場合、フォントはプラットフォームでサポートされる最も明るい青色になります。同様に、background-color属性はテキストの背景を指定します。この場合、黄色になります。

ページを保存してブラウザに読み込みます。
図1-2に示すように、スタイルの変更の効果を確認できます。プラットフォームやブラウザのフォントファミリやフォントサイズが異なるため、ページがこのページのページと異なる場合があります。

タグ内のpスタイルの後に次のコードを入力します。
h1 {font-family： "Times New Roman"、ジョージア州、セリフ; font-size：40px; text-align：center;テキスト装飾：下線;色：#ff0000; background-color：#00ffff;}
```
このスタイルは
```
タグエントリに影響し、
タグスタイルに使用されるエントリの多くを持っています。しかし、今度はfont-family属性に3つのエントリが含まれていることに注意してください。Times New Romanの値が最も具体的であり、その後にGeorgiaが続き、最も小さいものがセリフです。スペースを含む値を操作する場合は、値を引用符で囲む必要があります。
3入力アプローチを使用すると、出力の外観をより詳細に制御できますが、特定のフォントをサポートしていないブラウザでもコンテンツを正しくレンダリングできます。特定のフォントを指定する場合は、指定したフォントにアクセスできないブラウザに対して、あまり特殊でないフォントも指定してください。

font-size属性も異なっています。今回は、特定のサイズの40ピクセルを使用します。特定の値で画面上に特殊効果を作成することも可能ですが、特定の値を使用すると問題が発生します。 40pxのエントリは、デスクトップやラップトップでうまく動作しますが、タブレットで問題が発生する可能性があります。スマートフォンに表示することは不可能です。

このスタイルには、テキストの外観を変更するエントリも含まれています。 text-align属性は、テキストが画面上に配置される場所を指定し、text-decoration属性は特殊なフォント機能を決定します。この場合、フォントは画面の中央にアンダーラインで表示されます。

ページを保存してブラウザに読み込みます。
図1-3に示すように、スタイルの変更の効果を確認できます。見出しは淡い青色の背景に赤いテキストで表示され、段落は黄色の背景に青色のテキストとして表示されます。