溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css如何去掉默認樣式”，在日常操作中，相信很多人在css如何去掉默認樣式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css如何去掉默認樣式”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS去掉默認樣式
在網站設計與開發過程中，重置或去掉瀏覽器自帶的默認樣式是一個基礎但又必要的步驟。一些瀏覽器默認樣式比如邊距、補白、字體、顏色等，可能會與我們的樣式沖突，因此我們需要自定義樣式。
下面是一些方法來去掉瀏覽器自帶的默認樣式。
CSS Reset
CSS Reset是一個CSS文件，它的作用是重置默認樣式，讓所有的瀏覽器都使用相同的樣式。他們通常包括重置邊距、補白、字體、顏色等樣式。
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;
}如上重置，就可以清除所有默認的樣式了。
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;
}這樣，我們就可以自定義默認鏈接樣式。
到此，關于“css如何去掉默認樣式”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
