Home >Web Front-end >HTML Tutorial >What are the built-in styles of html elements and how to remove them?

What are the built-in styles of html elements and how to remove them?

coldplay.xixi
coldplay.xixiOriginal
2021-03-04 14:29:123347browse

html elements have default styles. Methods to remove them: 1. Remove the default style globally, the code is [*{padding:0;margin:0;box-sizing:..}]; 2. Remove the a tag The default style, code is [a{text-decoration: none;color:#3].

What are the built-in styles of html elements and how to remove them?

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

html elements have default styles, how to remove them:

1. Remove default styles globally

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

2. Remove default styles from a tag

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

3、li

ul,ol{list-style: none;}

4、img

img{
  vertical-align:top;
  border:none;
}

5、button

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

6、select

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

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

8, input, textarea

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

9, italics i

i{font-style: normal;}

10, table

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

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

Related learning recommendations: html video tutorial

The above is the detailed content of What are the built-in styles of html elements and how to remove them?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to use js in htmlNext article:How to use js in html