web常用的Html初始化样式css整合集-Toy模板网

HTML初始化样式和CSS整合集是Web开发中不可或缺的工具集，本文将介绍一些常用的HTML初始化样式和CSS整合集，帮助开发者快速构建SEO友好的网页。

现在 github 上比较流行的 normalize.css

GitHub项目地址：github.com/necolas/normalize.css 或者 点击查看常用的HTML初始化样式和CSS整合集推荐

web常用样式初始化css

html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body {margin:0;text-align:left;font-size:15px;background:#fff;font-family:arial,"Microsoft YaHei","\5fae\8f6f\96c5\9ed1"}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {display:block;}
audio,canvas,progress,video {display:inline-block;}
audio:not([controls]) {display:none;height:0;}
progress {vertical-align:baseline;}
template,[hidden] {display:none;}
a {background-color:transparent;-webkit-text-decoration-skip:objects;}
a:active,a:hover {outline-width:0;}
a,b,p,font,span,strong {font-family:"Microsoft YaHei";}
button,input,select,textarea,a {outline:none;}
abbr[title] {border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,strong {font-weight:inherit;}
b,strong {font-weight:bolder;}
dfn {font-style:italic;}
h1 {font-size:2em;margin:0.67em 0;}
mark {background-color:#ff0;color:#000;}
small {font-size:80%;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}
img {border-style:none;}
svg:not(:root) {overflow:hidden;}
code,kbd,pre,samp {font-family:monospace,monospace;font-size:1em;}
figure {margin:1em 40px;}
hr {box-sizing:content-box;height:0;overflow:visible;}
button,input,select,textarea {font:inherit;margin:0;}
optgroup {font-weight:bold;}
button,input {overflow:visible;padding:0px;margin:0px;}
button,select {text-transform:none;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
fieldset {border:0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
textarea {overflow:auto;}
[type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}
[type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
::-webkit-input-placeholder {color:inherit;opacity:0.54;}
::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
.clearfix {*zoom:1}
.clearfix:before,.clearfix:after {display:table;line-height:0;content:""}
.clearfix:after {clear:both}

p {margin:0;}
img {width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
ul,ol,dl,h1,h2,h3,h4,h5,h6,dt,dd {margin:0;padding:0}
ul li,ol li {list-style:none}

淘宝网

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}
body,button,input,select,textarea {font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6 {font-size:100%}
address,cite,dfn,em,var {font-style:normal}
code,kbd,pre,samp {font-family:courier new,courier,monospace}
small {font-size:12px}
ol,ul {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}

天猫网

* {margin:0;padding:0}
table {border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:100}
li,ol,ul {list-style:none}
em,i {font-style:normal}
img {border:none}
img,input {vertical-align:middle}
#content {background:#fff;color:#999;font-size:12px;-webkit-text-size-adjust:none}
#content,body {background-color:#f5f5f5}
a {color:#000}
input.fixAKeyboard:focus,textarea.fixAndroidKeyboard:focus {-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-user-modify:read-write-plaintext-only}
.noscroll {position:absolute;height:100%;overflow:hidden}
.clearfix:after {display:block}
.hidden {display:none}

京东网

@charset "UTF-8";* {margin:0;padding:0}
em,i {font-style:normal}
li {list-style:none}
img {border:0;vertical-align:middle}
button {cursor:pointer}
a {color:#666;text-decoration:none}
a:hover {color:#c81623}
button,input {font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif}
body {-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;color:#666}
.hide,.none {display:none}
.clearfix:after {visibility:hidden;clear:both;display:block;content:".";height:0}
.clearfix {*zoom:1}

新浪微博

body,div,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;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,th,var,i {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
a:focus {outline-style:none;}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}
textarea {resize:none}
input::-ms-clear {display:none;}
body {font:12px/1.3 Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;overflow-x:hidden;color:#333;-webkit-font-smoothing:antialiased;}
::selection {background:#eb7350;color:#fff;}
:focus {outline-color:#eb7350;}
.scm {height:42px;}

程序员工具网 https://tool.toymoban.com/

a,address,article,aside,audio,b,body,button,canvas,dd,details,div,dl,dt,em,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,label,li,mark,nav,object,ol,p,section,select,span,strong,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left;font-weight:400}body,html,iframe,img{border:0}
body{font-family:"微软雅黑";background:#fafafa;}
address,i{font-style:normal}
h1,h2,h3,h4,h5,h6{font-size:100%}
textarea{overflow:auto;resize:none;outline:0;resize: vertical;-webkit-appearance: none;}
label{cursor:default}
a,button{cursor:pointer}
button,input{outline:0}
b,em,h1,h2,h3,h4,h5,h6,strong{font-weight:700}
a{text-decoration:none}
ol,ul{list-style:none}
a:active{background-color:transparent}
a:active,a:hover,a:visited,a:link{text-decoration:none;outline:0 none;transition:130ms ease-in;-moz-transition:130ms ease-in;-webkit-transition:130ms ease-in;-o-transition:130ms ease-in;}
.clearfix{*zoom:1}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}

扩展补充

在使用HTML初始化样式和CSS整合集时，开发者需要注意以下几点：

文章来源地址https://www.toymoban.com/diary/share/76.html

选择合适的初始化样式：根据自己的需求选择合适的HTML初始化样式，有些样式集适用于全站，有些适用于特定部分。
减少样式冲突：多个CSS文件合并使用时容易引起样式冲突，开发者需要注意样式层级和选择器权重的问题，避免样式冲突影响SEO效果。
优化性能：过多的CSS规则会增加页面加载时间，开发者可以通过压缩和合并CSS文件、使用缓存等方式来优化性能。

以下是一些常用的HTML初始化样式和CSS整合集推荐：

Normalize.css：它是一个可定制的CSS初始化库，用于重置浏览器默认样式。它针对不同浏览器的差异进行了处理，让网页效果更加一致。
Bootstrap：这是一个流行的CSS框架，提供了丰富的UI组件和布局样式。它使用了HTML初始化样式和CSS整合集的思想，使得开发者能够快速构建规范化的网页。
Foundation：类似于Bootstrap，Foundation也是一个全功能的CSS框架，提供了灵活的网格系统和响应式设计。它通过CSS整合集的方式，帮助开发者构建适配不同设备的网页。