CSS スタイルの初期化の詳細な説明

今回は CSS スタイルの初期化について詳しく説明します。 CSS スタイルの初期化の注意点は何ですか? 以下は実際的なケースです。

Web サイトを作成するとき、P タグの余白や a タグの下線など、多くのタグにはデフォルトのスタイルがあるため、通常、その後の作成で問題が発生するのを避けるために、これらのデフォルトのスタイルを削除します。変わらないまま。

1. デフォルトの内側と外側のマージンを持つラベル

このように書くと手間が省け、内側と外側のマージンを直接クリアする人もいます。プロジェクトが若いうちは何でもないと感じるでしょうが、プロジェクトが大きくなると、このように書くと Web サイトのパフォーマンスが大幅に消費され、Web サイトの読み込み速度が低下します。

したがって、デフォルトでどのタグに内側と外側のマージンがあるかを理解し、使用法に従ってスタイルを初期化する必要があります:

------ ----- -------------------------------------- ----- ------------------------よく使われるタグ----- ---------- -------------------------------------- ---------- -------------------------------------- ---------- --

1. bodyタグ: デフォルトのmargin:8px;

2. dlタグ、pタグ: デフォルトのmargin-top:1em;

   margin-bottom: 1em;

3. ddタグ:デフォルトのmargin-left:40px;

4. ul、olタグ:デフォルトのmargin-top:1em;margin-bottom:1em;padding-left:40px;

5. h1タグ~h6タグ: デフォルトのmargin-top:0.67em;margin-bottom:0.67em;

6. フォームラベル: デフォルトのmargin-top:0em;

7. フィールドセットラベル:デフォルトの margin-left:2px;margin-right:2px;padding:0.35em 0.75em 0.625em;

8. 凡例タグ: デフォルトのpadding-left:2px;

   padding-right:2px;

9. 入力タグ: デフォルトのパディング: 1px 0px;

テキストエリアのタグ: デフォルトのパディング: 2px;

10. ボタンのタグ: デフォルトのパディング: 1px 6px;
11. 時間タグ: デフォルトマージントップ：0.5EM：0.5EM;

12. PREマージン：1EM 0PX 1EM;ウェブサイト全体を body タグのフォント スタイルに書き込みます。その後、ローカル テキスト スタイルを個別に変更する必要があります

    body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
        margin:0;
        padding:0;
    }
    <!--以上标签为最常用的，其余若需要则再额外添加-->

3. テーブルのラベルの余白を削除して結合します

13. 4.フォントスタイル

body,button,input,textarea,select{
    font:12px/1.5 'Microsoft YaHei','arial','tahoma';
    color:#666;
}
<!--
    
    一般设置字体大小12px，字体行高为1.5倍行距，字体样式为‘微软雅黑’或者‘宋体’
    字体颜色由网站风格决定
-->

5. リストタグの前の識別子を削除します

table {
    border-collapse:collapse;
    border-spacing:0;
}
<!--
    默认:border-collapse:separate;//设置单元格边框是否合并
           border-spacing:2px;//相邻单元格边框间的距离
-->

6. aタグの下線を削除してフォントスタイルを統一します

i,em{
  font-style:normal;  
}
<!--
    默认是斜体（italic）
-->
b,strong{
  font-weight:normal;  
}
<!--
    默认是粗体（bold）
-->

7. Img タグの垂直方向の配置

ul,ol{
  list-style:none;  
}
<!--
    默认是：initial(默认值)
-->

説明: 上記は最も一般的に使用されるものであり、他のタグのスタイルの初期化が必要に応じて追加されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

jest がネイティブ コンポーネントに反応するための手順とは何ですか

JavaScript の暗黙的呼び出しの詳細な説明

React コンポーネントの参照の使用方法

以上がCSS スタイルの初期化の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。