Home > Article > Web Front-end > 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
================================================= ========================= */
/**
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
======================= ================================================== = */
/**
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:
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!