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

How to remove default style in css

PHPz

Release： 2023-04-21 13:46:37

Original

1362 people have browsed it

CSS Remove Default Style

In the process of website design and development, resetting or removing the default style that comes with the browser is a basic but necessary step. Some browser default styles, such as margins, padding, fonts, colors, etc., may conflict with our styles, so we need to customize the styles.

Here are some ways to remove the default styles that come with the browser.

CSS Reset

CSS Reset is a CSS file. Its function is to reset the default style so that all browsers use the same style. They usually include resetting margins, padding, fonts, colors, etc.

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* inputs, textarea */
input[type="text"],input[type="password"], textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

input[type="checkbox"], input[type="radio"] {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid #999;
    width: 13px;
    height: 13px;
    outline: none;
}

/* buttons */
button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* images */
img {
    border: none;
    outline: none;
    vertical-align: middle;
}

Copy after login

Reset as above to clear all default styles.

Normalize.css

Normalize.css is a more friendly style library than CSS Reset. It does not clear the default styles, but standardizes the styles of different browsers. Default style, so that all browsers will show the same effect. At the same time, some elements need to be modified by default, and Normalize will help you complete it.

The following is an example of quoting Normalize:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
  <p class="text-muted">This is paragraph text.</p>
</body>
</html>

Copy after login

Customization

Customize the default style, which is based on our own business needs and only overrides the browser default Just style it. For example, we target the color of the default link:

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

Copy after login

In this way, we can customize the default link style.

The above are three methods of customizing styles to remove default styles. It is recommended to use Normalize.css, because it will handle most of the browser default problems you will encounter, and it will not violently clear all defaults. style. Using the correct method to remove default styles will make your website have a better browsing experience.

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