2012.02.17xoopsズープス

cssの規則と順序まとめ

■全体規則　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

* NN4 には CSS を読み込ませない（定石）
* ブラウザのデフォルトスタイルを殺す（定石）

* /* 全指定 */
{margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;}
* img 要素に vertical-align:bottom; と border:none; を指定（定石）
* line-height は数値のみを指定（定石／em や % で指定するのは問題の元）

■width height
* width を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）
* height を指定した要素に padding と border を指定しない（旧 IE と互換モードへの対策）

■margin

* マイナスの margin を指定した要素と背景画像を重ねない（IE で背景画像が切れる）

■float
* float を指定した要素に width を必ず指定する（文法規則）
* float を指定した要素に margin を指定しない（IE が2倍値で描画する）
* float で回り込む要素の内容が少ないとき、回り込む側にも float を指定するか、高さを指定（IE6 対策）
* float した要素の下に隙間を作りたい場合、float した要素に margin-bottom を指定＋親要素に padding-bottom を指定（注：検証不十分）

■position　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
* position:absolute; を指定した要素には margin を指定しない（注：検証不十分）
* position:absolute; を指定した要素にはなるべく width も指定する（定石）
* position:absolute; の基準として right と bottom は避ける（Opera6 を無視しない場合）

* position:relative; を多用しない（定石／たいていスクロールが重くなる）
* z-index を指定する要素には position プロパティで static 以外の値を指定（文法規則）
■background
* background-attachment:fixed; を多用しない（定石／スクロールが重くなったり表示が乱れたり）
* overflow プロパティを使う場合 MacIE5 は諦める（特殊なケース以外では内容が消える）

CSSプロパティ順序

1.表示や配置など「視覚整形モデル」に関するプロパティ	2.ボックスモデルに関するプロパティ	3.背景と前景に関するプロパティ	7.UIに関するプロパティ**

display	width**	background**	1. outline
	1. min-width	1. background-color	2. outline-width
list-style**	2. max-width	2. background-image	3. outline-style
1. list-style-type		3. background-repeat	4. outline-color
2. list-style-image	height**	4. background-attachment	5. cursor
3. list-style-position	1. min-height	5. background-position
4. marker-offset（CSS2.1勧告候補では削除）	2. max-height

position**	line-height		8.印刷に関するプロパティ**
1. top	vertical-align	4.フォントとテキストに関するプロパティ
2. right	overflow		1. size
3. bottom	clip	color	2. marks
4. left	visibility		3. page-break-before
		font**	4. page-break-after
float	margin**	1. font-family	5. page-break-inside
clear	1. margin-top	2. font-style	6. page
z-index	2. margin-right	3. font-variant	7. orphans
	3. margin-bottom	4. font-weight	8. widows
	4. margin-left	5. font-stretch
		6. font-size
	padding**	7. font-size-adjust（CSS2.1勧告候補では削除）
	1. padding-top		9.音声に関するプロパティ**
	2. padding-right	text-indent
	3. padding-bottom	text-decoration	1. speak-header
	4. padding-left	text-align	2. volume
		vertical-align	3. speak
	border**	white-space	4. pause-before
	1. border-width		5. pause-after
	2. border-top-width	other text**	6. pause
	3. border-right-width	1. text-shadow（CSS2.1勧告候補では削除）	7. cue-before
	4. border-bottom-width	2. letter-spacing	8. cue-after
	5. border-left-width	3. word-spacing	9. cue
	6. border-color	4. text-transform	10. play-during
	7. border-top-color	5. white-space	11. azimuth
	8. border-right-color		12. elevation
	9. border-bottom-color		13. speech-rate
	10. border-left-color		14. voice-family
	11. border-style	5.表に関するプロパティ**	15. pitch
	12. border-top-style		16. pitch-range
	13. border-right-style	1. caption-side	17. stress
	14. border-bottom-style	2. table-layout	18. richness
	15. border-left-style	3. border-collapse	19. speak-punctuation
	16. border-top	4. border-spacing	20. speak-numeral
	17. border-bottom	5. empty-cells
	18. border-right
	19. border-left

		6.生成内容に関するプロパティ**

		1. contentcounter-increment
		2. counter-reset
		3. quotes