什么是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
评论 (0)