CSS去掉預設樣式
在網站設計與開發過程中，重設或移除瀏覽器自帶的預設樣式是一個基礎但必要的步驟。有些瀏覽器預設樣式例如邊距、補白、字體、顏色等，可能會與我們的樣式衝突，因此我們需要自訂樣式。
以下是一些方法來去掉瀏覽器自帶的預設樣式。
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 是一個相對於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;
}這樣，我們就可以自訂預設連結樣式。
以上就是自訂樣式去掉預設樣式的三種方法，建議使用Normalize.css，因為它會處理大多數你會遇到的瀏覽器預設問題，同時它也不會暴力清除所有預設樣式。使用正確的方法去掉預設樣式將會讓你的網站有更好的瀏覽體驗。
以上是css怎麼去掉預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
