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

1,034次阅读

共计 8002 个字符，预计需要花费 21 分钟才能阅读完成。

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","5fae8f6f96c59ed1"}
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:auto9;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','5b8b4f53',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,\5b8b4f53,sans-serif}
body {-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\5b8b4f53,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 整合集的方式，帮助开发者构建适配不同设备的网页。

总结

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

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

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

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

正文完

分享无价

发表至：软件资源

1970-01-01

0

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

解决ueditor设置微软雅黑字体时的样式失效问题

从零到完全自动化：自动驾驶六个等级介绍,自动驾驶等级

如何调试无响应的 Elasticsearch 集群

高级编程语言和低级编程语言之间的区别

已是最早的文章