问题 所有的表现形象都应该在CSS中定义吗?


我最近一直在学习(X)HTML和CSS,其中一个主要原则是HTML用于结构和CSS用于表示。

考虑到这一点,在我看来,大多数网站上的相当数量的图像仅用于呈现,因此应该在CSS中(使用div或span来将它们保存在HTML中) - 例如徽标,标题图像,背景。

然而,虽然我的书中的示例在CSS中放置了一些图像,但它们仍然经常出现在HTML中。 (我只是谈论'表现'图像,而不是'结构'图像,它们是内容的关键部分,例如照片网站中的照片)。

所有这些图像都应该在CSS中吗?或者是否有技术或逻辑上的理由将它们保留在HTML中?

谢谢, 格兰特


1580
2018-06-16 10:26


起源

好问题。我不时地想知道同样的事情。一般来说,如果它不是特定于页面的(图像按钮/链接除外),我会将所有内容都粘贴在CSS中,尽管我不知道如何处理徽标图形等内容。 - strager
徽标不是表现形式。他们传达信息。 - Quentin
这是一个公平的观点,在大多数情况下,徽标可能不是纯粹的表现形式。但我认为问题的重点仍然有效。 - Grant Crofton


答案:


如果图像是“内容”,则在报纸文章中说出编辑图像,然后使用img标签。如果它是你的UI,主题或皮肤或其他任何名称的一部分,那么是的把它放在CSS。

建议的读数

  • 使用Web标准进行设计(Zeldman)
  • 防弹网页设计(Dan Cederholm)
  • CSS掌握(Andy Clark,Andy Budd,Cameron Moll)

10
2018-06-16 10:43



我假设“UI”只表示UI的装饰部分。如果有例如用作链接的图像,那些应该是HTML格式。只有纯粹装饰性和内容无关紧要的图像才能放入CSS中。 - PauliL
我想真正的问题就是决定什么是内容。例如,我正在为婚礼制作礼物清单页面,其中包括一些项目的图片 - 不是内容的核心部分,但也可以说不仅仅是装饰。无论如何,这几乎证实了我最初的想法,似乎是最受欢迎的建议,所以你得到了答案! - Grant Crofton


将这些图像放在CSS中的一个原因可能是通过更改CSS来为同一网站上的不同浏览器提供服务:例如,如果您检测到移动/嵌入式/袖珍浏览器,则可以为它们提供相同的HTML但使用CSS不包括图像。


2
2018-06-16 10:29



您可以 display: none; 但是,在使用CSS的图像上。 - strager


如果可能的话我把它们放到CSS上。一个原因是我认为他们就像你提到的那样属于那里而另一个是可以使用的 精灵。这可以显着减少页面的加载时间。


1
2018-06-16 10:31





根据HTML 4.01 / XHTML 1.0 DTD,需要img标记的src属性。这就是为什么它应该总是包含在HTML中。

您可以在CSS中指定它以用于skining目的,但大多数情况下大多数图像都是静态的而且没有变化,所以将它放在CSS中是一个不必要的步骤。


0
2018-06-16 10:31



但是如果完全不使用img标签,只是(例如)有一个跨度,它在CSS中填充了一个图像?由于某些图像仅用于装饰,因此这似乎是HTML / CSS拆分所暗示的。同样,正如ChrisW建议的那样,根据观看者的类型,您可以拥有不同的图像或没有图像。 - Grant Crofton
你可以,但它只是重新发明图像标签,说实话。您(我认为)也不能使用对可访问性很重要的替代文本。 - Tom Gullen


这得看情况。例如,如果要在鼠标悬停在图像上时执行某些效果,则必须在HTML中。当您将图像放在HTML中时,您可以比在CSS中更自由地定位它。此外,据我所知,CSS包含的图像不会被抓取(您可能有兴趣让搜索者抓取您公司的徽标)。

如果考虑可访问性,HTML嵌入图像可以包含alt和标题信息。因此,例如,当您将鼠标放在公司徽标上时,如果您在img标记中嵌入了title =“motto”属性,则浏览器可以显示您公司的座右铭。你不能用CSS做到这一点。

人们习惯于将图像放在HTML而不是CSS中,行为很难改变。

总之,根据您的需求,CSS不够灵活,无法满足您的需求,您应该将图像放在HTML中。但如果CSS符合您对UI图像的需求,那么CSS就更好了。


0
2018-06-16 10:43



你可以用css滚动。实际上你有更多的可能性与CSS。例如,使用CSS sprites,您有一个包含正常和悬停状态的图像,堆叠。在css a:悬停中,你只需改变背景图像的位置等。 > CSS不够灵活......值得怀疑。这里有很多好书,例如“CSS Mastery” - redben
是的,我们同意翻车。如果你想在图像上进行翻转,你应该使用img:hover,并且(x)HTML上必须存在img标签。如果你想在图像上放置一个title属性,那么就没有办法在CSS上做到这一点,所以对于那个任务,CSS不够灵活。 CSS一般非常灵活,但对于某些特定任务来说灵活性不够。 - Matachana
没有我的意思与翻转是菜单滚动的东西,不要使用img标签。恩。 <a class="item-1" href="#">第1项</a>然后在CSS中你会有#item {background:url(...)左上角;} a.item:hover {background-position:bottm left;}现在在图像上放置标题意味着图像是内容,然后它应该用html加载内容,而不是来自css。这与css对某些特定任务不灵活无关。至少这是我的想法:) - redben
是的,我可以看到你来自哪里。我不知道任何一种方法的所有选项,但是像redben说的那样,似乎只有HTML中可用的东西(例如alt标签,标题)是你只想放在内容上的东西,而不是图像纯粹是装饰性的。 - Grant Crofton


有时,使用CSS加载UI图像也会阻止用户将UI图像下载到其驱动器,同时保存页面。

但当然还有其他方法可以保存它们,但只需添加一点。

并且浏览器倾向于优先于CSS而不是HTML,因此与HTML相比,通过CSS加载图像可能会快一些。


0
2018-06-16 11:40