テキストを飾る　font-style属性

テキストにイタリック効果をiタグなしでCSSで適用できます。
これを可能にしてくれるCSSの属性は　font-styleです。

セレクター{font-style:バリュー}

イタリック効果を表現するに使うバリューはitalicです。

セレクター{font-style:italic}

では、使って見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストを飾って見よう。</title>
<style>
p{font-style:italic}
</style>
</head>
<body>
    <p>Welcome to coreasur</p>
</body>
</html>

結果

font-style属性に使えるバリューは五つあります。

バリュー	意味
inherit	パレントタグに適用されてるfont-styleのバリューを指定する。
initial	バリューを初期化する。
italic	イタリック効果を適用する。
normal	基本バリュー（normal）効果を適用する。
oblique	オブリク効果を適用する。

パレントタグについて調べましょう。
パレントという意味はparent（両親）の意味なんですけど、タグの上にあるタグを意味します。
次の例ではdivタグがpタグのパレントです。

<div class="parentTag">
    parent
    <p class="childTag">child</p>
</div>

では、パレントタグにitalicを適用して、チャイルドタグタグにinheritを適用して見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストを飾って見よう。</title>
<style>
.parentTag{font-style:italic}
.childTag{font-style:inherit}
</style>
</head>
<body>
    <div class="parentTag">
        parent
        <p class="childTag">child</p>
    </div>
</body>
</html>

結果

上のコードの結果を見るとチャイルドタグにイタリック効果は適用されたことがわかります。

今度は上のコードでパレントタグのfont-style属性のバリューをnormalにして見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS::coreasur - テキストを飾って見よう。</title>
<style>
.parentTag{font-style:normal}
.childTag{font-style:inherit}
</style>
</head>
<body>
    <div class="parentTag">
        parent
        <p class="childTag">child</p>
    </div>
</body>
</html>

結果

こうinheritはパレントタグのバリューを指定します。

テキストを飾る font-style属性

テキストを飾る　font-style属性