CSS リセットスタイルリセットの実装例

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です)

Chromium UA スタイルシート - Google Chrome と Opera

Mozilla UA スタイルシート - firefox

WebKit UA スタイルシート - Safari

ほとんどは同じですが、検索入力ボックスなど一貫性のないスタイルも多数あります。

そのため、CSS 処理をリセットし、異なるブラウザ間の違いを統一し、チームが開発した初期標準を確認し、ブラウザの「欠点」を補う必要があります。

html{
   /* 標準フォント サイズは問題ありませんが、モバイル デバイスで rem を使用すると動的に変更されます。 */
  フォントサイズ:14px;
  /* IE ボックス モデルを使用します (個人的な選択ですが、通常はパディングと境界線を含めたボックスの実際のサイズに幅を設定します) */
  ボックスのサイズ: 境界線ボックス;
  
}

html,本文{
   /* 一部のモバイルブラウザでは、リンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景が表示されます。 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* モバイルデバイスでのスクロールエクスペリエンスを向上*/
  -webkit-オーバーフロースクロール: タッチ;
  オーバーフロースクロール: タッチ;
   /* ブラウザウィンドウと同じ高さ*/
  高さ: 100%;
}

体{
   /* 一部の背景はデフォルトで薄い灰色なので、すべて純白に設定されています*/
  背景: #fff;
   /* antd によると、社内では Microsoft YaHei を使用しないでください。rem フォントの使用は推奨されません。 */
  フォント:14px、-apple-system、BlinkMacSystemFont、'Segoe UI'、'PingFang SC'、'Hiragino Sans GB'、'Microsoft YaHei'、
  「Helvetica Neue」、Helvetica、Arial、サンセリフ、「Apple Color Emoji」、「Segoe UI Emoji」、「Segoe UI Symbol」
   /* フォントを滑らかにする */
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}

ブラウザのデフォルトのマージンとパディングを削除し、不要なタグを自分で削除します

体、
p、
h1,
h2,
h3,
h4,
h5,
h6,
dl、
dd、
ウル、
オール、
番目、
td、
ボタン、
形、
入力、
テキストエリア、
形状、
前、
引用ブロック、
形{
マージン: 0;
パディング: 0;
}

{
   /* 小さな手 */
  カーソル: ポインタ;
   /* ハイパーリンクのデフォルトの下線を解除します */
  テキスト装飾:なし;
   /* これは antd でも行われますが、チームがこのスタイルを必要とするかどうかによって異なります */
  遷移: カラー 0.3 秒の緩和;
}

オール、
ul{
   /* 醜いスタイルを削除します。 */
  リストスタイル:なし     
}

これらのノードの一部のプロパティは親ノードのスタイルを継承しないため、すべてがそれを継承し、アウトライン効果をキャンセルします。

、
h1,
h2,
h3,
h4,
h5,
h6,
入力、
選択、
ボタン、
テキストエリア {
フォントファミリー: 継承;
フォントサイズ: 継承;
フォントの太さ: 継承;
フォントスタイル: 継承;
行の高さ: 継承;
色: 継承;
アウトライン: なし;
}

ボタン、
入力[type='送信'],
入力[type='ボタン'] {
 /*クリック可能な手*/
カーソル: ポインタ;
}
 /* 一部のブラウザの数値入力コントロールの表示をキャンセルすると、コントロールの外観が変わる場合があります。 */
入力[タイプ='数値'] {
-moz-appearance:テキストフィールド;
}
入力[タイプ=数値]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
マージン: 0;
-webkit-appearance: なし;
}
/**
 * Firefox で内側の境界線とパディングを削除します。
 */
ボタン::-moz-focus-inner、
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  境界線スタイル: なし;
  パディング: 0;
}
/**
 * HTML5 の非表示を IE10 で正しく表示するようにする*/

[隠れた]
  表示: なし;
}
テンプレート {
 /* 一部のブラウザではテンプレートが表示されますが、テンプレートタグはほとんど使用されないので、自分で選択できます。 */
表示: なし;
}


CSS リセットアドレス

今後もさらに追加していきますので、ぜひご参加ください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  HTML テーブル境界コントロールの詳細な説明

>>:  Apache ポートに基づいて仮想ホストを作成する例

推薦する

MySQLクエリステートメント内のユーザー変数のコード分析

前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

Vue2/vue3 ルーティング権限管理方法の例

1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

MySQLデータベースの増分バックアップのアイデアと方法

MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....

CSS3 で z-index が効かない問題の解決方法

最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...

MySQLのデッドロックチェック処理の通常の方法

通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

JavaScript ツールチェーンの不完全なガイド

目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

Docker で FastDFS ファイル システムを構築する (マルチイメージ チュートリアル)

目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...

MySQL SQL文の特殊処理文のまとめ(必読)

1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...

CentOS 8にJenkinsをインストールする方法

CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...