How to remove the default style in html-Front-end Q&A-php.cn

How to remove the default style in html

藏色散人

Release： 2023-01-03 09:25:28

Original

9703 people have browsed it

htmlMethods to remove the default style: 1. Remove the default style globally through "*{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}"; 2 , a tag removes the default style; 3. li tag removes the default style, etc.

How to remove the default style in html

The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer

html tag default style removal list

1. Remove the default style globally

*{padding:0;margin:0;box-sizing: border-box;font-size: 14px;}

Copy after login

2. Remove the default style from the a tag

 a{text-decoration: none;color:#333;}
 a:hover, a:visited, a:link, a:active {
    color:#333;
    // 设置使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
}

Copy after login

3. li

ul,ol{list-style: none;}

Copy after login

4. img

img{
　　vertical-align：top；
　　border：none;
}

Copy after login

5. button

.button{
    border:0;
    background-color:none
    outline:none;
    -webkit-appearance: none;//用于IOS下移除原生样式
}

Copy after login

6. select [Recommended: HTML video tutorial]

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;
}

Copy after login

7. h1

h1,h2,h3,h4,h5,h6{font-weight:normal;}

Copy after login

8. input, textarea

input,textarea {
    outline: none;
    border: none;
}
textarea {
    resize: none;
    overflow: auto;
}

Copy after login

9, italic i

i{font-style: normal;}

Copy after login

10, table

table{border-collapse:collapse;border-spacing:0;}

Copy after login

11, remove input[type=number] plus and minus signs

/*去除input[type=number]加减号*/
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
/* 火狐 */
input{
    -moz-appearance:textfield;
}

Copy after login

The above is the detailed content of How to remove the default style in html. For more information, please follow other related articles on the PHP Chinese website!