在网上可以找到很多CSS初始化文件的下载,比如Reset.css、Normalize.css等等。这些文件都有一些相似的特点:
/* *使用Reset.css *作者:Eric Meyer *许可证:MIT License */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
这就是Reset.css的代码。大家可以看到,他将所有元素的margin、padding、border都重置为0,将字体大小设为100%,去掉了浏览器默认的样式,让样式更加统一。而Normalize.css则更加注重对不同浏览器之间样式的兼容性,对一些标签的样式进行了重置,使不同浏览器上的样式表现更加一致。
当大家下载了这些初始化文件后,只需要在HTML文件中引用即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Reset.css</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>Hello World</p> </body> </html>
这样大家就在网页引入了Reset.css,就可以愉快的写大家自己的CSS样式了!