HTMLタグのデフォルトスタイルの配置

html、address、blockquote、body、dd、div、dl、dt、fieldset、form、frame、frameset、h1、h2、h3、h4、h5、h6、noframes、ol、p、ul、center、dir、hr、menu、pre { display: block }/*上記のリスト要素はデフォルトでブロック内に表示されます。表示されないものはインライン要素として表示されます。このリストは HTML4 版用です。一部の要素は XHTML1 では非推奨になります*/
li { display: list-item }/*デフォルトではリストとして表示されます*/
head { display: none }/*デフォルトでは表示されない*/
table { display: table }/*デフォルトはテーブル表示*/
tr { display: table-row }/*デフォルトはテーブル行表示*/
thead { display: table-header-group }/*デフォルトはテーブルヘッダーグループの表示*/
tbody { display: table-row-group }/*デフォルトはテーブル行グループ表示*/
tfoot { display: table-footer-group }/*デフォルトはテーブルフッターグループ表示*/
col { display: table-column }/*デフォルトはテーブル列表示*/
colgroup { display: table-column-group }/*デフォルトはテーブル列のグループ化*/

td, th { display: table-cell; }/*デフォルトはセル表示*/

caption { display: table-caption }/*デフォルトでは表のタイトルが表示されます*/

th { font-weight: bolder; text-align: center }/*デフォルトは表のタイトル表示、太字、中央揃え*/
caption { text-align: center }/*デフォルトは表のタイトルを中央に表示します*/
本文 { マージン: 8px; 行の高さ: 1.12 }
h1 { フォントサイズ: 2em; マージン: .67em 0 }
h2 { フォントサイズ: 1.5em; マージン: .75em 0 }
h3 { フォントサイズ: 1.17em; マージン: .83em 0 }
h4、p、blockquote、ul、fieldset、form、ol、dl、dir、menu { マージン: 1.12em 0 }
h5 { フォントサイズ: .83em; マージン: 1.5em 0 }
h6 { フォントサイズ: .75em; マージン: 1.67em 0 }
h1、h2、h3、h4、h5、h6、b、strong { フォントの太さ: 太字 }
ブロック引用 { 左余白: 40px; 右余白: 40px }
i、cite、em、var、address { フォントスタイル: 斜体 }
pre、tt、code、kbd、samp { フォントファミリ: monospace }
pre { 空白: pre }
ボタン、テキストエリア、入力、オブジェクト、選択 { display:inline-block; }
大きい{フォントサイズ: 1.17em}
小さい、サブ、sup { フォントサイズ: .83em }
sub { vertical-align: sub }/*デフォルトで下付き文字として表示されるサブ要素を定義します*/
sup { vertical-align: super }/*サブ要素をデフォルトで上付き文字として表示するように定義します*/
テーブル { 境界線の間隔: 2px; }
thead、tbody、tfoot { vertical-align: middle }/*ヘッダー、本文、フッター要素をデフォルトで垂直に配置するように定義します*/
td, th { vertical-align: inherit }/*セルと列ヘッダーの垂直方向の配置をデフォルトで定義し、デフォルトで継承します*/
s、strike、del { text-decoration: line-through }/*これらの要素をデフォルトで削除された行として表示するように定義します*/

hr { border: 1px inset }/*デフォルトで1px幅の3D凹面効果を持つように分割線を定義します*/

ol、ul、dir、menu、dd { 左余白: 40px }

ol { リストスタイルタイプ: 小数点 }
ol ul、ul ol、ul ul、ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { テキスト装飾: 下線 }
br:before { content: ""A" }/*改行要素の疑似オブジェクトコンテンツスタイルを定義します*/
:before, :after { white-space: pre-line }/*擬似オブジェクトスペース文字のデフォルトスタイルを定義する*/
中央 { テキスト配置: 中央 }
abbr、頭字語 { フォントバリエーション: small-caps; 文字間隔: 0.1em }
:link, :visited { テキスト装飾: 下線 }
:focus { アウトライン: 細い点線の反転 }
/* 双方向設定を開始します (変更しないでください) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*BDO要素属性がDIR="ltr"の場合のデフォルトのテキスト読み取りおよび書き込み表示順序を定義します*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*BDO要素属性がDIR="rtl"の場合のデフォルトのテキスト読み取りおよび書き込み表示順序を定義します*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embedded }/*属性がDIR="ltr"の場合、任意の要素のデフォルトのテキスト読み取りおよび書き込み表示順序を定義します*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embedded }/*属性がDIR="rtl"の場合、任意の要素のデフォルトのテキスト読み取りおよび書き込み表示順序を定義します*/

@media print { /*タイトルとリストのデフォルトの印刷スタイルを定義します*/
h1 { ページ区切り前: 常に }
h1、h2、h3、h4、h5、h6 { ページ後の改ページ: 回避 }
ul、ol、dl { ページ区切り: 回避 }
}

ブラウザのデフォルトスタイル

1. ページの余白
IE のデフォルト値は 10px で、body の margin プロパティで設定できます。
FF のデフォルト値は 8px です。body の padding 属性設定によってページ余白をクリアするには、これら 2 つの属性値をクリアする必要があります。

コードをコピー

コードは次のとおりです。

体 {
マージン:0;
パディング:0;
}

2. 段落間隔
IE のデフォルト値は 19px で、p の margin-top プロパティを使用して設定できます。
FF のデフォルト値は 1.12em で、p の margin-bottom プロパティで設定できます。
pはデフォルトでブロック単位で表示されます。セグメント間隔をクリアするには、通常次のように設定します。

コードをコピー

コードは次のとおりです。

ｐ {
上マージン:0;
マージン下部:0;
}

3. タイトルスタイル
h1～h6はデフォルトで太字で表示されます: font-weight:bold;。
デフォルトのサイズについては、上記の表を参照してください。

コードをコピー

コードは次のとおりです。

h1 {フォントサイズ:xx-large;}
h2 {フォントサイズ:特大;}
h3 {フォントサイズ:大きい;}
h4 {フォントサイズ:中;}
h5 {フォントサイズ:small;}
h6 {フォントサイズ:x-small;}

ほとんどのブラウザのデフォルトのフォントサイズは 16 ピクセルで、これは中サイズに相当します。h1 ～ h6 要素は、デフォルトではブロックフォントの太字フォントで表示されます。
タイトルスタイルをクリアするには、通常、

コードをコピー

コードは次のとおりです。

hx {
フォントの太さ:通常;
フォントサイズ:値;
}

4. リストスタイル
IE のデフォルト値は 40px ですが、ul と ol の margin 属性で設定できます。
FF のデフォルト値は 40px で、ul と ol の padding プロパティで設定できます。
dl にはインデントがありませんが、その中の説明要素 dd はデフォルトで 40px インデントされていますが、名前要素 dt にはインデントがありません。
リストスタイルをクリアするには、通常、

コードをコピー

コードは次のとおりです。

ul、ol、dd {
list-style-type:none;/*リストスタイル文字をクリア*/
margin-left:0;/*IE の左インデントをクリア*/
padding-left:0;/*IE以外の左インデントをクリア*/
}

5. 中心となる要素
IE のデフォルトは text-align:center です。
FF のデフォルト値は margin-left:auto;margin-right:auto; です。

6. ハイパーリンクスタイル
デフォルトのスタイルは下線が引かれ、青色で表示されます。訪問したハイパーリンクは紫色に変わります。リンクスタイルをクリアするには、通常、

コードをコピー

コードは次のとおりです。

{
テキスト装飾:なし;
色:#色名;
}

7つのマウススタイル
IE のデフォルトは cursor:hand です。
FF のデフォルトは cursor:pointer; です。このステートメントはIEでも機能します

8 画像リンクスタイル
IEのデフォルトは2pxの紫色の境界線です
FFはデフォルトで2pxの青い枠線を表示します。画像リンクスタイルをクリアするには、通常次のように設定します。
画像 {
境界線:0;
}

<<: IE6 で幅と高さがおかしいバグ

>>: CSS を使用して ul と li の水平配置を実現する 2 つの方法