スタイルシート(CSS)講座 トップ >> レヴェルアップ練習問題 >> 確認問題〜テキスト

確認問題〜テキスト

それでは、これまで定義してきた、テキストに関する属性と値だけ変更してください。

テキストのカラーを、 #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>でつくるボックスの感覚と、
その内容である、テキストの感覚を、取り上げてみました。

つぎは、ボックスの視覚的な要素をいろいろいじって、
スタイルシートでのデザインを練習していきましょう。

内容は、最初にとりあげた、枠線と、ボックスの背景についてです。

<< テキストの行間を定義してみる

枠線の線種を変更してみよう >>

<< スタイルシート(CSS)講座 トップ