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 ポートに基づいて仮想ホストを作成する例

推薦する

JavaScript で H5 ゴールド コイン関数を実装する (サンプル コード)

今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...

シンプルな広告ウィンドウを実現するjs

この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。...

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...

CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。

基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...

MySQL の null と not null、null と空の値の違いの詳細な説明 ''''

MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

CSS 複合セレクタの具体的な使用法

交差点セレクター交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクター...

Ubuntu ターミナル マルチウィンドウ 分割画面 ターミネーター

1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...

MySQLトリガーの使用

目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...

MySQL における USING と HAVING の使用法の簡単な分析

この記事では、例を使用して MySQL での USING と HAVING の使用方法を説明します。...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

Linux+ApacheサーバURLの大文字と小文字の区別の問題を解決する

今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

PXEを使用してLinuxシステムを自動的に展開する方法

目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...