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

HTML は、Web ページの作成に使用されるマークアップ言語です。 HTML では、要素ごとに異なるデフォルト スタイルがあり、ブラウザによって自動的に適用されます。場合によっては、ページをより柔軟でカスタマイズしやすくするために、これらのデフォルト スタイルをクリアする必要があります。

なぜデフォルトのスタイルをクリアする必要があるのですか?

デフォルトのスタイルは、Web ページ用に独自のスタイルを設計するのを妨げる可能性があります。たとえば、Web ページのタイトルと本文にはデフォルトのフォントと行間が設定されていますが、これらのスタイルをクリアしないと、独自のフォントと行間を自由に選択して設定することができません。また、デフォルトのスタイルによってブラウザ間で差異が生じ、Web ページが異なるブラウザで一貫して表示されなくなる可能性があります。したがって、デフォルトのスタイルをクリアすると、Web ページの一貫性が高まり、制御しやすくなります。

方法 1:reset.css ファイルを使用する

Reset CSS ファイルは、すべての HTML 要素のスタイル リセットを含む、事前に作成されたスタイル シートです。これを HTML ファイルに導入してデフォルトのスタイルをクリアするだけです。

次は、単純なreset.cssファイルです:

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

このファイルは、すべての要素のマージン、パディング、境界線、フォント サイズ、および垂直方向の配置をデフォルト値にリセットします。

次のコードを HTML ファイルの先頭に追加し、reset.css ファイルをプロジェクト フォルダーの CSS フォルダーに保存するだけです。

nbsp;html>

  
    <meta>
    <title>My Website</title>
    <link>
  
  
    <!-- 页面内容 -->
  

方法 2: セレクターを使用する

スタイルをリセットするファイルを導入したくない場合は、セレクターを使用してデフォルトのスタイルをクリアすることもできます。

一般的に使用されるセレクターの一部を次に示します:

/* 清除所有元素的边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

/* 清除所有元素的默认样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* 清除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 清除列表默认样式 */
ul, ol {
  list-style: none;
}

/* 清除图片默认边框 */
img {
  border: none;
}

/* 清除表格默认边框 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

上記のセレクターを CSS ファイルに追加するだけです。

概要

デフォルトのスタイルをクリアすることは、Web ページを作成する際の重要な手順の 1 つです。 Reset.css ファイルまたはセレクターを使用すると、デフォルトのスタイルを迅速かつ効率的にクリアできるため、ページがより柔軟でカスタマイズ可能になります。

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