子孫セレクタについて・これまでのまとめ

これまでのまとめ

• CSSはボックスの組み合わせでできている。(ボックス= divボックス)
• ボックスの幅＝(中身の幅 + 余白の幅 + ボーダーの幅 + マージンの幅)
• ※IDセレクタ＝1ページに1回だけ。※クラスセレクタ＝1ページに複数回使用可能。

• CSSをHTMLにリンクして適用する
  　<link href="style.css" rel="stylesheet" type="text/css">
• グループ化とは
  　＝文字(見出し)・本文・コピーライト・段落をdivボックスに入れること。
• 2段組みや3段組みの方法＝フロートに左・右を入れる。
• プロパティの項目からフロートしたものの次の要素に解除(clear)を指定 
  
  << CSSの読み方>>
• 読みづらいCSSプロパティの正しい読み方 ...
•  何て読む!? 今さら聞けない読みにくいCSSプロパティー名

 子孫セレクタについて   利点：特定の構造環境でのみ有効なルールを定義できる

body { backgroundcolor: #999;} 
body #container {padding: 20px; margin-right: 50px; margin-left: 50px;   border: 0px ; backgroundcolor: #FFF;}
body #container #keyword

{text-align: right; margin: 0px;    padding: 0px;} 
body #container h1{font-size: x-large; 〜}
body #container h2{font-size: medium;  〜}
body #container #figbox { padding: 12px; border: 0px ;}
body #container #figbox #figure { float: left; margin-right: 1em;}   
body #container address { clear: left;}

DivボックスにCSSを使う

・(1)　DIVボックスをつくる 　　　　　= 上のバー「挿入」→レイアウトオブジェクト→Div　タグで作成 ・(2)　DIVボックスに名前をつける  　　　　　= 出てくるDivパネルにクラスかidを記入 ・(3)　DIVボックスのCSSルールを作成する 　　　　　= CSSスタイルの新規CSSルールボタンをクリック ・(4)　DIVボックスのCSSをデザインする  　　　　(余白／マージン／ボーダー=境界線)

(1)

(2)

(3)