css怎麼去掉預設樣式
- PHPz原創
- 2023-04-21 11:20:001392瀏覽
CSS去掉預設樣式
在網站設計與開發過程中，重設或移除瀏覽器自帶的預設樣式是一個基礎但必要的步驟。有些瀏覽器預設樣式例如邊距、補白、字體、顏色等，可能會與我們的樣式衝突，因此我們需要自訂樣式。
以下是一些方法來去掉瀏覽器自帶的預設樣式。
- 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;
}
這樣，我們就可以自訂預設連結樣式。
以上就是自訂樣式去掉預設樣式的三種方法，建議使用Normalize.css，因為它會處理大多數你會遇到的瀏覽器預設問題，同時它也不會暴力清除所有預設樣式。使用正確的方法去掉預設樣式將會讓你的網站有更好的瀏覽體驗。
以上是css怎麼去掉預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何利用CSS隱藏導覽列下一篇：如何利用CSS隱藏導覽列