それでは、これまで定義してきた、テキストに関する属性と値だけ変更してください。
テキストのカラーを、 #336699 。
テキストのサイズを、 16px 。
テキストを太字に。
テキストのスタイルを斜体に。
中央揃え。
そして、行間(line-height)を、130% に定義してください。
テキストのカラーとサイズを定義したボックス
に、テキストのスタイルを加えたボックス
.box {
border:2px solid #CC0000;
width: 216px;
height: 176px;
padding: 20px 40px 0px 40px;
margin: 0px 0px 0px 50px;
color: #336699;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 130%;
テキストのスタイルは、変更しなくてもよかったですね。
でも繰り返して練習するのが、1番の練習だと思うので、
よろしくお願いします。
とりあえず、ここまでで、 <DIV>でつくるボックスの感覚と、
その内容である、テキストの感覚を、取り上げてみました。
つぎは、ボックスの視覚的な要素をいろいろいじって、
スタイルシートでのデザインを練習していきましょう。
内容は、最初にとりあげた、
枠線と、ボックスの背景についてです。