CSS実用テクニック01

CSS実用テクニック01

01.DIV水平中央
DIVを水平に中央に配置するのは簡単です.DIVのブロードバンドを設定し、左右のmarginsをautoに設定するだけです.

div#container {width: 960px; margin: 0 auto }

02.文字が垂直に中央にある一方通行の文字が中央にある場合は、行の高さと容器の高さを同じにするだけでよい.たとえば、以下のHTMLコード:で、次のスタイルで中央に位置することができます.

div#container {height: 35px; line-height: 35px;}

どのように多くの行字を持っていて、行の高さを容器の高さの1/Nに設定すればいいです. 03.DIVは垂直に中央に位置しています.たとえば、次の2つのdivがあります.真ん中のdivを垂直に中央に位置させる方法です.まず、外層容器の位置をrelativeとする.

div#f{ position:relative; height:500px;}

次に、中の容器をabsoluteに位置決めし、左上隅をy軸に沿って50%下に移動し、最後にmargin-topを自身の高さの50%上に移動すればよい.

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px;}

同じ考え方を使っても、水平中心の効果を出すことができます.04.アダプティブブロードバンドの画像[プッシュ]は、外層容器サイズのみを適用した画像を以下のスタイルで実現することができる.

img {max-width: 100%} 
/* IE 6 hack */ 
<!--[if IE 6]> 
img {width: 100%} 
<![endif]--> 

05.3 Dボタンボタンボタンに3 D効果を持たせるには、左上部の枠を薄い色、右下部の枠を濃い色にすればよい. 

div#button { 
   background: #888; 
   border: 1px solid; 
   border-color: #999 #777 #777 #999; 
  }

06.link状態の設定順序a:link a:visited a:hover a:active簡単記憶法:love hate(LVHA)
07.CSSの優先度の基本ルールは、「行内スタイル」>「idスタイル」>「classスタイル」>「ラベル名スタイル」です.08.IEのmin-height修正IE 6はmin-heightをサポートしていないため、以下の方法で修正することができます.

/*     */ 
.element { 
　min-height: 500px; 
　height: auto !important; 
　height: 500px; 
} 
/*     */ 
.element { 
　min-height: 500px 
　_height: 500px /* _   IE6     */ 
}

09.強調フォーカス要素

input:focus { border: 2px solid green;}

10.!important複数のCSS文が衝突した場合、あります!importantの文は他の文を上書きします.IEがサポートしていないため!importantなので、異なるブラウザを区別することもできます.

/* IE       ，            */ 
h1 { 
  color: red !important; 
  color: blue; 
} 

11.CSSインプリメンテーションプロンプトボックスマウスをリンクの上に移動すると、LinkTooltipsというプロンプトボックスが自動的に表示されます.

  a.tooltip {position: relative} 
  a.tooltip span {display:none; padding:5px; width:200px;} 
  a:hover {background:#fff;} /*background-color is a must for IE6*/ 
  a.tooltip:hover span{display:inline; position:absolute;} 

12.Blockとinline要素は、すべてのHTML要素と比較してblockとinlineの1つに属します.block要素の特徴は:1.いつも新しい行で始まります.  2. 高さ、行の高さ、頂部と底辺の距離を制御できます.  3. 幅のデフォルトは、幅を設定しない限り、コンテナの100%です.