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

CSSでデフォルトのスタイルを削除する方法

PHPz

リリース： 2023-04-21 13:46:37

オリジナル

1367 人が閲覧しました

CSS のデフォルトスタイルの削除

Web サイトのデザインと開発のプロセスにおいて、ブラウザーに付属のデフォルトスタイルをリセットまたは削除することは基本ですが必要な手順です。マージン、パディング、フォント、色などの一部のブラウザのデフォルトスタイルは、スタイルと競合する可能性があるため、スタイルをカスタマイズする必要があります。

ブラウザに付属のデフォルトのスタイルを削除する方法をいくつか紹介します。

CSS Reset

CSS Reset は CSS ファイルで、その機能はデフォルトのスタイルをリセットして、すべてのブラウザが同じスタイルを使用できるようにすることです。通常、マージン、パディング、フォント、色などのリセットが含まれます。

reset.css

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, font, 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;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* inputs, textarea */
input[type="text"],input[type="password"], textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

input[type="checkbox"], input[type="radio"] {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid #999;
    width: 13px;
    height: 13px;
    outline: none;
}

/* buttons */
button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* images */
img {
    border: none;
    outline: none;
    vertical-align: middle;
}

ログイン後にコピー

上記のようにリセットして、デフォルトのスタイルをすべてクリアします。

Normalize.css

Normalize.css は、CSS Reset よりも使いやすいスタイルライブラリで、デフォルトのスタイルをクリアしませんが、さまざまなブラウザのスタイルを標準化します。デフォルトのスタイル。すべてのブラウザで同じ効果が表示されます。同時に、一部の要素はデフォルトで変更する必要があり、Normalize がそれを完了するのに役立ちます。

次は、Normalize を引用する例です:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
  <p class="text-muted">This is paragraph text.</p>
</body>
</html>

ログイン後にコピー

カスタマイズ

デフォルトのスタイルをカスタマイズします。これは、独自のビジネスニーズのみに基づいています。ブラウザのデフォルトを上書きします。スタイルを設定するだけです。たとえば、デフォルトのリンクの色をターゲットにします:

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

ログイン後にコピー

このようにして、デフォルトのリンクスタイルをカスタマイズできます。

上記は、スタイルをカスタマイズしてデフォルトスタイルを削除する 3 つの方法です。Normalize.css を使用することをお勧めします。これは、遭遇するブラウザのデフォルトの問題のほとんどを処理し、すべてのデフォルトを強制的にクリアするわけではないためです。。スタイル。正しい方法を使用してデフォルトのスタイルを削除すると、Web サイトの閲覧エクスペリエンスが向上します。

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