スタイルシートの作成(メモ帳)-演習A

投稿者: | 2013 年 6 月 6 日

スタイルシート(ここでは、style.cssという名前で作成)と、それを読み込むhtmlのファイル(ここでは、index.htmlという名前で作成)の2つを作っていきます。
注)2つのファイルは同じフォルダの中に保存します。

  1. メモ帳(MKEditor)を起動する。
  2. style.cssという名前で保存する。
  3. まずページの設定をする。
    ・背景画像をback.gifに、
    ・属性を、繰り返す(水平方向)に設定。
    BODY{
    background-image : url(back.gif);
    background-repeat: repeat-x;
    }
  4. 見出し1を設定する。
    ・文字サイズを400%、
    ・水平方向の配置を中央揃え、
    ・文字色を#336666
    に設定する。
    H1{
    font-size : 400%;
    text-align: center;
    color : #336666;
    }
  5. 見出し2を設定する。
    ・文字の属性:太さをふつう、
    ・文字サイズを250%、
    ・文字色を#336666
    に設定する。
    H2{
    font-weight : normal;
    font-size : 250%;
    color : #336666;
    }
  6. リンクを設定する。
    ・文字サイズを150%、
    ・背景色を#ffff99
    に設定する。
    A{
    font-size : 150%;
    background-color : #ffff99;
    }
  7. 上書き保存する。
  8. alphaEDITを起動する。
  9. index.htmlという名前で保存する。
  10. タイトル挿入
  11. 次の文章をタイトルの後に入力する。(半角スペースの区切りに注意)
    <link rel=stylesheet href=style.css type=text/css>
    自動的に”(ダブルクォーツ)が挿入される。
  12. 上書き保存
  13. 本文を入力していく。