CSSでちょっとリストをデザイン

CSSでリストを少し飾ってみます。

HTMLでリストを作成

<ol>
  <li>
    <p>オーストラリアGP</p>
  </li>
  <li>
    <p>マレーシアGP</p>
  </li>
  <li>
    <p>バーレーンGP</p>
  </li>
  <li>
    <p>スペインGP</p>
  </li>
  <li>
    <p>モナコGP</p>
  </li>
</ol>

olタグに対してスタイルを設定

ol {
    font: italic 1.2em "Book Antiqua", Times, serif;
    color: #999999;
}

olタグ内のpタグに対してスタイルを設定

ol p {
    font: normal 0.8em Arial, Tahoma, sans-serif;
    color: #000000;
}

結果

1. オーストラリアGP

2. マレーシアGP

3. バーレーンGP

4. スペインGP

5. モナコGP