Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use CSS's RESET, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use CSS's RESET. Let's take a look at it.

Why does 1.CSSReset exist?

As long as your customers have the possibility of using different browsers (ie,firefox,chrome, etc.), you have to return to reality from the perfect ideal state, because different core browsers have different parsing effects on CSS, resulting in a deviation between your expected effect and the browser's "understanding" effect. The cssreset mentioned today is used to reset (reset) the default values of elements in different core browsers. Try to make sure that elements have the same "starting line" in different browsers.

How do you write 2.CSSReset?

CSSreset (css reset) is basically unnecessary, at least 80% of the CSSreset is unnecessary, but increases the page CSS.

Rewriting, especially those like * {margin:0;}, is even worse (instead, it destroys a lot of UI compatibility, such as single check boxes, etc.). I don't always despise CSS.

Reset, I will simply reset some commonly used tags and avoid overwrite (style rewriting) to ensure the most compact style and the most efficient rendering

Personal understanding:

The CSSReset varies from project to project. CSSReset should be a summary of personal experience, reset some of the frequently used ones, and modify them over and over again.

How do you write it as a beginner? First of all, you can refer to the CSSRESET of some websites (refer to the third point). You must not copy it and use it directly. It should be the same as building a wall, the accumulation of brick by brick. When you think you need to write this reset style every time, add it to your CSSReset table.

3.CSSReset example

3.1tmall, Taobao Mall

Body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre

Form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;}

Body,button,input,select,textarea {font:12px/1.5tahoma,arial,\ 5b8b\ 4f53;}

H2,h3,h4,h5,h6,h7 {font-size:100%;}

Address,cite,dfn,em,var {font-style:normal;}

Code,kbd,pre,samp {font-family:couriernew,courier,monospace;}

Small {font-size:12px;}

Ul,ol {list-style:none;}

A {text-decoration:none;}

A:hover {text-decoration:underline;}

Sup {vertical-align:text-top;}

Sub {vertical-align:text-bottom;}

Legend {color:#000;}

Fieldset,img {border:0;}

Button,input,select,textarea {font-size:100%;}

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

Body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form

Fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0}

Body {color:#000;background:#fff;font-size:12px;line-height:1.25;font-family:tahoma,arial,\ 5b8b\ 4f53Gen Sanslyserif}

Th,td {text-align:left;vertical-align:top}

H2,h3,h4,h5,h6,h7 {font-size:1em;font-weight:normal}

P {margin:001em0}

Blockquote {margin:001em0}

A {color:#14647d;text-decoration:none;font-family:tahoma,arial,\ 5b8b\ 4f53Magneol sansmurseriffort Font FamilyRarialReagle Sanslul serif}

A:hover {text-decoration:underline}

Img {display:block;border:0}

Li {list-style:none}

Ol {padding:0002em}

Input,label,select,option,textarea,button,fieldset,legend {font-size:1em;font-family:tahoma,arial,\ 5b8b\ 4f53Magneol sansmurserif * * Font FamilyFamilyRev ArialRecentin sansliveserif}

Input [type=text], textarea {- webkit-appearance:none;-webkit-border-radius:0;outline:none}

Input.text {color:#444;border-color:#9f9f9f#dcdcdc#dcdcdc#9f9f9f;border-style:solid;border-width:1px;padding:3px2px;height:14px}

Input.radio,input.checkbox {margin-right:2px;vertical-align:-2px}

Input.radio,input.checkbox {margin-left:-2px}

Label.radio,label.checkbox {margin-right:5px}

Textarea {border-color:#9f9f9f#dcdcdc#dcdcdc#9f9f9f;border-style:solid;border-width:1px;padding:1px;resize:none}

3.3sohu, Sohu net

/ * Global CSS definition * /

Body {font-family:' Arial'; text-align:center;margin:0auto;padding:0;background:#FFF;font-size:12px;color:#333;}

Body > div {text-align:center;margin-right:auto;margin-left:auto;}

Div,form,ul,ol,li,span,p {margin:0;padding:0;border:0;}

Img,aimg {border:0;margin:0;padding:0;}

H2,h3,h4,h5,h6,h7 {margin:0;padding:0;font-size:12px;font-weight:normal;}

Ul,ol,li {list-style:none}

Table,td,input {font-size:12px;padding:0}

/ * default link color * /

A {outline-style:none;color:#333;text-decoration:none}

A:hover {color:#c00;text-decoration:underline;}

This is the end of the article on "how to use the RESET of CSS". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use CSS's RESET". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.