清除浏览器默认样式normalize.css源代码

旧城等待, 2024-04-18 13:24 203阅读 0赞

normalize.css文件一般用于重置一些浏览器默认的样式,只要将html文件应用该css文件即可实现。

normalize.css里面的源码:

  1. /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
  2. /*
  3. http://necolas.github.io/normalize.css/
  4. */
  5. /**
  6. * 1. Change the default font family in all browsers (opinionated).
  7. * 2. Correct the line height in all browsers.
  8. * 3. Prevent adjustments of font size after orientation changes in
  9. * IE on Windows Phone and in iOS.
  10. */
  11. /* Document
  12. ========================================================================== */
  13. html {
  14. font-family: sans-serif; /* 1 */
  15. line-height: 1.15; /* 2 */
  16. -ms-text-size-adjust: 100%; /* 3 */
  17. -webkit-text-size-adjust: 100%; /* 3 */
  18. }
  19. /* Sections
  20. ========================================================================== */
  21. /**
  22. * Remove the margin in all browsers (opinionated).
  23. */
  24. body {
  25. margin: 0;
  26. }
  27. /**
  28. * Add the correct display in IE 9-.
  29. */
  30. article,
  31. aside,
  32. footer,
  33. header,
  34. nav,
  35. section {
  36. display: block;
  37. }
  38. /**
  39. * Correct the font size and margin on `h1` elements within `section` and
  40. * `article` contexts in Chrome, Firefox, and Safari.
  41. */
  42. h1 {
  43. font-size: 2em;
  44. margin: 0.67em 0;
  45. }
  46. /* Grouping content
  47. ========================================================================== */
  48. /**
  49. * Add the correct display in IE 9-.
  50. * 1. Add the correct display in IE.
  51. */
  52. figcaption,
  53. figure,
  54. main { /* 1 */
  55. display: block;
  56. }
  57. /**
  58. * Add the correct margin in IE 8.
  59. */
  60. figure {
  61. margin: 1em 40px;
  62. }
  63. /**
  64. * 1. Add the correct box sizing in Firefox.
  65. * 2. Show the overflow in Edge and IE.
  66. */
  67. hr {
  68. box-sizing: content-box; /* 1 */
  69. height: 0; /* 1 */
  70. overflow: visible; /* 2 */
  71. }
  72. /**
  73. * 1. Correct the inheritance and scaling of font size in all browsers.
  74. * 2. Correct the odd `em` font sizing in all browsers.
  75. */
  76. pre {
  77. font-family: monospace, monospace; /* 1 */
  78. font-size: 1em; /* 2 */
  79. }
  80. /* Text-level semantics
  81. ========================================================================== */
  82. /**
  83. * 1. Remove the gray background on active links in IE 10.
  84. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  85. */
  86. a {
  87. background-color: transparent; /* 1 */
  88. -webkit-text-decoration-skip: objects; /* 2 */
  89. }
  90. /**
  91. * Remove the outline on focused links when they are also active or hovered
  92. * in all browsers (opinionated).
  93. */
  94. a:active,
  95. a:hover {
  96. outline-width: 0;
  97. }
  98. /**
  99. * 1. Remove the bottom border in Firefox 39-.
  100. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  101. */
  102. abbr[title] {
  103. border-bottom: none; /* 1 */
  104. text-decoration: underline; /* 2 */
  105. text-decoration: underline dotted; /* 2 */
  106. }
  107. /**
  108. * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  109. */
  110. b,
  111. strong {
  112. font-weight: inherit;
  113. }
  114. /**
  115. * Add the correct font weight in Chrome, Edge, and Safari.
  116. */
  117. b,
  118. strong {
  119. font-weight: bolder;
  120. }
  121. /**
  122. * 1. Correct the inheritance and scaling of font size in all browsers.
  123. * 2. Correct the odd `em` font sizing in all browsers.
  124. */
  125. code,
  126. kbd,
  127. samp {
  128. font-family: monospace, monospace; /* 1 */
  129. font-size: 1em; /* 2 */
  130. }
  131. /**
  132. * Add the correct font style in Android 4.3-.
  133. */
  134. dfn {
  135. font-style: italic;
  136. }
  137. /**
  138. * Add the correct background and color in IE 9-.
  139. */
  140. mark {
  141. background-color: #ff0;
  142. color: #000;
  143. }
  144. /**
  145. * Add the correct font size in all browsers.
  146. */
  147. small {
  148. font-size: 80%;
  149. }
  150. /**
  151. * Prevent `sub` and `sup` elements from affecting the line height in
  152. * all browsers.
  153. */
  154. sub,
  155. sup {
  156. font-size: 75%;
  157. line-height: 0;
  158. position: relative;
  159. vertical-align: baseline;
  160. }
  161. sub {
  162. bottom: -0.25em;
  163. }
  164. sup {
  165. top: -0.5em;
  166. }
  167. /* Embedded content
  168. ========================================================================== */
  169. /**
  170. * Add the correct display in IE 9-.
  171. */
  172. audio,
  173. video {
  174. display: inline-block;
  175. }
  176. /**
  177. * Add the correct display in iOS 4-7.
  178. */
  179. audio:not([controls]) {
  180. display: none;
  181. height: 0;
  182. }
  183. /**
  184. * Remove the border on images inside links in IE 10-.
  185. */
  186. img {
  187. border-style: none;
  188. }
  189. /**
  190. * Hide the overflow in IE.
  191. */
  192. svg:not(:root) {
  193. overflow: hidden;
  194. }
  195. /* Forms
  196. ========================================================================== */
  197. /**
  198. * 1. Change the font styles in all browsers (opinionated).
  199. * 2. Remove the margin in Firefox and Safari.
  200. */
  201. button,
  202. input,
  203. optgroup,
  204. select,
  205. textarea {
  206. font-family: sans-serif; /* 1 */
  207. font-size: 100%; /* 1 */
  208. line-height: 1.15; /* 1 */
  209. margin: 0; /* 2 */
  210. }
  211. /**
  212. * Show the overflow in IE.
  213. * 1. Show the overflow in Edge.
  214. */
  215. button,
  216. input { /* 1 */
  217. overflow: visible;
  218. }
  219. /**
  220. * Remove the inheritance of text transform in Edge, Firefox, and IE.
  221. * 1. Remove the inheritance of text transform in Firefox.
  222. */
  223. button,
  224. select { /* 1 */
  225. text-transform: none;
  226. }
  227. /**
  228. * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  229. * controls in Android 4.
  230. * 2. Correct the inability to style clickable types in iOS and Safari.
  231. */
  232. button,
  233. html [type="button"], /* 1 */
  234. [type="reset"],
  235. [type="submit"] {
  236. -webkit-appearance: button; /* 2 */
  237. }
  238. /**
  239. * Remove the inner border and padding in Firefox.
  240. */
  241. button::-moz-focus-inner,
  242. [type="button"]::-moz-focus-inner,
  243. [type="reset"]::-moz-focus-inner,
  244. [type="submit"]::-moz-focus-inner {
  245. border-style: none;
  246. padding: 0;
  247. }
  248. /**
  249. * Restore the focus styles unset by the previous rule.
  250. */
  251. button:-moz-focusring,
  252. [type="button"]:-moz-focusring,
  253. [type="reset"]:-moz-focusring,
  254. [type="submit"]:-moz-focusring {
  255. outline: 1px dotted ButtonText;
  256. }
  257. /**
  258. * Change the border, margin, and padding in all browsers (opinionated).
  259. */
  260. fieldset {
  261. border: 1px solid #c0c0c0;
  262. margin: 0 2px;
  263. padding: 0.35em 0.625em 0.75em;
  264. }
  265. /**
  266. * 1. Correct the text wrapping in Edge and IE.
  267. * 2. Correct the color inheritance from `fieldset` elements in IE.
  268. * 3. Remove the padding so developers are not caught out when they zero out
  269. * `fieldset` elements in all browsers.
  270. */
  271. legend {
  272. box-sizing: border-box; /* 1 */
  273. color: inherit; /* 2 */
  274. display: table; /* 1 */
  275. max-width: 100%; /* 1 */
  276. padding: 0; /* 3 */
  277. white-space: normal; /* 1 */
  278. }
  279. /**
  280. * 1. Add the correct display in IE 9-.
  281. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  282. */
  283. progress {
  284. display: inline-block; /* 1 */
  285. vertical-align: baseline; /* 2 */
  286. }
  287. /**
  288. * Remove the default vertical scrollbar in IE.
  289. */
  290. textarea {
  291. overflow: auto;
  292. }
  293. /**
  294. * 1. Add the correct box sizing in IE 10-.
  295. * 2. Remove the padding in IE 10-.
  296. */
  297. [type="checkbox"],
  298. [type="radio"] {
  299. box-sizing: border-box; /* 1 */
  300. padding: 0; /* 2 */
  301. }
  302. /**
  303. * Correct the cursor style of increment and decrement buttons in Chrome.
  304. */
  305. [type="number"]::-webkit-inner-spin-button,
  306. [type="number"]::-webkit-outer-spin-button {
  307. height: auto;
  308. }
  309. /**
  310. * 1. Correct the odd appearance in Chrome and Safari.
  311. * 2. Correct the outline style in Safari.
  312. */
  313. [type="search"] {
  314. -webkit-appearance: textfield; /* 1 */
  315. outline-offset: -2px; /* 2 */
  316. }
  317. /**
  318. * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  319. */
  320. [type="search"]::-webkit-search-cancel-button,
  321. [type="search"]::-webkit-search-decoration {
  322. -webkit-appearance: none;
  323. }
  324. /**
  325. * 1. Correct the inability to style clickable types in iOS and Safari.
  326. * 2. Change font properties to `inherit` in Safari.
  327. */
  328. ::-webkit-file-upload-button {
  329. -webkit-appearance: button; /* 1 */
  330. font: inherit; /* 2 */
  331. }
  332. /* Interactive
  333. ========================================================================== */
  334. /*
  335. * Add the correct display in IE 9-.
  336. * 1. Add the correct display in Edge, IE, and Firefox.
  337. */
  338. details, /* 1 */
  339. menu {
  340. display: block;
  341. }
  342. /*
  343. * Add the correct display in all browsers.
  344. */
  345. summary {
  346. display: list-item;
  347. }
  348. /* Scripting
  349. ========================================================================== */
  350. /**
  351. * Add the correct display in IE 9-.
  352. */
  353. canvas {
  354. display: inline-block;
  355. }
  356. /**
  357. * Add the correct display in IE.
  358. */
  359. template {
  360. display: none;
  361. }
  362. /* Hidden
  363. ========================================================================== */
  364. /**
  365. * Add the correct display in IE 10-.
  366. */
  367. [hidden] {
  368. display: none;
  369. }

发表评论

表情:
评论列表 (有 0 条评论,203人围观)

还没有评论,来说两句吧...

相关阅读