CSS 使用のヒントのまとめ

テキスト配置:中央;

div#コンテナ{
幅:760ピクセル;
マージン:0 自動;
}

<div id="コンテナ">1234567890</div>

div#コンテナ {高さ: 35px; 行の高さ: 35px;}

<div id="big">
<div id="small">
</div>
</div>

div#big{
位置:相対;
高さ:480px;
}

div#小さい{
位置: 絶対;
上位: 50%;
高さ: 240px;
上マージン: -120px;
}

画像 {最大幅: 100%}

画像 {幅: 100%}

div#ボタン{
背景: #888;
境界線: 1px 実線;
境界線の色: #999 #777 #777 #999;
}

体 {
フォント: フォントスタイル、フォントバリアント、フォントウェイト、フォントサイズ、行の高さ、フォントファミリー;
}

体 {
フォントファミリー: Arial、Helvetica、sans-serif;
フォントサイズ: 13px;
フォントの太さ: 標準;
フォントバリアント: スモールキャップ;
フォントスタイル: 斜体;
行の高さ: 150%;
}

体 {
フォント: 斜体小文字大文字通常 13px/150% Arial、Helvetica、sans-serif;
}

リンク
a:訪問した
ホバー
a:アクティブ

<!--[IEの場合]>
<link rel="スタイルシート" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->

<!--[if IE 6]> - IE6 のみ対象 -->
<!--[if gt IE 6]> - IE7以上が対象 -->
<!--[if lt IE 6]> - IE5.5以下を対象とします -->
<!--[if gte IE 6]> - IE6以上を対象とします -->
<!--[if lte IE 6]> - IE6以下を対象とします -->

/* 以下のルールは IE6 にのみ適用されます */
* html{
}
* html 本文{
}
* html .foo{
}

/* 以下のルールは IE7 にのみ適用されます */
*+html .foo{
}

。要素 {
background: red; /* 最新のブラウザ */
*background: green; /* IE 7以下 */
_background: blue; /* IE6 専用 */
}

<div id="ID" class="CLASS" style="color:black;"></div>

div < .class < div.class < #id < div#id < #id.class < div#id.class

。要素 {
最小高さ: 500px;
高さ: 自動 !重要;
高さ: 500px;
}

。要素 {
最小高さ: 500ピクセル
_高さ: 500ピクセル
}

本文 {フォントサイズ:62.5%;}

h1 {フォントサイズ: 2.4em}

p {テキスト変換: 大文字}
p {テキスト変換: 小文字}
p {テキスト変換: 大文字化}

p {フォントバリエーション: 小文字}

ul {リストスタイル: なし}
ul li {
背景画像: url("画像へのパス");
背景繰り返し: なし;
背景位置: 0 0.5em;
}

。要素 {
フィルター:アルファ(不透明度=50);
-moz-不透明度:0.5;
-khtml-不透明度: 0.5;
不透明度: 0.5;
}

.三角形 {
border-color: 透明 透明 緑 透明;
境界線のスタイル: solid;
境界線の幅: 0px 300px 300px 300px;
高さ: 0px;
幅: 0px;
}

h1 { 空白: ラップなし; }

h1 {
テキストインデント:-9999px;
背景:url("h1-image.jpg") 繰り返しなし;
幅:200px;
高さ:50px;
}

input:focus { border: 2px 緑; }

h1 {
色: 赤 !重要;
色: 青;
}

<a class="tooltip" href="#">リンクテキスト<span>プロンプトテキスト</span></a>

a.tooltip {位置: 相対}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color は IE6 では必須です*/
a.tooltip:hover span{display:inline; position:absolute;}

本文{ マージン:0; パディング:100px 0 0 0;}
div#ヘッダー{
位置:絶対;
トップ:0;
左:0;
幅:100%;
高さ:<長さ>;
}
@メディアスクリーン{
本文>div#header{位置: 固定;}
}
* html 本文{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}

* html #フッター {
位置:絶対;
top:式((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

.クラス名 {
背景: url(image.png);
_背景: なし;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image.png', sizingMethod='crop');
}

/* IE6以下 */
* html #uno { 色: 赤 }
/* IE7 */
*:first-child+html #dos { 色: 赤 }
/* IE7、FF、Saf、Opera */
html>body #tres { 色: 赤 }
/* IE8、FF、Saf、Opera (IE 6、7 以外のすべて) */
html>/**/body #cuatro { 色: 赤 }
/* Opera 9.27 以下、Safari 2 */
html:first-child #cinco { 色: 赤 }
/* サファリ 2-3 */
html[xmlns*=""] body:last-child #seis { 色: 赤 }
/* Safari 3+、Chrome 1+、Opera9+、FF 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* Safari 3+、Chrome 1+、Opera9+、FF 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+、chrome1+ */
@media screen および (-webkit-min-device-pixel-ratio:0) {
#diez { 色: 赤 }
}
/* iPhone / モバイル Webkit */
@media screen および (最大デバイス幅: 480px) {
#veintiseis { 色: 赤 }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { 色: 赤 }
/* Safari 2 - 3.1、Opera 9.25 */
*|html[xmlns*=""] #catorce { 色: 赤 }
/* IE6-8 以外のすべて */
:root *> #マルメロ { 色: 赤 }
/* IE7 */
*+html #dieciocho { 色: 赤 }
/* Firefox のみ。1+ */
#veinticuatro、x:-moz-any-link { 色: 赤 }
/* Firefox 3.0 以降 */
#veinticinco、x:-moz-any-link、x:default { 色: 赤 }
/***** 属性ハック ******/
/* IE6 */
#一度だけ { _color: 青 }
/* IE6、IE7 */
#doce { *color: blue; /* または #color: blue */ }
/* IE6 以外のすべて */
#diecisiete { color/**/: blue }
/* IE6、IE7、IE8 */
#diecinueve { 色: 青\9; }
/* IE7、IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6、IE7 -- !important として機能します */
#veintesiete { color: blue !ie; } /* ! の後の文字列は何でも構いません */

<図クラス='ロゴ'>
<span></span>
<img クラス = '写真'/>
</図>

.ロゴ {
表示: ブロック;
テキスト配置: 中央;
表示: ブロック;
テキスト配置: 中央;
垂直位置合わせ: 中央;
境界線: 4px 実線 #dddddd;
パディング: 4px;
高さ: 74px;
幅: 74px; }
.ロゴ * {
表示: インラインブロック;
高さ: 100%;
垂直方向の位置合わせ: 中央; }
.ロゴ .写真 {
高さ: 自動;
幅: 自動;
最大幅: 100%;
最大高さ: 100%; }

。影 {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
ボックスの影: 5px 5px 5px #ccc;
}

。影 {
-moz-box-shadow:インセット 0 0 10px #000000;
-webkit-box-shadow:インセット 0 0 10px #000000;
ボックスシャドウ:インセット 0 0 10px #000000;
}

テキストエリア { オーバーフロー: 自動; }