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 スライダー検証コードを使用する方法

推薦する

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

NavicatでMySQLビッグデータをインポートする際のエラーの解決方法

Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

XHTMLにおけるH1タグの位置について

最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

5つのCSSスクロール天井実装方法の比較(パフォーマンス向上版)

改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...

MySQLプロセス関数の一般的な使用例の分析

この記事では、例を使用して MySQL プロセス関数の一般的な使用方法を説明します。ご参考までに、詳...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

MySQLテーブルをコピーする方法

目次1.mysqlダンプ実行プロセス:特徴2. CSVファイルをエクスポートする(最も柔軟性が高い)...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...