网站建设cz35,wordpress 禁止页面评论,免费网站模版 好用的,工作证明模板免费什么是css初始化
CSS初始化是指重设浏览器的样式。
因为浏览器的兼容问题#xff0c;不同浏览器对有些标签的默认值是不同的#xff0c;如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
每次新开发网站或新网页时候通过初始化CSS样式的属性#xff0c;为我们将用…什么是css初始化
CSS初始化是指重设浏览器的样式。
因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
每次新开发网站或新网页时候通过初始化CSS样式的属性为我们将用到的CSS或html标签更加方便准确使得我们开发网页内容时更加方便简洁同时减少CSS代码量节约网页下载时间。
css初始化的好处提高编码质量
初始化CSS为我们节约网页代码节约网页下载时间还会使得我们开发网页内容时更加方便简洁不用考虑很多。
如果不初始化整个页面做完会很糟糕重复的css样式很多。
我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性是否和前面的CSS属性相同是否统一整个网页的风格和样式。
学习视频分享css视频教程
最简单的初始化方法就是 * {padding: 0; margin: 0;} 。有很多人也是这样写的。
这确实很简单但有人就会感到疑问*号这样一个通用符在编写代码的时候是快但如果网站很大CSS样式表文件很大这样写的话他会把所有的标签都初始化一遍这样就大大的加强了网站运行的负载会使网站加载的时候需要很长一段时间。
我们可以直接使用下面的代码初始化css。
css初始化代码
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6,
form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: SimSun,宋体;}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; }
img {border:0; vertical-align:middle;}
table { border-collapse:collapse; }
body {font:12px/150% Arial,Verdana,\5b8b\4f53;color:#666;background:#fff
}
.clearfix:before,.clearfix:after{ content:; display:table;
}
.clearfix:after{clear:both;}
.clearfix{ *zoom:1;/*IE/7/6*/
}
a{color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}
/*公共类*/
.w{width: 1210px;margin:0 auto;
}
.fl {float:left
}
.fr {float:right
}
.al {text-align:left
}
.ac {text-align:center
}
.ar {text-align:right
}
.hide {display:none
}各大网站CSS初始化代码集合
CSS初始化可以简单快速的实现常用标签的属性设定尽量减少各浏览器之间的兼容性问题
1、百度 CSS初始化 https://www.baidu.com
统一初始化 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}html {color: #000;overflow-y: scroll;overflow: -moz-scrollbars}body, button, input, select, textarea {font: 12px arial}h1, h2, h3, h4, h5, h6 {font-size: 100%}em {font-style: normal}small {font-size: 12px}ul, ol {list-style: none}a {text-decoration: none}a:hover {text-decoration: underline}legend {color: #000}fieldset, img {border: 0}button, input, select, textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}img {-ms-interpolation-mode: bicubic}textarea {resize: vertical}其他常用CSS样式.left {float: left}.right {float: right}.overflow {overflow: hidden}.hide {display: none}.block {display: block}.inline {display: inline}.error {color: #F00;font-size: 12px}label, button {cursor: pointer}.clearfix:after {content: \\20;display: block;height: 0;clear: both}.clearfix {zoom: 1}.clear {clear: both;height: 0;line-height: 0;font-size: 0;visibility: hidden;overflow: hidden}.wordwrap {word-break: break-all;word-wrap: break-word}.s-yahei {font-family: arial, Microsoft Yahei, 微软雅黑}2、腾讯首页 CSS初始化 http://www.qq.com
统一初始化
body, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, ol, p, select, td, textarea, th, ul {margin: 0;padding: 0}body {font: 12px SimSun, Arial Narrow, HELVETICA;background: #fff;-webkit-text-size-adjust: 100%}a {color: #172c45;text-decoration: none}a:hover {color: #cd0200;text-decoration: underline}em {font-style: normal}li {list-style: none}img {border: 0;vertical-align: middle}table {border-collapse: collapse;border-spacing: 0}p {word-wrap: break-word}其他常用CSS样式
.ind {text-indent: 2em}.ind10 {text-indent: 10px}.noborder {border: 0}.Q-red a, a.Q-red {color: #bd0a01 !important}.Q-black a, a.Q-black {color: #000 !important}.Q-bold {font-weight: 700 !important}.Q-pList ul:after, .Q-pList:after, .Q-tList ol:after, .Q-tList ul:after, .Q-tList:after, .Q-tpList ul:after, .Q-tpList:after, .Q-tpWrap:after, .bd:after, .cf:after, .ft:after, .hd:after, .layout:after {content: ;display: table;clear: both}.Q-pList, .Q-pList ul, .Q-tList, .Q-tList ol, .Q-tList ul, .Q-tpList, .Q-tpList ul, .Q-tpWrap, .bd, .cf, .ft, .hd, .layout {*zoom: 1}.chief, .fl, .layout .fl {float: left;display: inline}.extra, .fr, .layout .fr {float: right;display: inline}.fn {font-weight: 700}3、360官网 CSS初始化 https://www.360.cn
统一初始化
td, body, th, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {padding: 0}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}h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: 400}ul, ol {list-style: none}4、微博官网 CSS初始化 https://weibo.com
统一初始化
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;}其他常用CSS样式
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;}
5、淘宝官网 CSS初始化 https://www.taobao.com
统一初始化
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}button {border-radius: 0;}6、京东官网 CSS初始化 https://www.jd.com
统一初始化 * {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: #e33333}button, input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \\5B8B\4F53, sans-serif}body {-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, 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}参考链接
https://www.php.cn/faq/473405.html https://blog.csdn.net/heart_is_broken/article/details/126331482
