(1学期の復習)-- idとclassの違い(画像にidを付ける) marginとpaddingの違い
idとclassの違い
idもclassもグローバル属性(※)
id 1ページのHTML内に1つしかない物にはID css内での指定は #id名
class 1ページのHTML内に複数使う物にはclass css内での指定は.class名
design_zeroの時のcssでいうと?
↓
sideboxはサイドバー内にいくつあるものなのでclassで.sideber
footerもcontentもmaincontentも1ページ内に1個づつしかいらないものなので
idで#footer、#content、#maincontentで表記する。
(教科書のP.88 P.108でやった内容)
画像にもidをつけることができ、その画像だけのcss設定をつけることができる。
(例:「特定の画像の周りは必ず〇〇pxの隙間を開けたい」
「特定の画像だけ必ず半透明に表示したい」など)
marginとpaddingの違い
1 P.236ページ以降 margin や padding の css表記が違う
margin = divボックスの外側の余白
margin = divボックスの外側の余白
padding = divボックスの内側の余白
個別指定
(デメリット) 指定に4行使うためcssが長くなる。また、直に打ち込む時には時間がかかる個別指定
(メリット) dreamweaverの新しいバージョンでは自動でこの表記になるので、
修正時にはこれを理解しておくとなおしやすい
- margin-top
- margin-bottom
- margin-left
- margin-right
marginの省略
(デメリット) 上下左右の順序を覚えきっていないと混乱する
(メリット) 指定が1行で済むためcssが短くできる。また、直に打ち込む時に時間が短縮できる。
- margin:0; (上下左右)
- margin: 0 0; (上下) (左右)
- margin:0 0 0; (上) (左右) (下)
- margin:0 0 0 0; (上) (右) (下) (左)
コメント
コメントを投稿