175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

如何使用网站主样式表删除默认浏览器样式

2019-06-24 来源:小领

所有Web浏览器都包含所谓的“默认样式”。这些样式在没有任何其他样式信息的情况下决定HTML元素的外观和风格。例如,在几乎每个浏览器中,超链接的默认外观是带有下划线的亮蓝色。这是这些链接的外观,除非您告诉它们以不同的方式显示。 

默认浏览器样式可能会有所帮助,但在许多情况下,青岛网站设计人员希望删除这些样式,以便他们可以100%的使用css样式重新开始。这是使用所谓的“主样式表”完成的。

主样式表应该是您在所有文档中调用的第一个样式表。您可以使用主样式表清除可能导致跨浏览器Web设计出现问题的默认浏览器设置。一旦您使用主样式表清除了样式,您的设计就会从所有浏览器中的相同位置开始,就像一幅干净的绘画画布。

全局默认值
您的主样式表应首先将页面上的边距,填充和边框清零。某些Web浏览器将文档正文默认为从浏览器窗格边缘缩进1或2个像素。这可以确保它们都显示相同的内容。如果您还希望使字体保持一致。请务必将字体大小设置为100%或1em,以便可以访问您的页面,但大小仍然一致。并确保包括行高。

标题格式
标题或标题标签(H1,H2,H3等)通常默认为带有大边距或围绕它们填充的粗体文本。通过清除权重,边距和填充,可以确保这些标记仍然比周围的文本更大(或更小),而不需要额外的样式。您可能需要考虑为标题标记设置特定大小,字母间距和填充,但这实际上取决于您正在设计的网站的样式,并且应该不在主样式表中。您可以根据具体设计的需要为这些标题添加更多样式。

纯文本格式
除了标题之外,还有其他文本标签,您应该确保清除。人们经常忘记的一组是表格单元格标签(TH和TD)和表格标签(SELECT,TEXTAREA和INPUT)。如果您没有将它们设置为与正文和段落文本相同的大小,那么您可能会对浏览器如何呈现它们感到不愉快。

链接和图像
链接易于管理,并且可以从上述明亮的蓝色下划线文本进行更改。我们希望始终将我们的链接加下划线,但如果您更喜欢它,则可以单独设置这些选项。我们也不在主样式表中包含颜色,因为这取决于设计。对于图像,关闭边框很重要。虽然大多数浏览器不会在普通图像周围显示边框,但在链接图像时,浏览器会打开边框。

表格
虽然表格不再用于网站布局,但您的网站仍可能将它们用于实际的表格数据展示。这是对HTML表格来说是很好用的。我们已经确保您的表格单元格的默认文本大小相同,但是您应该设置一些其他样式以使表格保持不变。

形式
与其他元素一样,您应该清除表单周围的边距和填充。我们要做的另一件事是将表单标记重写为“ 内联 ”,这样就不会在将代码放入代码时添加额外的空间。与其他文本元素一样,我们定义上面的select,textarea和input的字体信息,以便它与我们文本的其余部分相同。更改标签的光标也是个好主意。这有助于人们看到标签在点击时会做某事。

常使用的类
对于主样式表的这一部分,您应该定义对您有意义的类。这些是我们最常使用的一些类。请注意,它们未设置为任何特定元素,因此您可以将它们分配给您需要的任何元素。

请记住,因为这些类是在任何其他样式之前编写的,并且它们只是类,所以它们很容易使用级联中稍后出现的更具体的样式属性来覆盖。如果您发现在元素上设置了一个公共类并且它没有生效,那么您应该检查以确保在以后的一个样式表中没有其他样式影响同一个元素。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=180
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov.com 版权所有
鲁公网安备37020302372323
ICP证: 鲁ICP备18056479号

关注领创公众平台

添加官方微信

175 6191 5976