CSS-初始化模板1(normalize.css)
按照normalize.css的初始化模板,对其注释进行翻译,方便查看。
normalize.css的github:https://github.com/necolas/normalize.css
初始化的目的:保护有用的浏览器样式、一般化的样式、修复浏览器自身的bug、优化css的可用性、解释代码
1 /* 2 *在所有浏览器中更正行高。 3 *防止在更改方向后调整字体大小 4 *Windows Phone和iOS上的IE。 5 */ 6 html{ 7 font-family:sans-serif; 8 line-height:1.15; 9 -ms-text-size-adjust:100%; 10 -webkit-text-size-adjust:100%; 11 } 12 13 /*删除页面中的边距*/ 14 body{ 15 margin:0; 16 padding:0; 17 } 18 19 /*在IE中一致呈现“main”元素。*/ 20 main{ 21 display:block; 22 } 23 24 /* 25 *更正“section”和“h1”元素的字体大小和边距 26 *Chrome、Firefox和Safari中的“article”元素上下文。 27 */ 28 h1{ 29 font-size:2em; 30 margin:0.67em 0; 31 } 32 33 /* 34 *在Firefox中添加正确的框大小。 35 *显示边缘和IE中的溢出。 36 */ 37 pre{ 38 font-family:monospace,monospace; 39 font-size:1em; 40 } 41 42 /*文本级语义*/ 43 /*========================================================================== */ 44 45 /*删除IE 10中活动链接上的灰色背景。*/ 46 a{ 47 background-color:transparent; 48 } 49 50 /* 51 *移除Chrome57的底部边框- 52 *在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。 53 */ 54 abbr[title]{ 55 border-bottom:none; 56 text-decoration:underline; 57 text-decoration:underline dotted; 58 } 59 60 /*在Chrome、Edge和Safari中添加正确的字体粗细。*/ 61 b,strong { 62 font-weight: bolder; 63 } 64 65 /* 66 *更正所有浏览器中字体大小的继承和缩放。 67 *在所有浏览器中更正奇数'em'字体大小。 68 */ 69 code,kbd,samp{ 70 font-family:monospace,monospace; 71 font-size:1em; 72 } 73 74 /*在所有浏览器中添加正确的字体大小。*/ 75 small{ 76 font-size:80%; 77 } 78 79 /** 80 *防止“sub”和“sup”元素影响 81 *所有浏览器。 82 */ 83 sub,sup{ 84 font-size:75%; 85 line-height:0; 86 position:relative; 87 vertical-align:baseline; 88 } 89 sub{ 90 bottom:-0.25em; 91 } 92 sup{ 93 top:-0.5em; 94 } 95 96 /*嵌入内容*/ 97 /*========================================================================== */ 98 99 /*删除IE 10中链接内的图像边框。*/ 100 img{ 101 border-style:none; 102 } 103 104 /*表格*/ 105 /*========================================================================== */ 106 107 /* 108 *在所有浏览器中更改字体样式。 109 *删除Firefox和Safari中的边距。 110 */ 111 button,input,optgroup,select,textarea{ 112 font-family:inherit; 113 font-size:100%; 114 line-height:1.15; 115 margin:0; 116 } 117 118 /* 119 *在IE中显示溢出。 120 *显示边缘溢出。 121 */ 122 button,input{ 123 overflow:visible; 124 } 125 126 /* 127 *删除Edge、Firefox和IE中文本转换的继承。 128 *删除Firefox中文本转换的继承。 129 */ 130 button,select{ 131 text-transform:none; 132 } 133 134 /*更正在iOS和Safari中无法设置可单击类型的样式。*/ 135 button,[type="button"],[type="reset"],[type="submit"]{ 136 -webkit-appearance:button; 137 } 138 139 /*删除Firefox中的内边框和填充。*/ 140 button:-moz-focus-inner, 141 [type="button"]::-moz-focus-inner, 142 [type="reset"]::-moz-focus-inner, 143 [type="submit"]::-moz-focus-inner{ 144 border-style:none; 145 padding:0; 146 } 147 148 /*恢复先前规则未设置的焦点样式。*/4 149 button:-moz-focusring, 150 [type="button"]:-moz-focusring, 151 [type="reset"]:-moz-focusring, 152 [type="submit"]:-moz-focusring{ 153 outline:1px dotted ButtonText; 154 } 155 156 /*更正Firefox中的填充。*/ 157 fieldset{ 158 padding:0.35em 0.75em 0.625em; 159 } 160 /* 161 *更正边缘和IE中的文字环绕。 162 *更正IE中“fieldset”元素的颜色继承。 163 *去掉填充,这样开发人员在归零时不会被发现 164 *所有浏览器中的`fieldset`元素。 165 */ 166 legend{ 167 box-sizing:border-box; 168 display:table; 169 max-width:100%; 170 white-space:normal; 171 color:inherit; 172 padding:0; 173 } 174 /*在Chrome、Firefox和Opera中添加正确的垂直对齐方式。*/ 175 progress{ 176 vertical-align:baseline; 177 } 178 179 /*删除IE 10+中默认的垂直滚动条。*/ 180 textarea{ 181 overflow:auto; 182 } 183 184 /*更正Chrome中递增和递减按钮的光标样式。*/ 185 [type="number"]::-webkit-inner-spin-button, 186 [type="number"]::-webkit-outer-spin-button{ 187 height:auto; 188 } 189 190 /* 191 *纠正Chrome和Safari中的奇怪外观。 192 *更正Safari中的轮廓样式。 193 */ 194 [type="search"]{ 195 -webkit-appearance:textfield; 196 outline-offset:-2px; 197 } 198 199 /*删除macOS上Chrome和Safari中的内部填充。*/ 200 [type="search"]::-webkit-search-decoration{ 201 -webkit-appearance:none; 202 } 203 204 /* 205 *更正在iOS和Safari中无法设置可单击类型的样式。 206 *在Safari中将字体属性更改为“inherit”。 207 */ 208 ::-webkit-file-upload-button{ 209 -webkit-appearance:button; 210 font:inherit; 211 } 212 213 /*交互式*/ 214 /*========================================================================== */ 215 216 /*在Edge、IE 10+和Firefox中添加正确的显示。*/ 217 detalis{ 218 display:block; 219 } 220 221 /*在所有浏览器中添加正确的显示。*/ 222 summary{ 223 display:list-item; 224 } 225 226 /*移动*/ 227 /*========================================================================== */ 228 229 /*在IE 10+中添加正确的显示*/ 230 template{ 231 display:none; 232 } 233 234 /*在IE 10中添加正确的显示*/ 235 [hidden]{ 236 display:none; 237 }