【前のページ←見本→次のページ】 更新日

Ⅱ-４　一部分の文字の色を変える

１）見出しの色を変えます

見出し文字を変更するため、h1{～}の中にcolorの追加設定します
色の値を「royalblue」と指定します
<html>
<head>
<title>色探しの旅</title>
<style type="text/css"><!--

body{color:#666666}
h1{font-size:25px;　font-family:'Comic Sans MS';color:royalblue}
span{color:olive}

--></style>
</head>
<body>

<h1>色探しの旅『Sky&Water』</h1>

<p>日本の四季には色が満ちています。空そして水の色<span>『色探しの旅』</span>に出かけませんか</p>

<div>copyright(c)sora</div>
</body>
</html>

２）文章中の文字のデザインを設定出来るようにします

タグで囲まれていない文章中にある文字は、タグで囲んで設定を追加します
そこで変更したい文字を<span>～</span>で囲みます
デザイン設定は「span{　}」を追加します

３）文章中の文字の色を設定します

span{～}の中にcolorを追加します
ここでは色の値「olive」を指定します

４）デザイン設定が重複した場合の優先度

<body>～</body>に囲まれた<h1>～</h1>は「body」の設定で表示される
h1に別要素の設定を追加すると「body」と「h1」の追加要素の設定が適用される
h1とbodyに同じ要素を追加すると内側にあるタグ設定が適用される。ですのでh1独自の設定が可能です
同じタグに対するデザイン設定が重複される場合、下に書いた設定が適用されます 【参考】