使用这些提示获取事实
所有的网页浏览器都包含了所谓的“诡异风格”。 这些样式决定了HTML元素在没有任何其他样式信息的情况下的外观和风格。 例如，在几乎每个浏览器中，超链接的默认外观都是明亮的蓝色，并带有下划线。 除非您告诉他们以不同的方式显示，否则这些链接就是这样。
默认的浏览器样式可能会有所帮助，但在很多情况下，Web设计人员想要删除这些样式，以便他们可以使用100％控制的样式重新开始。 这是使用所谓的“主样式表”完成的。
主样式表应该是您在所有文档中调用的第一个样式表。 您可以使用主样式表来清除在跨浏览器Web设计中可能导致问题的默认浏览器设置。 一旦你用主样式表清除了样式，你的设计就从所有浏览器中的同一个地方开始 - 就像一幅用于绘画的干净的画布。
全局默认值
您的主样式表应该首先清除页面上的边距，填充和边框 。 某些Web浏览器会将文档的主体默认为从浏览器窗格边缘缩进的1或2个像素。 这确保它们都显示相同的内容：
html，body {margin：0px; padding：0px; border：0px; }你也想让字体一致。 请务必将字体大小设置为100％或1em，以便您的页面可以访问，但大小仍然一致。 并且一定要包含行高。
body {font：1em / 1.25 Arial，Helvetica，sans-serif; }标题格式
标题或标题标记（H1，H2，H3等）通常默认为粗体文本，边距较大或周围填充。 通过清除重量，边距和填充，您可以确保这些标签仍然保持比它们周围的文本更大（或更小），而没有额外的样式：
h1，h2，h3，h4，h5，h6 {margin：0; 填充：0; font-weight：normal; font-family：Arial，Helvetica，sans-serif; }您可能需要考虑为标题标签设置特定的尺寸，字母间距和填充，但这取决于您正在设计的网站的样式，应该排除在主样式表之外。 您可以根据特定设计的需要为这些标题添加更多样式。
纯文本格式
除了标题之外，还有其他的文字标签，您应该确保清除。 人们常常忘记的一组是表格单元标签（TH和TD）和表格标签（SELECT，TEXTAREA和INPUT）。 如果您没有将它们设置为与您的正文和段落文本相同的大小，那么您可能会对浏览器呈现它们的方式感到不快。
p，th，td，li，dd，dt，ul，ol，blockquote，q，首字母缩写词，abbr，a，input，select，textarea {margin：0; 填充：0; font：normal normal normal 1em / 1.25 Arial，Helvetica，sans-serif; }将您的报价（BLOCKQUOTE和Q），首字母缩写词和缩写缩小一点，这样也很好，让它们更加突出：
blockquote {margin：1.25em; padding：1.25em} q {font-style：italic; }首字母缩写，abbr {cursor：help; border-bottom：1px虚线; }链接和图像
链接很容易管理，并从上述明亮的蓝色下划线文本更改。 我更喜欢始终将链接标注为下划线，但如果您偏好采用其他方式，则可以分别设置这些选项。 我也不在主样式表中包含颜色，因为这取决于设计。
a，a：link，a：visited，a：active，a：hover {text-decoration：underline; }使用图像时，关闭边界很重要。 尽管大多数浏览器不会在纯图像周围显示边框，但当图像链接时，浏览器会打开边框。 解决这个问题：
img {border：none; }表
尽管表格不再用于布局目的，但您的网站仍然可以将它们用于实际的tabluar数据。 这是HTML表格的一个很好的用法。 我们已经确保表格单元格的默认文字大小相同，但您应该设置一些其他样式，以便您的表格保持不变：
表{margin：0; 填充：0; border：none; }形式
与其他元素一样，您应该清除表单周围的边距和填充。 我喜欢做的另一件事是将表单标签重写为“ inline ”，以便在代码中放置标签时不会添加额外的空间。 与其他文本元素一样，我定义了select，textarea和上面的输入的字体信息，以便与我的其余文本相同。
表格{margin：0; 填充：0; 显示：内联; }为标签更改光标也是一个好主意。 这有助于人们看到标签在点击时会做些事情。
标签{cursor：pointer; }通用类
对于主样式表的这一部分，您应该定义对您有意义的类 。 这些是我经常使用的一些课程。 请注意，它们没有设置为任何特定元素，因此您可以将它们分配给您需要的任何内容：
清除{clear：both; } .floatLeft {float：left; } .floatRight {float：right; } .textLeft {text-align：left; } .textRight {text-align：right; } .textCenter {text-align：center; } .textJustify {text-align：justify; } .blockCenter {display：block; margin-left：auto; margin-right：auto; } / *记得设置宽度* / .bold {font-weight：bold; } .italic {font-style：italic; } .underline {text-decoration：underline; } .noindent {margin-left：0; padding-left：0; } .nomargin {margin：0; } .nopadding {padding：0; } .nobullet {list-style：none; list-style-image：none; }请记住，因为这些类都是在任何其他样式之前编写的，并且它们只是类，所以它们很容易覆盖级联中稍后发生的更具体的样式属性。 如果你发现你在一个元素上设置了一个普通的类并且它没有生效，那么你应该检查一下，以确保在你后面的一个样式表中没有其他样式影响同一个元素。
整个主样式表
/ *全局默认值* / html，body {margin：0px; padding：0px; border：0px; } body {font：1em / 1.25 Arial，Helvetica，sans-serif; } / *标题* / h1，h2，h3，h4，h5，h6 {margin：0; 填充：0; font-weight：normal; font-family：Arial，Helvetica，sans-serif; } / *文本样式* / p，th，td，li，dd，dt，ul，ol，blockquote，q，首字母缩写词，abbr，a，input，select，textarea {margin：0; 填充：0; font：normal normal normal 1em / 1.25 Arial，Helvetica，sans-serif; } blockquote {margin：1.25em; padding：1.25em} q {font-style：italic; }首字母缩写，abbr {cursor：help; border-bottom：1px虚线; } small {font-size：.85em; } big {font-size：1.2em; } / *链接和图片* / a，a：link，a：visited，a：active，a：hover {text-decoration：underline; } img {border：none; } / * Tables * / table {margin：0; 填充：0; border：none; } / * Forms * / form {margin：0; 填充：0; 显示：内联; } label {cursor：pointer; } / * Common Classes * / .clear {clear：both; } .floatLeft {float：left; } .floatRight {float：right; } .textLeft {text-align：left; } .textRight {text-align：right; } .textCenter {text-align：center; } .textJustify {text-align：justify; } .blockCenter {display：block; margin-left：auto; margin-right：auto; } / *记得设置宽度* / .bold {font-weight：bold; } .italic {font-style：italic; } .underline {text-decoration：underline; } .noindent {margin-left：0; padding-left：0; } .nomargin {margin：0; } .nopadding {padding：0; } .nobullet {list-style：none; list-style-image：none; }Jennifer Krynin的原创文章。 在10/6/17由Jeremy Girard编辑