【发布时间】：2009-01-06 20:48:54
【问题描述】：
我正在使用 Django 框架，并且对使用 Python 的后端逻辑非常满意，但困扰我的是我必须使用 CSS 的前端部分。如何轻松学习 CSS 的工作原理，或者有什么工具可以用来轻松地为 Django 创建前端界面？
【问题讨论】：
【发布时间】：2009-01-06 20:48:54
【问题描述】：
一个字。它会改变你的生活：FIREBUG.
作为一名 UI 开发人员，我通过反复试验学到了很多我所知道的知识。虽然可能有 10 种方法可以完成任何与 UI 相关的任务，但有比其他方法更好（和更有效）的方法。查看A List Apart。可能是我最喜欢的 UI/CSS 博客。
另外，为了了解浏览器如何呈现 HTML 的复杂性，总是在尽可能多的浏览器中检查您的设计。避免使用浏览器黑客。你真的不必使用它们；如果浏览器出现问题，那么您应该重新考虑将事物组合在一起的方式。在任何时候，我都会在我的 PC 上打开 Firefox 3、IE6、IE7 和 Safari/win，检查我的所有工作。
另一个学习的好方法是挑战自己：在某个地方找到一些免费的设计，并尝试使用无表格布局来模拟它们。熟悉浮动和边距的概念。请记住始终使用文档类型！
【讨论】：
-
BrowserShots 非常适合在您满意后检查您的工作（尽管不能替代在本地安装大量浏览器。）
sitepoint 或w3 schools 有一些很好的在线教程。
【讨论】：
-
+1 因为我不明白为什么这被否决了。似乎是一个合理的回应。
-
是的，当我来到这里时，我也对 -1 感到有些困惑。
-
我是反对者。众所周知，w3 学校是不准确的。示例：xrl.us/bfxwd 使用非标准
-
我发现他们的教程非常有用，老实说，我一点也不听命。也许你可以换个说法。
-
如果您阅读 w3schools，请不要忘记查看w3fools.com（我希望，这听起来不像是命令）
CSS 本身相当容易理解，其他答案指出了很多好的 CSS 资源。真正的挑战是了解每个浏览器中的所有怪癖和错误，这需要花费大量时间。
您绝对应该花时间学习 CSS 的工作原理，但作为新手，如果您想现在就开始，不用担心很多问题，我建议您使用所谓的 CSS 框架之一。
这里有一些比较知名的：
- Yahoo! UI Library: Base CSS
- Bluetrip
- Blueprint
- Emastic
- YAML（不要与数据标记语言混淆）
- 960 Grid System
我已经成功地将 Blueprint 和 Emastic 模板用于 Django。
雅虎！ YUI 网格还有一个额外的优势，那就是有一个 Django 应用程序专门设计用于在 Django 中使用 YUI 网格，称为 django-yui-layout-templates
如果您从这些框架之一开始，您可以现在构建网站，然后随着时间的推移逐渐开发您自己的 CSS，随着您了解这些怪癖。
【讨论】：
我唯一的建议是破解伟大的网站。如果你喜欢这个设计，那就破解它。 使用 firebug 是一个很大的进步，因为它为您提供了计算的 CSS。
但是，真正学习 CSS 绝非易事。很抱歉告诉你。
【讨论】：
通过访问CSS Zen Garden，我学到了很多关于 CSS 的知识。灵感和学习资源集中在一处。
【讨论】：
Web Developer toolbar for Firefox 中的“编辑 CSS”功能允许您编辑文件的 CSS 内容并实时查看结果。它使实验变得更快、更容易。
当您创建了出色的样式表后，请在 Internet Explorer 中查看它，哭泣，然后开始学习如何制作跨浏览器 CSS。一个好的起点是quirksmode。
【讨论】：
我不得不承认这是很多尝试和错误。有时有很多方法可以实现您所需要的……有些方法比其他方法更“合适”。 CSS Zen Garden 是我发现的第一个真正帮助我自己头脑中的事情的网站之一。查看设计、查看源代码、查看设计等...
我很欣赏的几本书是Dan Cederholm's Bullet Proof Web Design和
安迪·巴德的CSS Mastery
两者都提供了可靠的方法来完成一些常见的技术和您在使用基于 css 的设计时会遇到的问题。
【讨论】：
- 首先，the spec
- 玩转（使用 Firebug）
- 四处寻找 IE 解决方法和其他技巧。
- 如果您想要印刷的东西，我真的很喜欢 Dan Cederholm's Web Standards Solution，尽管我讨厌大多数技术书籍
- 练习！实践！练习！
【讨论】：
我读过的关于 CSS 和 HTML 的最好的书是 Zeldman 的 Designing with Web Standards
Zeldman 涵盖了 HTML 和 CSS 的历史方面以及将基于表格的网站转换为语义 CSS。他还介绍了 Web 标准、优雅降级和浏览器怪癖。它通常被认为是现代 Web 开发的“圣经”。
之后我会推荐 Dan Cederholm 的书 Web Standards Solutions 和 Bulletproof Web Design
【讨论】：
我有 Mike McGrath 写的“CSS in easy steps”一书。它有很多图片可以直观地解释发生了什么。这对于深入了解 CSS 非常方便。学习基础知识后，与人交谈或在线阅读示例会很有帮助。我发现自己要去 IRC (Freenode) 上的#css 寻求帮助。他们在那里非常有帮助。
【讨论】：
如果您在 Mac 上开发，CSSEdit 将为您节省大量时间。
【讨论】：
this question有更多学习CSS的建议。
【讨论】：
CSS 并不是那么简单——它在概念上有点独立。
如果您深入研究，CSS: The Definitive Guide 非常值得。
【讨论】：
我第二（第三？）建议使用Firebug。它会保持你的理智。
我读过的一本关于 CSS 设计的好书是 Wyke-Smith 的 Stylin' with CSS。也许这不是最好的标题，但内容和表现都很棒。每当我需要深入研究样式表时，我都会将副本放在手边。
【讨论】：
最好的方法是改变你的想法。
阻止大多数人使用 CSS 的原因是认为它是一种“样式化”语言，而不是您用来构建和构建基于 Web 的 UI 供人们使用的方式的语言。
以正确的方式看待 CSS 可以极大地帮助您获得对它的热情。并且最终会导致您比其他方式了解更多。
本文详细阐述了这个总体思路：How To Get Better At CSS
【讨论】：
好吧，根据我的想法，Eclipse 是每个编码工作最需要的工具。
这个工具只是改变了我的编码生活。所以我 100% 建议你在编码时使用这个工具。它适用于任何平台：PHP、HTML、CSS，所以无论是什么，这都是一个显而易见的工具。
关于此工具的最重要的 cmets 之一是它会告诉您是否会发生错误。
假设您编写了少量 CSS 代码并犯了一个错误。然后它会告诉你错误发生在哪里。
body
{
background-color: #D0E4FE
}
h1
{
color: orange;
text-align: center;
}
p
{
font-family: "Times New Roman";
font-size: 20px;
}
在上面的代码中，我没有在 background-color 行中添加分号。应该是这样的。
背景色：#D0E4FE；
如果发生此错误，此工具会显示一条询问错误的消息。所以这是一个很棒的工具。
嗯，另一种方式是W3Schools CSS。这是一个更好的学习场所。
【讨论】：
-
w3schools 是一个糟糕的参考。请避免！