1. Toy模板网首页
  2. >编程知识
  3. >技术交流

web常用的Html初始化样式css整合集

2年前分类：编程知识 / 技术交流阅读(356)

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/article/76.html

  1. 选择合适的初始化样式：根据自己的需求选择合适的HTML初始化样式，有些样式集适用于全站，有些适用于特定部分。


  2. 减少样式冲突：多个CSS文件合并使用时容易引起样式冲突，开发者需要注意样式层级和选择器权重的问题，避免样式冲突影响SEO效果。

  3. 优化性能：过多的CSS规则会增加页面加载时间，开发者可以通过压缩和合并CSS文件、使用缓存等方式来优化性能。

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


  • Normalize.css：它是一个可定制的CSS初始化库，用于重置浏览器默认样式。它针对不同浏览器的差异进行了处理，让网页效果更加一致。

  • Bootstrap：这是一个流行的CSS框架，提供了丰富的UI组件和布局样式。它使用了HTML初始化样式和CSS整合集的思想，使得开发者能够快速构建规范化的网页。

  • Foundation：类似于Bootstrap，Foundation也是一个全功能的CSS框架，提供了灵活的网格系统和响应式设计。它通过CSS整合集的方式，帮助开发者构建适配不同设备的网页。

总结

HTML初始化样式和CSS整合集是Web开发中重要的工具集，可以帮助开发者快速构建符合SEO标准的网页。

开发者在选择和使用这些工具时需要注意样式冲突和性能优化的问题，以达到最佳的SEO效果。

以上内容更新日期 2023-10-30，站长不保证其正确性


到此这篇关于web常用的Html初始化样式css整合集的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

原文地址:https://www.toymoban.com/article/76.html

如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用
未经允许不得转载：Toy模板网 » web常用的Html初始化样式css整合集

相关文章

    系统发生错误

    系统发生错误

    您可以选择 [ 重试 ] [ 返回 ] 或者 [ 回到首页 ]

    [ 错误信息 ]

    页面错误！请稍后再试～

    Tob