网页设计

当前位置:

CSS技巧1:使用CSS Reset重置样式

浏览量:0

        这是一系列文章的第一部分,将讨论特定的CSS最佳实践或技巧。我将讨论涉及CSS最佳实践,性能优化以及改善工作流程的技巧的各种主题。CSS是网页的基础,因此确保针对SEO进行优化非常重要。您可以在此处检查网站的SEO友好性 。

今天,我们将讨论重置样式的主题。

        重置样式(通常称为CSS重置或重置CSS)是将所有元素的样式重置(或更准确地说-设置)为基准值的过程,以便避免由于跨浏览器的内置默认样式而造成的跨浏览器差异设置。通过重置样式,可以避免默认使用浏览器的内置样式,该样式因浏览器而异。

        CSS重置可避免浏览器不一致

例如,假设您<a>在HTML文档中使用了定位标记。通常,Internet Explorer和Firefox等浏览器会将其呈现为蓝色并带有下划线。

但是五年后,有人决定发布新的浏览器(我们称其为UltraBrowser),他们决定不喜欢带有蓝色下划线的链接-因此,他们将<a>标签的默认样式设置为红色和黑体字。如果始终为<a>元素设置基线值,则可以确保该基线值始终相同,无论UltraBrowser认为<a>元素的外观如何。CSS可以控制从H1标签到各个段落的样式 ,因此针对不同的浏览器进行优化非常重要。

        一个简单的例子

示例1:默认情况下如何呈现段落标签。

在示例1中,我在容器内放置了三个未设置样式的段落(我给容器div设置了蓝色背景和橙色边框以突出显示差异)。

默认情况下,在Firefox中,您会看到第一段的顶部与容器div的顶部之间有一个空格,最后一段的底部与容器div的底部之间有一个空格。

默认情况下,这些空间不存在在Internet Explorer中。

        那么哪种浏览器是正确的,Firefox或IE?在你的段落和其他元素之间的间距看起来不一样,如果你不设置一个段落的margin和padding风格。

当然,这是一个简化的示例。实际上,CSS重置对于消除不一致的页边距,内边距,行高和其他属性(可能导致您的网页在各种浏览器上看起来有所不同)。

因此,这是重置样式的基本理论,这仅意味着您为所有元素设置样式规则,以避免浏览器为您完成样式设置。接下来,我们将在实践中进行讨论,但是首先介绍一下CSS重置如何成为现代Web开发人员的标准实践的历史。

        CSS重置的概念最初是在恐龙仍在Internet上漫游时(确切地说是2004年)正式讨论的,当时是Andrew Krespanis。在他的文章中,他建议在CSS文件的开头使用通用选择器(*)来选择所有元素,并为它们的margin和padding赋予0值,如下所示:
*{
margin:0
padding:0
};

        通用选择器的作用类似于通配符搜索,类似于编程中的正则表达式匹配。由于在这种情况下,*之前没有其他选择器,因此所有元素都是匹配项,因此,所有元素的所有边距和填充都被删除了(因此我们避免了空格差异如示例1所示。

将通用选择器的margin/padding重置应用于我们之前的示例,现在我们消除了所有浏览器之间所有不一致的间距(换句话说,我们没有让浏览器为我们考虑,而是告诉他们谁是老板)。

        示例2:应用通用选择器边距/填充重置

但是现在我们没有任何间距,段落之间,所以我们的地方普遍选择复位下面,我们声明的方式,我们希望我们的段落样子。您可以通过多种方式执行此操作–您可以在段落的开头或顶部或在这两者的前面加上边距(或边距)。您可以将ems用作单位或像素或百分比。

        重要的是我们选择浏览器呈现它的方式。对于我们的示例,我选择在段落的顶部和底部都添加边距(而不是填充),但这是我的选择,您可能想要以不同的方式进行。

这是我使用的:
*{
margin:5px 0 10px 0;
}

        此后不久,CSS专家进一步建立了重置边距和填充的概念。undohtml css,该样式不仅可以重置边距和填充,还可以重置行高,字体样式和列表样式(其他浏览器使用不同的项目符号)对于无序列表项)。

经过多次迭代和完善,我们得出了一个很棒的解决方案,称为 css重载,不仅通过命名所有可能的HTML标签使用更高的特异性,从而使该CSS重置方法比通用选择器方法更准确(因为通用选择器无法将重置应用于所有HTML标签),而且还为麻烦的元素,例如表格(其中border-collapse属性在浏览器之间不一致呈现)。

        当然,还有其他重置CSS的方法(例如,我目前在“六次修订”中使用的Yahoo!的YUI重置CSS),您可以根据自己的喜好和项目需求自行滚动。

现在,将CSS重置解决方案应用于自己的项目时,我们将学习一些技巧和最佳实践。

        应用CSS重置:提示和最佳做法

        1.首先要确定

上面,我向您展示了CSS Reset的两个极端。从使用通用选择器(我不建议您使用)的简单易用的方法,到使用Eric Meyer的的更复杂,复杂的方法。

我还简要地提到了YUI重置CSS,您可以直接使用它,从而不必提供它,从而在请求网页时节省了一些服务器资源。

没有预先确定的分步方法来确定正确的样式重置方式;重要的是它可以补充您自己的开发风格和原则。

在声明元素的样式规则后重设样式会使您感到困惑。您会不知所措,想知道为什么您声明的边距.some-class不起作用。因此,至关重要的是,浏览器首先看到的是CSS Reset。

现在笑,但这是生锈的退伍军人和新手开发人员中的常见错误。

        示例4::将CSS重置放置在错误的位置

为了方便起见,我在示例的HTML文档中有样式规则,以便您可以查看源代码并了解我的意思。

从本质上讲,您看到的是,即使我为<p>元素声明了边距,我的CSS Reset也将它们“重设”为0,因为它优先于我的初始样式规则声明。

        3.有一个单独的CSS文档用于CSS重置

我不得不提到这一技巧,因为它是一种常见的做法,也是许多人提倡的做法。

由于页面性能的原因,我位于一个Big CSS文件阵营,但是很常见做法是拥有一个单独的CSS文档(命名为reset.css之类的东西),您可以在整个项目中重复使用。这可以帮助您保持样式规则的组织性和模块化,但是更重要的是,它使更改和调整CSS重置变得更加容易,而不必返回到旧项目并进行更新。

        4.避免使用通用选择器复位

通用选择器重置是重置样式的第一个真实概念,但是它存在许多缺陷和浏览器不一致,使其成为一个糟糕的选择。

我已经提到IE并没有按预期应用和支持它。它并不能覆盖您的所有基础,您只应将其用于简单,简短,静态和可预测的网页。

当您分发诸如内容管理系统主题之类的“千篇一律”解决方案时,本技巧尤其适用,它将以不可预测的方式使用和破解。一开始就使用扎实的基础-广泛的CSS重置方法,确保您真正重置样式,并且值得在CSS文档中添加字节。

        5.避免CSS重置和后续样式声明造成重复

我不喜欢为CSS重置设置单独的样式表的另一个原因是,它可能会导致其后的其他样式规则出现冗余。最好不要重复您的样式,尽管有时无法避免,但您应该尝试一下。

 

[声明]本网整理的媒体稿件是为了分享更多的讯息。此类稿件不代表本网立场,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的某些内容侵犯了您的版权,请把您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。