html把預設樣式去掉的方法:1、透過「*{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}」全域移除預設樣式;2 、a標籤去除預設樣式;3、li標籤去除預設樣式等等。

本文操作環境:Windows7系統、HTML5&&CSS3、Dell G3電腦
html標籤預設樣式去除大全
1、全域移除預設樣式
1 | *{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}
|
登入後複製
2、a標籤移除預設樣式
1 2 3 4 5 | a{text-decoration: none;color:#333;}
a:hover, a:visited, a:link, a:active {
color:#333;
}
|
登入後複製
3、li
4、img
1 2 3 4 | img{
vertical-align:top;
border:none;
}
|
登入後複製
5、button
1 2 3 4 5 6 | .button{
border:0;
background-color:none
outline:none;
-webkit-appearance: none;
}
|
登入後複製
6、select【推薦:HTML影片教學】
1 2 3 4 5 6 7 8 9 | select {
border: none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url( "http://ourjs.github.io/static/2015/arrow.png" ) no-repeat scroll right center transparent;
padding-right: 14px;
}
|
登入後複製
7、h1
1 | h1,h2,h3,h4,h5,h6{font-weight:normal;}
|
登入後複製
8、input,textarea
1 2 3 4 5 6 7 8 | input,textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
|
登入後複製
9、斜體i
10、table
1 | table{border-collapse:collapse;border-spacing:0;}
|
登入後複製
11、移除input[type=number]加減編號
1 2 3 4 5 6 7 8 9 10 11 12 | input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input{
-moz-appearance:textfield;
}
|
登入後複製
以上是html怎麼把預設樣式去掉的詳細內容。更多資訊請關注PHP中文網其他相關文章!