A css reset-Dawn CSS Reset suitable for Chinese Characters

From http://mingelz.com/2009/08/dawn-css-reset/:

I used YUI's CSS Reset during page creation, and then upgraded it to version 3.0beta1. Of course, I will streamline the YUI every time to facilitate my use in the project. Later, I saw Shawphy's "building his own reset.css" and the Reset CSS Research (technology) by shoot. Then I thought that since the giants were there, why don't I sum up a set of CSS resets on their shoulders, so I have the following:

 

First, I would like to give a simple comment on the four CSS resets that I know very well (everyone is welcome to make a picture ):

• Yui css Reset: it is a Reset that I have been using. It is classified by the role of elements and default styles to remove their default styles, in the end, basically all elements are the same in all browsers. Of course, YUI is more benevolent than Eric's Reset;
• Eric Reset CSS: the most lethal Reset. We can see from the first definition that the internal and external margins and borders of all elements are set to 0, and the outline is ignored: none of the outline of focus ...... With Eric's hand, the world is finally quiet ...... I personally think Eric's idea is "the default style of HTML elements is evil", so we need to remove them all and then quickly, but this will inevitably make some styles that can help us disappear together;
• Shawphy CSS Reset: refresh the definition in detail;
• Kissy css Reset: that is, the Reset stated on the blog. It feels that YUI has a great impact. However, as stated in the blog, this Reset is more suitable for Chinese, I decided to summarize my Reset just because I was inspired by this Reset.

Note: The compressed version is obtained from the dig command.

The Dawn CSS Reset, which is operated by me, debuted below. This Reset was influenced and inspired by YUI and KISSY, and I would like to express my gratitude here.

To help you better understand what I think when dealing with these reset styles and compare them with the similarities and differences between YUI and KISSY, the following describes how to reset the style of each sentence in a table:

YUI [callback,
Dl, dt, dd, ul, ol, li,
H1, h2, h3, h4, h5, h6,
Pre, code,
Form, fieldset, legend, input, textarea,
P, blockquote,
Th, td
{Margin: 0; padding: 0;} body,
H1, h2, h3, h4, h5, h6, hr, p, blockquote,
Dl, dt, dd, ul, ol, li,
Pre,
Form, fieldset, legend, button, input, textarea,
Th, td
{Margin: 0; padding: 0;} body,
H1, h2, h3, h4, h5, h6,
Dl, dt, dd, ul, ol, li,
Th, td,
P, blockquote, pre,
Form, fieldset, legend, input, button, textarea,
Hr
{Margin: 0; padding: 0;} 1. div and code have no internal and external margins and can be removed;
2. The input may have internal and external margins based on different types and should be added;
3. hr has a margin, but this value is not fixed in actual use. It should be added; 2h1, h2, h3, h4, h5, h6
{Font-size: 100%; font-weight: normal;} h1 {font-size: 18px ;}
H2 {font-size: 16px ;}
H3 {font-size: 14px ;}
H4, h5, h6 {font-size: 100%;} h1, h2, h3, h4, h5, h6
{Font-size: 100%;} 1. for different pages, the hn font size cannot be the same;
2. The title must be highlighted and not bold;
Conclusion: Only reset the font size, not reset the font width; 3li
{List-style: none;} ul, ol
{List-style: none;} li
{List-style: none;} 1. The list-style is indeed defined on the li label; 4 fieldset, img
{Border: 0;} fieldset, img
{Border: 0;} fieldset, img
{Border: 0;} 1. input, select, and textarea also have borders by default. Their borders are not cleared in the Reset based on the idea of graceful degradation. When the background image is modified, remember to clear the border; 5 table
{Border-collapse: collapse; border-spacing: 0;} table
{Border-collapse: collapse; border-spacing: 0;} table
{Border-collapse: collapse; border-spacing: 0;}-6q: before, q: after
{Content: ";} q: before, q: after
{Content: ";} q: before, q: after
{Content: ";} 1. By default, the q tag will add quotation marks (") before the content and then quotation marks ("), which may affect the actual effect, so it is removed; 7 abbr, acronym
{Border: 0; font-variant: normal;} abbr [title], acronym [title]
{Border-bottom: 1px dotted; cursor: help;} abbr [title]
{Border-bottom: 1px dotted; cursor: help;} 1. IE6 does not support abbr labels. HTML5 "discards" acronym labels;
2. IE6 does not support attribute delimiters;
Conclusion: If the attribute selector is used, it means that IE6 is no longer supported. Let's say Byebye to IE6 and its acronym! 8 address, caption, cite, code, dfn, em, strong, th, var
{Font-style: normal; font-weight: normal ;}

Caption, th
{Text-align: left ;}

Address, cite, dfn, em, var
{Font-style: normal;} address, cite, dfn, em, var
{Font-style: normal;} 1. The default values of address, cite, dfn, em, and var are italic and can be adjusted;
2. caption, strong, and th are in bold by default. This semantic tag is a special case and can be retained;
3. capton and th are centered by default and can be retained. The reasons are the same as above. They are only special cases when they are not living;
4. The code does not have this style by default and can be removed;
5. Let's talk about em and strong separately. em indicates emphasis and strong indicates stronger emphasis. So here I remove em styles and keep strong styles. I generally emphasize the use of em without any styles, it is a special case that strong is not bold. 9 input, textarea, select
{Font-family: inherit; font-size: inherit; font-weight: inherit ;}

Input, textarea, select
{* Font-size: 100% ;}

Button, input, select, textarea
{Font-size: 100%;} button, input, select, textarea
{Font-size: 100%;} 1. By default, form elements do not inherit the font size in IE;
2. The button does not inherit the font size by default. It should be added;
3. optgroup is italic by default and cannot be adjusted. 10 legend
{Color: #000;} legend
{Color: #000;} legend
{Color: #000;} 1. The legend element color in IE6 inherits from the theme style in Windows;
2. Modify the legend color as needed during page layout. 11. html
{Color: #000; background: # FFF;} -- 1. All browsers are the same by default;
2. the background color may inherit the theme color of Windows;
Conclusion: Define different colors as needed in the actual project; 12sup {vertical-align: text-top ;}
Sub {vertical-align: text-bottom;} -- 1. The default style of all browsers is:
Sup {vertical-align: super ;}
Sub {vertical-align: sub}
2. super is higher than text-top and sub is lower than text-bottom;
3. In the default style, if the row height is too small, sub and sup will be blocked; 13-code, kbd, pre, samp, tt
{Font-family: "Courier New", Courier, monospace;} code, kbd, samp
{Font-family: "Courier New", monospace;} 1. pre is only pre-formatted for text, and does not necessarily mean that the content is code. Therefore, it is not necessary to define an equal width font for the pre Tag, if it is code in pre, use:
<Pre> <code>... </Code> </pre>
2. HTML5 has "abandoned" tt labels ";
Conclusion: Only three tags, code, kbd, and samp, can be defined, or the default value is retained; 14-small
{Font-size: 12px;}-1. KISSY indicates that Chinese characters smaller than 12px are difficult to read, so it is normalized;
2. HTML5 "discards" the big tag, but keeps the small. somehow ......
Conclusion: The small label is not recommended, starting from Reset; 15-hr
{Border: none; height: 1px;} hr
{Border: none; height: 1px;} 1. hr default value: border: 1px inset; height: 2;
2. The hr color is defined by background-color in FF and by color in IE. Therefore, please write both attributes in actual use;
3. The hr box model is different from Chrome in IE/FF. It is not recommended. 16-body,
Button, input, select, textarea
{Font: 12px/1 Tahoma, Helvetica, Arial, "\ 5b8b \ 4f53", sans-serif;} body,
Button, input, select, textarea
{Font: 12px/1 Arial, Tahoma, Helvetica, SimSun, san-serif;} 1. It is difficult to read Chinese characters smaller than 12px;
2. If the row height is smaller than 12 PX under the 12 PX font, the text will overlap;
3. Line heights with the same font size can avoid resolution differences between different browsers on line heights, so as to avoid alignment issues. It is more appropriate to define the line heights for specific text content separately;
4. The form elements are not inherited under IE6, And the font style must be set separately;
5. KISSY uses the ASCII code "\ 5b8b \ 4f53" for the word "" to prevent style definition problems due to different text encodings;
We recommend that you use the English representation of the font here (note that the font name should be enclosed in quotation marks when there are spaces), which is easier to read, such:
SimSun,
SimHei,
New versions: NSimSun,
Imitation Song: FangSong,
KaiTi,
Imitation Song _ GB2312: FangSong_GB2312,
_ GB2312: KaiTi_GB2312,
Microsoft YaHei; 17-a {text-decoration: none ;}
A: hover {text-decoration: underline;}-because the link style varies on different pages, I prefer not to Reset it in the Reset, but it is defined in the actual project; 18-html
{Overflow-y: scroll;}-1. In non-ie browsers such as FF, if the page content is less than one screen, there is no vertical scroll bar by default, you can add this scroll bar to make the layout more accurate;
2. This attribute can be added during design, but it is recommended to be removed during release;

Well, that's all. I 'd like to use the comparison in the above table. You may have a preliminary understanding of my Dawn CSS Reset. As all people who have published CSS Reset said, "This is not a panacea" and "there is no silver bullet ". If you have any suggestions, please discuss them later. I also hope that my summary will be helpful to you. Again, this Reset has been used in several projects and has not encountered any problems for the time being.

PS: I would like to apologize to my friends who have supported the horizontal scroll bar in the above table because the display is not wide enough ~ I have set overflow: auto for the div outside the table. It should not damage the skin layout ~

Finally, the final code is provided:

/**
 * Dawn CSS Reset
 * Version: 1.0 beta
 * Update: 2009-07-27
 * Author: mingelz
 * URI: http://mingelz.com | http://www.cnblogs.com/mingelz
 * License: http://creativecommons.org/licenses/by-sa/3.0/
*/
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
li{list-style:none;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
abbr[title]{border-bottom:1px dotted;cursor:help;}
address,cite,dfn,em,var{font-style:normal;}
button,input,select,textarea{font-size:100%;}
legend{color:#000;}
code,kbd,samp{font-family:"Courier New",monospace;}
hr{border:none;height:1px;}
body,button,input,select,textarea{font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;}

Last Updated:

Version update history:
V1.0beta []: after using it for a period of time in the actual project, I decided to release it. Considering its versatility, I added a reset to legend;
V0.4 []: removed the definition of the acronym tag. HTM5 has abandoned it. Let's also say Byebye to it. Of course, we also hope IE6 will get Byebye as soon as possible;
V0.3 []: Each tag is sorted out, and a set of new CSS Reset code is summarized based on YUI and KISSY;
V0.2 []: v0.1 code is simplified;
V0.1 []: added some KISSY code based on YUI;