ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSリセット_html/css_WEB-ITnose
1. 注: リセットする場合は、不必要なリセットを避けてください。たとえば、「dt」にはデフォルトのマージンがありません。 「ul」と「ol」には左マージンのみが付きます。 。 。
2. 使用する場合、グローバル フォントが 62.5% に設定されているため、ページはクラス "fz" で div をラップし、ページ フォントを 12px に設定する必要があります
/*reset*/
body, p, dd, dl, form, h1, h2, h3, ul, ol, textarea { margin: 0; }
ul, ol { padding-left: 0 }
td; , th, button, input, select, textarea, iframe { margin: 0; }
body, button, input, select, option, textarea { font-family: "Microsoft YaHei", "Arial"; : #333; フォントサイズ: 62.5%; }
input { ボーダー: なし }
input[type="text"] { text -インデント: 4px; }
ボディ { 背景色: #fff; }
a { カラー: #0074d9; { }
a:visited { }
a:active { }
iframe { border: none; }
table { border-collapse: border-spacing: 0;
/*ブラウザのデフォルト効果を削除*/
input:focus, textarea:focus, select:focus {outline: none}
/*Chrome などのブラウザのテキスト ボックスのデフォルトの光る境界線を削除*/
input::-ms-clear { display: none; }
/*IE10 以降のブラウザでテキスト ボックスの後ろにある小さな十字を削除します*/
textarea {size: none }
/*複数行のテキスト ボックスのテキストエリアのドラッグを無効にします*/
/* -------------------単一 CSS ----------------------- -----*/
/*背景色*/
.bg-white { 背景色: #fff; }
.bg-red { 背景色: #ff4136 }
.bg-grey { 背景色: #dcdcdc }
/*ボーダーカラー名ルール*/
.bde { ボーダー: 1px ソリッド #eee; }
.bbd { ボーダーボトム: 1px ソリッド #ddd; *clear*/
.clb { クリア: 両方; }
.clr { クリア: 右; }
/*cursor*/
.poi { カーソル: ポインター;
.def { カーソル: デフォルト }
/*colors*/
.white { カラー: #fff; }
.orange { カラー: #FF8518; .red { カラー: #FF4136 ; }
.g3 { カラー: #333; }
.dn { ディスプレイ: なし; dib { 表示: インラインブロック ; }
/*float*/
.l { float: 左; }
.r { float: 右 }
/*font-size*/
.fzサイズ: 1.2em; }
.fz ボタン、.fz 入力、.fz 選択、.fz テキストエリア、.fz オプション { font-size: 1em; }
.fz14、input.fz { font-size: 1.15em ; }
.fz18 { font-size: 1.3em; }
.fz24 { font-size: 2em; }
/*font-family*/
.fa { font-family: Arial; fv { font-family: verdana }
.fw { font-family: 'Microsoft Yahei' }
/*font-style*/
.n { font-weight:normal; -太さ: 太字; }
.i { フォントスタイル: イタリック; }
/*高さ*/
.h20 { 高さ: 20px; }
/*文字間隔*/
.lt1 { 文字間隔: 1px; }
/ *line-height*/
.lh40 { line-height: 40px; }
/*margin*/
.ml5 { margin-left: 5px }
.ml10 : 10px; }
.mr5 { margin-right: 5px; }
.mt5 { margin-top: 10px; ; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
/*overflow*/
.ovh { オーバーフロー: 自動; }
/*padding */
.p10 { パディング: 10px; }
.pl5 { パディング左: 10px; } : 5px; }
.pr10 { パディング右: 10px; }
.pt10 { パディングトップ: 10px; ; }
.pb10 {padding-bottom: 10px; }
/*position*/
.rel { 位置: 相対; }
/*幅のパーセント値*/
.pctW { 幅: 100% ; }
.pctH { 高さ: 100% }
/*text-align*/
.tc { text-align: center }
.tr { text-align: right; }
.tl { text -align: left; }
/*text-decoration*/
.tdl { text-decoration: 下線; }
.tdn { text-decoration: none; -align*/
.vm { 垂直整列: 中央; }
.vtb { 垂直整列: テキスト下; }
.vt { 垂直整列:トップ; }
.vn { 垂直方向の整列: -2px; }
/*可視性*/
.vh { 可視性: 可視性 }
/*空白* /
.nowrap { ホワイトスペース: nowrap; }
/*white-wrap*/
.bk { ワードラップ: ブレークワード; }
/*width*/
.w100 { width: 100px;
/*z-index */
.zx1 { z-index: 1; }
.zx2 { z-index: 2; }
/*zoom*/
.z { *zoom: 1;
/*---- --------------- CSS を乗算する ------------------------ --*/
/*block 要素を水平方向に中央に配置します*/
.auto { margin-left: auto; margin-right: auto }
/*float をクリアします*/
.fix { *zoom: 1; }
.fix:after { display: table; content: ''; clear: Both; }
/*2 列適応型英文字行折り返し*/
.cell_bk { 表示: テーブル; 幅: 100%; テーブルレイアウト: 固定; ワードラップ: ブレークワード; }
/* 単一行のテキストがドット表示で表示される */
.ell { text-overflow: 省略記号; : nowrap; オーバーフロー: 非表示; }
/*css3 トランジション アニメーション効果*/
.trans { -webkit-transition: すべて 0.3 秒;