css詳細

1.ほとんどのブラウザは、リストを無秩序リストの左枠線30ピクセル(デフォルトpadding)に配置します.無秩序リスト自体は、コンテナの上縁から約10ピクセル(デフォルトmargin)離れており、各リスト項目はブロックレベルの要素であるため、コンテナの幅を伸ばして埋め、上下の項目は別の行になります.
 
2.list-style略語
List-style-type,list-style-position,list-style-imageは任意の順序で並べ替えられます
list-style:none inside url(pic/list.gif)
 
3.ブラウザレイアウト
ページ全体にcontainerを追加し、masthead、content、sidebar、footerをcontainerに挿入し、containerのプロパティを次のように設定します.
margin:20 px auto 20 px autoは、Webページ全体のレイアウトがどのブラウザで開いても大きな違いがないことを保証します.
もちろん各部分をcontainerに入れるのは、Webページ全体を設定する必要がある背景の下での方法ですが、ブラウザレイアウトの互換性の問題を解決するには良い方法です.
marginは、コンテナ内の要素の相対的な位置を決定するために使用されます.
 
4.ボーダー属性を設定し、立体感をシミュレートする
border:1px solid; border-color:#fff#666 #aaa #fff ;
この2つのプロパティは別々に書くことに注意します.
5.リストとformのレイアウト設定
リストとformには、AがBを含むことが基本形態であるため、実際に表示スタイルを決定するのは2番目の要素であるという共通の特徴がある.
リスト#リスト#
 

  #sidebar ul{
              margin:0;
              padding:0;
	list-style:none;
	font:bold 14px 'Lucida Grande',Verdana,sans-serif;
	text-align:center;
  }
  #sidebar li{
	margin:0 30px 0 26px;
	padding:2px 10px;
	border:1px solid;
	border-color:#fff #666 #aaa #fff ;
	background:#ddd;
  } 

ulはスタイルを表示するために使用され、liはリスト全体の具体的なレイアウトを決定するために使用されます.
フォーム＃フォーム＃
 

/* -------------
   Form elements 
   -------------*/
form {
    margin:0;
    padding:0;
}

fieldset {
    border:0;
    margin:10px 0 10px 26px;
    padding:0;	
}
input.submit {
    margin:0 0 30px 26px;
} 

 
6.liにfloatを設定する:left;フローティング原理を利用して、リストを横方向のナビゲーションバーのスタイルにすることもできます.
 
 7.タイトルラベルのデフォルトは太字スタイルです