是否应该在CSS中定义所有表示图像？

我一直在学习（X）HTML & CSS最近，其中一个主要原则是HTML是用于结构和CSS的演示。是否应该在CSS中定义所有表示图像？

考虑到这一点，在我看来，大多数网站上的相当数量的图片仅用于演示文稿，因此应该放在CSS中（使用div或跨度将它们保存在HTML中） - 例如标志，标题图片，背景。

但是，虽然我的书中的示例在CSS中放置了一些图像，但它们仍然经常处于HTML中。（我只是在谈论'呈现'的图像，而不是'结构'的内容，这是内容的关键部分，例如照片网站中的照片）。

所有这些图像应该在CSS？或者有技术或逻辑的理由让他们在HTML中？

感谢，格兰特

来源

2010-06-16 Grant Crofton

不错的问题。我不时想着自己同样的想法。一般来说，如果不是页面特定的（除了图片按钮/链接），我会将所有内容粘贴到CSS中，尽管我不知道如何处理诸如徽标图形之类的东西。 – strager 2010-06-16 10:28:13

徽标不是表示形式。他们传达信息。 – Quentin 2010-06-16 11:43:47

这是一个公平点，在大多数情况下，徽标可能不是纯粹的表象。但我认为问题的重点仍然有效。 – 2010-06-16 11:56:48

如果一个图像是“内容”在报纸文章中说，编辑图像，然后使用img标签。如果它是你的用户界面，主题或皮肤或名称的一部分，那么是把它放在CSS中。

推荐阅读

设计与Web标准（Zeldman）
防弹网页设计（达恩·塞德霍姆）
CSS掌握（安迪·克拉克，安迪·巴德，卡梅伦莫尔）

来源

2010-06-16 10:43:40 redben

我假设通过“用户界面”，你只是指用户界面的装饰部分。如果有例如用作链接的图像，则应该使用HTML。只有纯粹装饰性和对内容无关紧要的图像应放入CSS中。 – PauliL 2010-06-16 12:32:17

我想真正的问题，然后成为决定什么是内容。例如，我为婚礼制作了一个礼物列表页面，其中包含一些项目图片 - 不是内容的核心部分，但也可以说不仅仅是装饰。无论如何，这几乎证实了我原来的想法，似乎是受欢迎的建议，所以你可以得到答案！ – 2010-06-16 13:01:45

一个原因就摆在CSS这些图像可能是来自同一网站服务于不同的浏览器，只需通过改变CSS：例如，如果检测移动/嵌入式/袋浏览器，你可以给他们相同的HTML，但不包含图像的CSS。

来源

2010-06-16 10:29:31 ChrisW

尽管如此，您可以使用CSS在图像上显示：无; – strager 2010-06-16 11:08:00

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

你可以在CSS中指定它作为滑雪的目的，但大多数情况下大多数图像是静态的而且是不变的，所以把它放在CSS中是一个不必要的步骤。

来源

2010-06-16 10:31:03

但是如何将img标签完全取出，并且只有（例如）跨度，在CSS中填充了图像？由于某些图片仅用于装饰，这似乎是HTML/CSS拆分所提示的。就像ChrisW所说的那样，根据观察者的类型，你可以有不同的图像或没有图像。 – 2010-06-16 10:37:23

你可以，但它只是重新发明图像标签说实话。你也（我认为）不能使用对可访问性来说很重要的替代文本。 – 2010-06-16 11:09:31

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

来源

2010-06-16 10:31:55

嗯，这取决于。例如，如果您想在鼠标悬停在图像上时执行一些操作，它必须位于HTML中。当你把图像放在HTML中时，你可以比CSS更自由地定位图像。此外，据我所知，包含CSS的图像不会被抓取（您可以对搜索者抓取您公司的徽标感兴趣）。

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

此外，人们习惯于将图像放入HTML而不是CSS，行为是一件很难改变的事情。

最后，根据您的需求，CSS不够灵活以适合您的需求，您应该将图像放入HTML中。但是，如果CSS符合你对UI图像的需求，那么CSS是更好的主意。

来源

2010-06-16 10:43:45 Matachana

你可以用css做翻滚。其实你有更多的可能性与CSS。与CSS精灵例如，你有一个图像包含正常和悬停状态，堆叠。在css a：hover中，您只需更改背景图像的位置即可。 > CSS不够灵活...可疑。有很多关于此的好书籍，例如“CSS精通” – redben 2010-06-16 11:07:29

是的，我们同意翻阅。如果你想在图像上进行翻转，你应该使用img：hover，并且img标签必须出现在（X）HTML上。如果你想在图像上放置一个title属性，那么在CSS上没有办法做到这一点，所以对于这个任务CSS不够灵活。一般来说CSS非常灵活，但对于一些特定的任务来说还不够灵活。 – Matachana 2010-06-16 11:22:19

没有我的意思翻转是像菜单翻滚，不要使用img标签。 ex。 item 1然后在CSS中，你会有类似于 #item {background：url（...）左上角;} a.item：hover {background-position：bottm left;} 现在将标题放在图像上意味着图像是内容，那么它应该加载形式与内容的HTML，而不是从CSS。这与css在某些特定任务中不灵活无关。至少这是我的想法:) – redben 2010-06-16 11:41:56

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

但当然还有其他的方法来保存它们，但只是添加一点。

浏览器倾向于比CSS更优先考虑CSS，所以通过CSS加载图片可能比HTML更快一些。

来源

2010-06-16 11:40:42 Starx

是否应该在CSS中定义所有表示图像？

回答

相关问题