初始化css代码如何定义,这没有固定的写法是从事css+div人员依靠经验积累的也可以学习一些比较有经验人员的代码初始化自己的css代码达到最优。
那就要问了为什么写css初始化代码?我们举例子:
我们直接使用以下代码写到网页中你就会发现css初始化区别了所有元素都会把多余的边距和填充清除。
最简单最实用的是使用:
margin:0;
padding:0;
}
但是占用的资源也是最大的,*符号是将所有的元素执行以上代码。现在来放出我平时使用的css初始化代码:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,th,img
{
border: 0;
font-family: “Microsoft Yahei”,helvetica, arial, sans-serif;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
font-size:12px;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
list-style:none;
}
a{
text-decoration:none;
color:#000;
}
a, img {
-webkit-touch-callout:none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
-webkit-user-select:none; /* 禁止选中文本(如无文本选中需求,此为必选项) */
user-select:none;
}
/*以下针对手机初始化*/
input[type=”button”], input[type=”submit”], input[type=”reset”],select{-webkit-appearance:none;}
input[type=”checkbox”]{ transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);}
textarea{-webkit-appearance:none;}
/*移除chrom记住密码input默认淡黄色*/
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //让浏览器使用最新内核 <meta name="renderer" content="webkit"> //强制360用webkit内核,如果是用户手动切换模式则此行代码无效 //禁止浏览器读取本地缓存 <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> // 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> // 禁止百度SiteApp转码声明 <meta http-equiv="Cache-Control" content="no-siteapp"> // 禁止自动识别电话和邮箱; <meta name="format-detection" content="telephone=no, email=no"> // 指定iphone中safari顶端的状态条的样式(default:白色;black:黑色;black-translucent :半透明); <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> // 添加到 IOS 主屏后的标题 <meta name="apple-mobile-web-app-title" content="觉唯设计"> // 隐藏地址栏,启用 WebApp 全屏模式 <meta name="apple-mobile-web-app-capable" content="yes"> // 优先使用 IE 最新版本和 Chrome <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> // 注明作者 <meta name="author" content="www.jiawin.com">
与前者相比代码多但是节省了很多资源,大家也可以自己自定义属于自己的css初始化代码。