How to clear default styles and set common styles in CSS

CSS Clear Default Styles

The usual clear default styles:

*{
    margin:0;
    padding:0
}
li{
    list-style:none
}
img{
    vertical-align:top;
    border:none
}

Set the default font

body,
button, input, select, textarea /* for ie */ {
    font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
address, cite, dfn, em, var { font-style: normal; } /* Make italics straight*/
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* Unified monospace font */
small { font-size: 12px; } /* Chinese characters smaller than 12px are hard to read, normalize small*/
/** Reset list elements **/
ul, ol { list-style: none; }
/** Reset text formatting elements **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* Reset, reduce the impact on line height*/
sub { vertical-align: text-bottom; }
/** Reset form elements **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img hitchhiking: make the img in the link borderless*/
button, input, select, textarea { font-size: 100%; } /* Make the form elements inherit the font size in IE*/
/* Note: optgroup cannot be corrected*/
/* Reset HTML5 element */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
    display: block;
    margin: 0;
    padding: 0;
}
mark { background: #ff0; }
/* Set the default style of the placeholder */
:-moz-placeholder {
    color: #ddd;
    opacity: 1;
}
::-moz-placeholder {
    color: #ddd;
    opacity: 1;
}
input:-ms-input-placeholder {
    color: #ddd;
    opacity: 1;
}
input::-webkit-input-placeholder {
    color: #ddd;
    opacity: 1;
}

Select Tag

select {
    border: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*Display a small arrow image in the middle of the rightmost selection box*/
    background: url("upload/2022/web/arrow.png") no-repeat scroll right center transparent;
    padding-right: 14px;
}

Reset table elements

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

Reset hr

hr {
    border: none;
    height: 1px;
}

Clear the default styles of <ol> <ul>

ul, ol, { 
  margin: 0;
  padding: 0;
  list-style: n;
}

.button

.button{
    border:0;
    background-color:none
    outline:none;
    -webkit-appearance: none; // Used to remove native styles under IOS}

.< a > tag

a{
    text-decoration:none;
    color:#333;
}

The <input> tag

input{
    border: none;
    appearance:none;
    -moz-appearance:none;
    outline:none; //The default border does not appear when the input tag is focused:
    -webkit-appearance: none; // Used to remove native styles under IOS}
//or:
input:focus{ outline:none; }//The default border does not appear when the input tag is focused:
border: none; appearance:none; -moz-appearance:none; outline:none; //The default border does not appear when the input tag is focused: -webkit-appearance: no

Summarize

The above is the CSS method of clearing default styles and setting common styles that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Recommend 60 paging cases and good practices

>>: How to use Tencent slider verification code in Vue3+Vue-cli4 project