CSSでデフォルトのスタイルをクリアする方法

CSS は、Web ページをより美しく、操作しやすくするためのフロントエンド開発テクノロジーです。ただし、Web ページをより美しく見せるために、多くの CSS スタイルを使用する場合があります。これにより、Web ページが本来のスタイルを失ったり、意図した効果と矛盾したりすることがあります。この記事では、CSS の基本原則をよりよく理解するために、デフォルトの CSS スタイルをクリアするためのいくつかのテクニックを紹介します。

1. CSS リセット

CSS リセットは、デフォルトのスタイルをクリアする手法です。ブラウザーのデフォルトのスタイルをすべて削除し、Web ページのデフォルトの外観と効果をすべてクリアします。 CSS リセットは手動で実装することも、既製のツールを使用して実装することもできます。以下は手書きの CSS リセットの例です:

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

このコードはマージン、パディング、境界線、フォント サイズ、すべての要素のフォントを変更します。 、フォント スタイル、行の高さ、垂直方向の配置、リスト スタイルはすべてデフォルト値にリセットされます。このようにして、各要素がベース CSS の上で動作し、元の CSS やブラウザのデフォルトのスタイルの影響を受けないことが保証されます。

2. Normalize.css

CSS リセットではデフォルトのスタイルを完全にクリアできますが、より適切に制御するためにデフォルトのスタイルをいくつか保持したい場合があります。このとき、Normalize.css を使用する必要があります。 Normalize.css はスタイルを標準化するために使用される CSS ファイルで、ブラウザー自体のデフォルトのスタイルを保持しながら、ブラウザー間のスタイルの違いを統一することができます。以下はサンプル コードです:

/!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css /

/* ドキュメント
============================================== == ========================= */

/**

• 1. すべてのブラウザで行の高さを修正します。
• 2. 方向を変更した後のフォント サイズの調整を防止します。 iOS.
     */

#html {

行の高さ: 1.15; /
1 / -webkit-text-size-adjust: 100%; /
2 / -ms-text-size-adjust: 100%; /
2 / -moz-osx-font-smoothing: greyscale;
-webkit-font-smoothing:アンチエイリアス;
box-sizing: border-box;
}

/* セクション

===================== == =============================================== == = */

/**

すべてのブラウザでマージンを削除します。
• */
  

body {

マージン: 0;
パディング: 0;
}
. ..

上記のコードは Normalize.css のほんの一部であり、必要に応じてブラウザの共通 HTML 部分をリセットします。 Normalize.css を使用すると、さまざまなブラウザーがデフォルトのスタイルの影響を受けることなく Web ページを正常に表示できるようになります。

3. セレクターの使用

CSS Reset と Normalize.css の使用に加えて、セレクターを使用してデフォルトのスタイルをクリアすることもできます。セレクター スタイルを追加すると、ブラウザーのデフォルト スタイルを簡単に削除できます。以下はサンプル コードです:

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

Here , カンマ区切りの要素リストを使用して、最も一般的に使用される HTML 要素スタイルの一部を 0 にリセットしました。このようにして、いつでもリセットする必要がある要素を追加し、ブラウザのデフォルト スタイルをクリアできます。

4. CSS ライブラリを使用する

CSS Reset または Normalize.css を手動で作成することを避けるために、事前に作成された CSS ライブラリを使用できます。以下は、いくつかの一般的な CSS ライブラリのリストです:

Bootstrap;
1. Bulma;
2. Foundation;
3. Semantic UI.

これらのライブラリは、Web サイトをデザインする際に非常に便利で実用的な一連の高度な CSS スタイルを提供します。これらのライブラリの助けを借りて、多くのプリセット スタイルを使用したり、デフォルト スタイルをクリアしたり、安定した基本スタイルとレイアウトを使用したりできるため、Web サイトの開発をスピードアップできます。

これらのライブラリを使用するときは、効果的に使用できるように、カタログとドキュメントのプレビューに注意を払って、ライブラリがどのようにコード化されているか、各スタイルの背後にある意味を理解する必要があります。

概要

CSS クリア デフォルト スタイル テクノロジは、フロントエンド開発における基本的な操作です。 CSS Reset、Normalize.css、およびセレクター スタイルを使用すると、ブラウザーのデフォルト スタイルをクリアして、より美しくエレガントな Web ページを簡単にデザインできるようになります。もちろん、実際の開発プロセスでは、効率的で安定した互換性のある基本スタイルを提供できる CSS ライブラリの使用を選択することも良い選択です。

以上がCSSでデフォルトのスタイルをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。