CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法

CSS でデフォルトのスタイルをクリアし、共通のスタイルを設定する方法

CSS デフォルトスタイルをクリア

通常の明確なデフォルト スタイル:

*{
    マージン:0;
    パディング:0
}
li{
    リストスタイル:なし
}
画像{
    垂直方向の位置合わせ:上;
    境界線:なし
}

デフォルトのフォントを設定する

体、
ボタン、入力、選択、テキストエリア /* ie の場合 */ {
    フォント: 14px/1.5 tahoma、\5b8b\4f53、サンセリフ;
}
h1、h2、h3、h4、h5、h6 { フォントサイズ: 100%; フォントの太さ: 通常;}
address, cite, dfn, em, var { font-style: normal; } /* 斜体をまっすぐにする*/
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 統一された等幅フォント */
small { font-size: 12px; } /* 12pxより小さい中国語の文字は読みにくいので、smallを正規化します*/
/** リスト要素をリセットする **/
ul, ol { リストスタイル: なし; }
/** テキスト書式要素をリセットする **/
a { テキスト装飾: なし; }
a:hover { テキスト装飾: 下線; }
sup { vertical-align: text-top; } /* リセットして行の高さへの影響を減らす*/
サブ { 垂直方向の位置合わせ: テキスト下部; }
/** フォーム要素をリセットする **/
凡例 { color: #000; } /* ie6 用 */
fieldset, img { border: 0; } /* img ヒッチハイク: リンク内の img をボーダーレスにする */
button, input, select, textarea { font-size: 100%; } /* フォーム要素が IE のフォント サイズを継承するようにする*/
/* 注意: optgroup は修正できません */
/* HTML5 要素をリセット */
記事、余談、詳細、図キャプション、図、フッター、ヘッダー、hgroup、メニュー、ナビゲーション、セクション、
概要、時間、マーク、オーディオ、ビデオ {
    表示: ブロック;
    マージン: 0;
    パディング: 0;
}
マーク { 背景: #ff0; }
/* プレースホルダーのデフォルトスタイルを設定します */
:-moz-プレースホルダー {
    色: #ddd;
    不透明度: 1;
}
::-moz-プレースホルダー {
    色: #ddd;
    不透明度: 1;
}
入力:-ms-入力プレースホルダー{
    色: #ddd;
    不透明度: 1;
}
入力::-webkit-入力プレースホルダー {
    色: #ddd;
    不透明度: 1;
}

タグを選択

選択{
    境界線: なし;
    外観:なし;
    -moz-appearance:なし;
    -webkit-appearance:なし;
    /*右端の選択ボックスの中央に小さな矢印画像を表示します*/
    背景: url("upload/2022/web/arrow.png") 繰り返しなし 右スクロール 中央 透明;
    右パディング: 14px;
}

テーブル要素をリセットする

テーブル {
境界線の折りたたみ: 折りたたみ;
境界線の間隔: 0;
}

時間をリセット

時間 {
    境界線: なし;
    高さ: 1px;
}

<ol> <ul> のデフォルトスタイルをクリアします

ul、ol、{ 
  マージン: 0;
  パディング: 0;
  リストスタイル: n;
}

。ボタン

。ボタン{
    境界線:0;
    背景色:なし
    アウトライン:なし;
    -webkit-appearance: none; // IOS でネイティブ スタイルを削除するために使用されます}

.< a > タグ

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

<input> タグ

入力{
    境界線: なし;
    外観:なし;
    -moz-appearance:なし;
    outline:none; //入力タグにフォーカスが当たっている場合、デフォルトの境界線は表示されません。
    -webkit-appearance: none; // IOS でネイティブ スタイルを削除するために使用されます}
//または:
input:focus{ outline:none; }//入力タグがフォーカスされているときはデフォルトの境界線は表示されません:
border: none; appearance:none; -moz-appearance:none; outline:none; //入力タグがフォーカスされているときはデフォルトの境界線は表示されません: -webkit-appearance: no

要約する

上記は、私が紹介したデフォルトのスタイルをクリアし、一般的なスタイルを設定する CSS メソッドです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Jenkins+Docker継続的インテグレーションの実装

>>:  Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

推薦する

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

Docker-compose ワンクリックデプロイ gitlab 中国語版の方法手順

1. GitLabの紹介Gitlab 公式アドレス: https://about.gitlab.co...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

Unicode の一般的な文字の概要

初期のコンピューターのほとんどは ASCII 文字しか使用できませんでしたが、その後、主要な西洋のア...

Centos8 で NIS ドメイン サービスをセットアップおよび構成するための詳細な手順

目次NIS の紹介ネットワーク環境: 1. 環境の準備(両方のノードが必要) 2.nisマスターサー...

JavaScript ES6 モジュールの詳細な説明

目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...

Vue の nextTick について話す

データが変更されても、DOM ビューはすぐには更新されません。変更直後にノードまたはその値を取得しよ...

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

Alibaba Cloud に MySQL データベースをインストールするときに発生する 2002 エラーを解決する方法

データベースのインストール中に次のエラーが発生しました: 解決策は次のとおりです。 1. binディ...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...