我最近一直在学习(X)HTML和CSS,其中一个主要原则是HTML用于结构和CSS用于表示。
考虑到这一点,在我看来,大多数网站上的相当数量的图像仅用于呈现,因此应该在CSS中(使用div或span来将它们保存在HTML中) - 例如徽标,标题图像,背景。
然而,虽然我的书中的示例在CSS中放置了一些图像,但它们仍然经常出现在HTML中。 (我只是谈论'表现'图像,而不是'结构'图像,它们是内容的关键部分,例如照片网站中的照片)。
所有这些图像都应该在CSS中吗?或者是否有技术或逻辑上的理由将它们保留在HTML中?
谢谢,
格兰特
如果图像是“内容”,则在报纸文章中说出编辑图像,然后使用img标签。如果它是你的UI,主题或皮肤或其他任何名称的一部分,那么是的把它放在CSS。
建议的读数
- 使用Web标准进行设计(Zeldman)
- 防弹网页设计(Dan Cederholm)
- CSS掌握(Andy Clark,Andy Budd,Cameron Moll)
将这些图像放在CSS中的一个原因可能是通过更改CSS来为同一网站上的不同浏览器提供服务:例如,如果您检测到移动/嵌入式/袖珍浏览器,则可以为它们提供相同的HTML但使用CSS不包括图像。
如果可能的话我把它们放到CSS上。一个原因是我认为他们就像你提到的那样属于那里而另一个是可以使用的 精灵。这可以显着减少页面的加载时间。
根据HTML 4.01 / XHTML 1.0 DTD,需要img标记的src属性。这就是为什么它应该总是包含在HTML中。
您可以在CSS中指定它以用于skining目的,但大多数情况下大多数图像都是静态的而且没有变化,所以将它放在CSS中是一个不必要的步骤。
这得看情况。例如,如果要在鼠标悬停在图像上时执行某些效果,则必须在HTML中。当您将图像放在HTML中时,您可以比在CSS中更自由地定位它。此外,据我所知,CSS包含的图像不会被抓取(您可能有兴趣让搜索者抓取您公司的徽标)。
如果考虑可访问性,HTML嵌入图像可以包含alt和标题信息。因此,例如,当您将鼠标放在公司徽标上时,如果您在img标记中嵌入了title =“motto”属性,则浏览器可以显示您公司的座右铭。你不能用CSS做到这一点。
人们习惯于将图像放在HTML而不是CSS中,行为很难改变。
总之,根据您的需求,CSS不够灵活,无法满足您的需求,您应该将图像放在HTML中。但如果CSS符合您对UI图像的需求,那么CSS就更好了。
有时,使用CSS加载UI图像也会阻止用户将UI图像下载到其驱动器,同时保存页面。
但当然还有其他方法可以保存它们,但只需添加一点。
并且浏览器倾向于优先于CSS而不是HTML,因此与HTML相比,通过CSS加载图像可能会快一些。