ホームページ > 記事 > ウェブフロントエンド > CSSでデフォルトのスタイルを削除する方法
CSSでデフォルトのスタイルを削除する方法
- PHPzオリジナル
- 2023-04-21 11:20:001319ブラウズ
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 サイトの他の関連記事を参照してください。