css如何去掉默認(rèn)樣式

發(fā)布時(shí)間：2023-04-21 14:10:02 來(lái)源：億速云閱讀：172 作者：iii 欄目：web開(kāi)發(fā)

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

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

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

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

CSS Reset

CSS Reset是一個(gè)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)的樣式了。

Normalize.css

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

下面是引用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>

自定義

自定義默認(rèn)樣式，針對(duì)我們自身業(yè)務(wù)的需求，僅僅覆蓋瀏覽器默認(rèn)樣式即可。例如我們針對(duì)默認(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)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

css如何去掉默認(rèn)樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽