How to clear default styles and set common styles in CSS

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

Recommend

HTML+jQuery to implement a simple login page

Table of contents Introduction Public code (backe...

Detailed explanation of mktemp, a basic Linux command

mktemp Create temporary files or directories in a...

How to draw a cool radar chart in CocosCreator

Table of contents Preface Preview text Graphics C...

What are HTML inline elements and block-level elements and their differences

I remember a question the interviewer asked durin...

How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Q...

You really need to understand the use of CSS variables var()

When a web project gets bigger and bigger, its CS...

Detailed explanation of nginx anti-hotlink and anti-crawler configuration

Create a new configuration file (for example, go ...

Detailed tutorial for springcloud alibaba nacos linux configuration

First download the compressed package of nacos fr...

Linux Disk Quota Management Graphical Example

Disk quota is the storage limit of a specified di...

Do you know how many connections a Linux server can handle?

Preface First, let's see how to identify a TC...

Detailed explanation of MySQL database transaction isolation levels

Database transaction isolation level There are 4 ...

Pure CSS meteor shower background sample code

GitHub address, you can star it if you like it Pl...

How to set up a deployment project under Linux system

1. Modify the firewall settings and open the corr...