How to clear default style in css

CSS is a front-end development technology that can make web pages more beautiful and easier to operate. However, in order to make the web page look more beautiful, we may use many CSS styles, which will cause the web page to lose its original style, or even be inconsistent with the effect we want. This article will introduce some techniques for clearing default CSS styles in order to better grasp the basic principles of CSS.

1. CSS Reset

CSS Reset is a technique to clear the default style. It can delete all default styles in the browser, thereby clearing all default appearances and effects in the web page. CSS Reset can be implemented manually or by using some ready-made tools. The following is a handwritten CSS Reset example:

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

This code will change the margin, padding, border, font size, font of all elements Weight, font style, line height, vertical alignment and list styles are all reset to default values. This way we ensure that each element is just working on top of the base CSS and is not affected by the original CSS and the browser's default styling.

2. Normalize.css

Although CSS Reset can completely clear the default styles, sometimes we want to keep some default styles, just to have better control over them. At this time, you need to use Normalize.css. Normalize.css is a CSS file used to standardize styles, which can retain the default style of the browser itself while unifying style differences between browsers. The following is the sample code:

/! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css /

/* Document
================================================= ========================= */

/**

• 1. Correct the line height in all browsers.
• 2. Prevent adjustments of font size after orientation changes in iOS.
     */

html {
line-height: 1.15; / 1 /
-webkit-text-size-adjust: 100%; / 2 /
-ms-text-size-adjust: 100%; / 2 /
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}

/* Sections
======================= ================================================== = */

/**

• Remove the margin in all browsers.
  */

body {
margin: 0;
padding: 0;
}
. ..

The above code is just a small part of Normalize.css, it will reset the common HTML parts of the browser as needed. Using Normalize.css, we can ensure that different browsers can display web pages normally without any interference from default styles.

3. Use selectors

In addition to using CSS Reset and Normalize.css, we can also use selectors to clear the default style. By adding a selector style, we can easily eliminate the default style in the browser. The following is the sample code:

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

Here, We used a comma separated list of elements to reset some of the most commonly used HTML element styles to 0. In this way, we can add elements that need to be reset at any time and clear the browser's default style.

4. Use CSS library

In order to avoid manually writing CSS Reset or Normalize.css, we can use pre-written CSS libraries. The following is a list of some common CSS libraries:

1. Bootstrap;
2. Bulma;
3. Foundation;
4. Semantic UI.

These libraries provide a set of advanced CSS styles, which are very convenient and practical when designing websites. With the help of these libraries, we can use many preset styles, clear the default styles, and use stable basic styles and layouts, thereby speeding up website development.

When using these libraries, we should pay attention to previewing their catalogs and documentation to understand how they are coded and the meaning behind each style, so that we can use them effectively.

Summary

CSS clear default style technology is a basic operation in front-end development. With the help of CSS Reset, Normalize.css and selector styles, we can clear the browser default styles, allowing us to easily design more beautiful and elegant web pages. Of course, in the actual development process, choosing to use a CSS library is also a good choice, which can provide us with efficient, stable, and compatible basic styles.

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