【後转前要多久】# Day08 CSS - CSS Reset

HTML的注解是使用 <!-- -->
而CSS的注解是使用 /* */


浏览器预设样式

同样一份HTML,
在不同浏览器开起来,样式却不一定完全相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是H1标签</h1>
<p>P段落</p>
<a href="#">a连结</a>

<ul>
    <li>物件1</li>
    <li>物件2</li>
</ul>

</body>
</html>

这一份HTML在,
IE vs Chrome 两者开起来的差异
reset前IE VS Chrome

浏览器(Chrome、Safari、IE、Firefox等)预设会对每个标签做属性预设值,
例如预设行高、文字大小、列表样式、标签边界及留白区域等等,
用不同浏览器开起来的效果也不尽相同。

但这样很麻烦啊,
要是设计师设计出一套规格,工程师也顺利写出来了,
但使用者用的浏览器差异很大,是不是有机会跑版走歪?

CSS Reset 重设、归零

既然CSS可以後者覆盖前面,
那就覆写所有的tag,让全部浏览器预设值先归零(移除预设样式)呀!
於是就有人写出了归零的样式表,叫作CSS Reset的样式
好让设计师方便统一浏览器样式。

但因为对於归零没有一个明确的定义(大家对於归零的想法不太一样),
所以坊间流传多种CSS Reset版本,其中最为广用的是Eric Meyer的版本

就是以下这一份CSS

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

直接copy下来,存档後就能当作一般样式使用了。
档名建议取为cssreset.css,而不要叫作

档案建议取名为 cssreset.css或者cssreset-context.css
(而非 reset.cssreset-context.css)

经过Reset後
IE开起来 vs Chrome开起来
reset後 IE VS Chrome

经过CSS Reset後,
不论<h1><p>、或是<div>
全部标签大小及所占空间就都一模一样了。

link的顺序

CSS Reset要先做,再做自己的样式

...
<link rel="stylesheet" href="cssreset.css">
<link rel="stylesheet" href="style.css">
...

我先宣告变数 x=10, y=5
再做归零让 x=0, y=0
最後才设上我要的样式数值 x=100, y=-100

看到这,不自觉心里OS:
要是各大浏览器们不各自设各自的样式、而是有一套预设的共同的基准
我们何必多此一举搞这个诡异的Reset步骤

CSS Normalize 标准化

CSS Normalize 做的事情类似於 CSS Reset,
但并没有像CSS Reset把浏览器的设定、全部的值都替换掉,
而是选择保留浏览器的预设,
仅针对浏览器间版本相容问题进行修改,较泛式,
免除重新设定各式<h1><h2><p> 大小等等的麻烦。

可参考这一份Normalize.css

里面有有这一行做了什麽、以及为何而做的详细注解。
(Normalize 更新次数比起CSS Reset稍微频繁些)


网页重整小技巧

在浏览网页时,浏览器会自动快取一些小图片、样式表及执行的指令稿。
当网页重新整理时,若硬碟快取中有快取资料,
浏览器会优先拿取、以节省网路流量(省去再去跟Server要一次)。

网页快取也有可能对造成网页开发者造成
"疑,我明明改样式了,为什麽重新整理後却没有吃到样式?"
并开始怀疑是否是自己写法错误,导致没指定到标签等之类的疑惑。

在Windows上: Ctrl + F5
在MacOS上: Command + Shift + R

绕过浏览器快取,来保证浏览器要到的是最新的资料。


<<:  Day 08 借箸代筹(2):自动转型、运算子及其後

>>:  Raspberry pi 与云端的连结

【在 iOS 开发路上的大小事-Day03】透过 Global Variable 来传值

前情提要 一般我们在做传值动作的时候,会有好几种方式可以做,像是用 Segue、Closure、De...

拿 ml5 来练习 p5.js (二)

介绍 首先介绍什麽是 p5.js, p5.js 是基於 Processing 在浏览器中提供友善的画...

IT铁人DAY 18-Adapter 适配器模式

  今天介绍的Adapter Pattern是属於结构型模式,以字面上来说不难猜到它是用来让物件与物...

BPMN 业务流程图

BPMN (Business Process Model and Notation) 也是一个用来做...

[DAY21]弹性讯息

Flex Messages are messages with a customizable lay...