CSSでデフォルトのスタイルをクリアする方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-24 10:33:25

オリジナル

7268 人が閲覧しました

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. すべてのブラウザで行の高さを修正します。
1. 方向を変更した後のフォントサイズの調整を防止します。 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 ライブラリのリストです:

Bulma;
Foundation;
Semantic UI.

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

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

概要

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

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