面向开发人员的CSS / HTML教程/书籍

Question

我是一名偶尔编写CSS / HTML代码的软件开发人员。我目前正在开发一个应用程序，它需要一个非常复杂的基于html / css的布局，我觉得我不了解CSS / HTML布局足以实现它。您可以向我推荐哪些书籍和教程来提高我的技能？

P.S。我理解块和内联元素之间的区别是，浮点数等等，但我缺少的是它是如何工作以及如何在html / css中布局任意内容的连贯图片。

P.P.S。之前我曾尝试过几本书，他们要么有参考手册格式（如：http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040），要么包含我已经知道的信息，例如w3schools的大部分基本教程，大多数关于亚马逊假人的书籍等，或者更糟糕的是设计师导向。我不需要阅读颜色等，我只需要学习如何在HTML / CSS中进行布局，就像我在Java / Swing或其他类似框架中那样。

Answer 1

让我先说一下，我更喜欢在线查找参考资料（我将我的知识存储在云中），而不是全心全意地学习可能出现的css属性的书籍完全脱离背景;与此同时，我发现深入阅读更高级别的理论和指南更有益，无论是专题文章还是书籍。

您是否获得了全面的样式指南或者甚至是一些模型，现在由您决定是否将其变成html + css？在这种情况下，我建议

• Handcrafted CSS: More Bulletproof Web Design - 最重要的是，涵盖了更多＆＃34; hip＆＃34;像液体布局这样的技术让你对优雅降级的概念感到满意（这意味着IE6和FF10应该不提供相同的体验）。从长远来看，这可以为您节省头痛和心碎 - 我很受欢迎，一位同事将其带到了海外...八个月
• CSS: The Missing Manual和HTML, XHTML and CSS Bible - 相当深入，那里的材料尚未过时。我建议首先阅读花车（不管以前的经验多少怪癖），无论哪个章节都会填补你认为有的知识空白，如果有的话。除此之外 - 用作参考。
• 对于一般概念很舒服，但需要查看偶尔的财产？首先， w3schools是邪恶的 - 改为使用MDN。不相关：非常棒的JS参考以及您目前正在使用的CSS / HTML。
• 将quirksmode和caniuse添加为书签，这样当主要浏览器突然拒绝正确呈现您的轮廓代码时，您将不会被放回太远。
• 那里的研究框架。如果设计适合，网格系统将是节省时间的绝佳方式;使用jQuery-UI或formalize，您可以为您解决常见的恐惧（看着你，表单布局！）。

如果您想深入挖掘并更好地理解成功产品背后的设计原则和可用性概念，或者您还没有提出线框/页面模型等，那么阅读列表会扩展：

• The Non-Designer's Design Book - 如果我可以投票一百次，我愿意。没有水，易于理解的章节，专注于设计基础（对比，重复，对齐，接近），最终有助于一致，可读的网站（或印刷媒体）
• 你还想要更多？阅读Universal Principles of Design - 我们现在偏离＆＃34; general＆＃34;设计领域，但大多数想法都是可转移的。
• 我将使用Don't Make Me Think!: A Common Sense Approach to Web Usability完成列表。正是这样。

请记住stackoverflow - 如果您遇到问题，有人可能已经解决了这个问题：）

Answer 2

我建议阅读http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/。

这不是一篇小文章。这是一篇非常细致，经过深思熟虑的文章，描述了浏览器的几个方面。您可能会对以下内容感兴趣：

• Chapter 5 - 布局（尤其是结尾）
• Chapter 9 - CSS2视觉模型（所有部分）

Answer 3

我建议你看看这个教程

• https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

这是一个为期30天的Jeffrey Way HTML / CSS课程，他以非常好的方式解释了你需要的一切，最好的是什么，它是免费的（你需要注册一个免费帐户，目前在右上角）。

替代：

• http://www.quackit.com/html/tutorial/
• http://www.csstutorial.net/

但是在网上学习html和css有很多资源。

Answer 4

如果您想了解 CSS 布局的工作原理。谷歌有一个很好的教程

http://code.google.com/edu/submissions/html-css-javascript/

＆安培;正如你所说，你知道什么是 CSS 。因此，最好学习如何避免初学者所犯的常见错误。有几篇关于此的文章。很少：

http://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid

http://www.designdetector.com/2006/06/ten-common-css-mistakes.php

Answer 5

您想了解的关于html / css的任何内容都在W3C

上

CSS Tricks also have some good reading material

Answer 6

我更喜欢课本。你可以使用postit notes将页面标记放入其中（任何你可以在厕所上阅读它们。）。

至于一个用于CSS - CSS缺少的手册我发现相当不错

HTML - Nutshell书籍（我总是觉得很好）很好。

Answer 7

了解DOM（文档对象模型）的工作原理。最重要的是要知道html代码是从上到下解析的，这也是你对位置元素的了解也会派上用场的地方。考虑到这一点，构建布局将非常容易，并且如果您记住网格状结构也是如此。另请阅读有关辅助功能的最佳做法。

我还在IBM developerworks网站上阅读了一些很好的技术文章/教程/等。

您需要的一切都在Google上，我认为只需使用正确的关键字：）