ぱそおーるCSS講座

文字色を変更する
color : 色指定;

記述例
<div style="color : red;">

文字の背景色を変更する
background-color : 色指定;

記述例
<div style="background-color : pink;">

現実的には、文字の背景ではなくてボックスの背景色です。
色々なタグに使われる属性です。

文字デザイン（フォント）を変更する
font-family : "フォント名",（フォントファミリー名）;
指定方法は２種類あります。
フォントの種類（ファミリー）で指定。個別のフォント名で指定。
フォントを設定しても、閲覧している人の環境次第ではデフォルト文字になります。
個別のフォント名で設定する場合は["]を使って囲みます。ファミリー設定の場合は必要ありません。
複数設定する場合は[,]で区切ります。
複数設定しておくと、閲覧者の環境で表示出来ないフォントの場合に、自動的に第二候補、第三候補のフォントで表示されます。

CSSで使うフォントファミリーは５種類あります。

1. sans-serif : ゴシック体風、ひげなしフォント
2. serif : 明朝体風、ひげ付きフォント
3. monospace : 大文字、小文字、英数文字の幅が等しい。等幅のフォント
4. fantasy : 装飾フォント。ポップ文字などもこれに分類。
5. cursive : 手書き風のフォント

フォントファミリーで指定すると、そのグループに属するフォントが適用されます。

記述例
<div style="font-family : monospace;">

<div style="font-family : "MS 明朝","Comic Sans MS",cursive;">

文字の大きさを変更する
font-size : キーワード、数値指定、%指定;

キーワードは９種類あります。

1. xx-small : 極めて小さい
2. x-small : 小さい
3. small : やや小さい
4. medium : 標準（デフォルト）
5. large : やや大きい
6. x-large : 大きい
7. xx-large : 極めて大きい
8. smaller : 親要素のサイズより１段階小さい
9. larger : 親要素のサイズより１段階大きい

記述例
<div style="font-size : x-large;">

<div style="font-size : 12px;">

文字の太さを変更する
font-weight : キーワード、数値指定;

キーワードは４種類あります。

1. normal : 標準（デフォルト）
2. bold : 標準的な太字
3. lighter : 親要素より一段階細い
4. bolder : 親要素より一段階太い

数値は100,200,300,400,500,600,700,800,900で指定します。
これ以外の数値では変更されません。
400がnormal,700がboldと同じ太さです。

記述例
<div style="font-weight : bold;">

<div style="font-weight : 900;">

文字を斜体にする
font-style : キーワード;

キーワードは３種類です。

1. normal : 通常表示（デフォルト）
2. italic : 斜体
3. oblique : 斜体

記述例
<div style="font-style : italic;">

font属性をまとめて指定する
font : font-styleの値 font-weightの値 font-sizeの値/line-heightの値 font-familyの値;

指定したい属性を半角スペースで区切って記述します。
font-style : 省略可能
font-weight : 省略可能
font-size : 省略不可
line-height : 省略可能、記述する際は、font-sizeの後に[/]を入れて記述。
font-family : 省略不可

line-heigtはtext関連のスタイルを参考にしてください。

記述例
<div style="font : italic bold 20px/40px fantasy;">

<div style="font : 18px fantasy;">

<div style="font : 18px fantasy;color : red;">