Lesson5~６　Study note（CSS入門編）

授業ノート

CSSを書く場所

◎外部リンクにする

HTMLファイルとは別に、CSSファイルを作成。
headの中,<title>タグの下にリンクを書く。
<head>
<meta>
<titel></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

◎HTMLに直接書く

headの中、コメントタグの中で直接書く。

<head>
<style type=”text/css”>
< !- -
h1 {
color: red;
}

　-->

</style>
</head>

CSSの構文

h1 [
color: red;
}

セレクタ名｛
プロパティ：値；
｝

ページ作成手順

  1. 文章の構造化
    2. <h1>大見出し</h1> <p>文章</p> <h2><中見出し/h2> <p>文章</p>
  2. グループ化
    3. 内側から外側へ。グループの名前を決めていく <div id=””>　</div> <div class=””>　</div> id≒1個（例：富士山） class≒複数（例：山） 役割のあるグループならわかりやすい名前をつける。 例：#navi　#menu
  3. 新規CSSファイル
  4. 新ルールの作成（セレクタに値を入れる
    5. 外側から内側へ。
  5. セレクタ（h1 h2 p a・・・）の初期化
    6. bodyで全体のコントロール ブロック（div）

ショートハンド

marginやpaddingの値をまとめて設定。

margin: 1px 2px 3px 4px；
margin: 上　右　下　左；