這篇文章主要介紹“css如何去掉默認(rèn)樣式”，在日常操作中，相信很多人在css如何去掉默認(rèn)樣式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css如何去掉默認(rèn)樣式”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

十多年的營山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整營山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“營山網(wǎng)站設(shè)計(jì)”,“營山網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS去掉默認(rèn)樣式

在網(wǎng)站設(shè)計(jì)與開發(fā)過程中，重置或去掉瀏覽器自帶的默認(rèn)樣式是一個基礎(chǔ)但又必要的步驟。一些瀏覽器默認(rèn)樣式比如邊距、補(bǔ)白、字體、顏色等，可能會與我們的樣式?jīng)_突，因此我們需要自定義樣式。

下面是一些方法來去掉瀏覽器自帶的默認(rèn)樣式。

1. CSS Reset

CSS Reset是一個CSS文件，它的作用是重置默認(rèn)樣式，讓所有的瀏覽器都使用相同的樣式。他們通常包括重置邊距、補(bǔ)白、字體、顏色等樣式。

reset.css

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, h7, 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;
}

如上重置，就可以清除所有默認(rèn)的樣式了。

2. Normalize.css

Normalize.css 是一個相對于 CSS Reset 更為友好的樣式庫，它不是清除默認(rèn)樣式，而是規(guī)范化不同瀏覽器的默認(rèn)樣式，讓所有瀏覽器都會表現(xiàn)出相同的效果。同時，有些元素是必需增加默認(rèn)修飾的，Normalize也會幫你完成。

下面是引用Normalize示例：

  
  


  This is paragraph text.

3. 自定義

自定義默認(rèn)樣式，針對我們自身業(yè)務(wù)的需求，僅僅覆蓋瀏覽器默認(rèn)樣式即可。例如我們針對默認(rèn)鏈接的顏色：

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

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

這樣，我們就可以自定義默認(rèn)鏈接樣式。

到此，關(guān)于“css如何去掉默認(rèn)樣式”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！