Question

在制作CSS布局XHTML代码或CSS代码时应首先编写什么内容？

首先编写整个HTML然后编写 CSS根据HTML
为设计元素和HTML编写HTML 同时使用CSS
先写整个CSS然后再写 HTML根据HTML

I read on this article's point # 7 “先创建HTML”这个建议最好遵循？

编辑：

and in this tutorial author also write HTML First then write css using Edit CSS option of web developer toolbar我认为这是最好的方式。

Answer 1

在实践中，你通常需要将两者混合在一起。从HTML开始粗略设计的基本区域，然后围绕这个粗略的想法在CSS中工作。通常，您会发现自己需要添加更多标记以提供额外的灵活性（可能需要一些嵌套容器才能正确对齐某些内容，等等。）

Answer 2

在设计网站时，我过去常常思考这个问题。

我的结论是，我相信它仍然存在，即使XHTML和CSS分别作为内容和呈现彼此隔离，事情的现实仍然使网站的外观几乎取决于在文档结构上 - 即标记，XHTML - 因此单独的CSS不会给你魔术棒，使你的网站完全基于样式表改变它的外观。我希望它是如此 - 当然，这是CSS的主要目的。当然，这将是它的美丽 - 因为每个都完全与另一个隔离，网站开发人员可以安心地编写网站文档的结构，几乎在CSS作者可以并行工作并编写样式表。然后两者结合起来，并且知道标记不需要再次更改。无论如何，这就是理论。

在实践中，这通常无法工作 - 因为文档具有从上到下从左到右（通常）绑定的语义，例如，变得难以使元素出现在文档结构的底部，出现在用户的浏览器页面顶部。这些限制违背了理论。

由于上述含义以及CSS和标记技术的其他一些现实限制，我决定将标记视为内容和样式之间的内容。即不幸的是，一些标记会决定风格，无论是样式表 - 元素的顺序是一个（见上文），分页限制等等 - 因此，虽然大部分结构可能与其外观隔离，但这种外观的某些部分将是由它决定。出于这个原因，如果我们不考虑客户端脚本（可能通过重新排列文档的元素来辅助样式） - 一种方法是使用XML作为内容，XHTML作为内容样式的混合层，和CSS最终决定外观。

XML在哪里？好吧，你使用XSLT将它（在浏览器或服务器端）转换为XHTML文档，您认为它在样式化过程中是相关的。即如果您有1000个条目的艺术家列表，并且您想要自定义页面的外观，则使用以下内容XML：

<artists>
    <artist name="Moby" />
    <artist name="Cocorosie" />
    <!-- and so on -->
</artists>

这被认为是一个不变的内容，无论最终的风格 - 将内容与演示文稿分开的部分内容，你无法完全使用XHTML，因为CSS不能做某些事情。但是，使用XSLT，您可以进一步将上述内容转换为所需的标记（然后可以应用CSS）：

<xsl:transform>
    <!-- XSLT is beyond the scope of this... -->
</xsl:transform>

将XML转换为：

<h1>Artists</h1>
<h2>Page 1 of 10</h1>
<ul>
    <li><a>Moby</a></li>
    <!-- Only 100 artists per page -->
</ul>

然后你设计它。

Bottomline是，您可以控制原始数据库内容转换为最终最终用户应用程序的每个点。

XSLT对XML的大部分功能可以通过XHTML上的JavaScript完成，但我认为客户端脚本是一个补充，而不是替代XSLT之类的东西。然后，Firefox和大多数其他现代浏览器都可以进行XSLT客户端，这模糊了脚本和文档服务之间的区别。

Answer 3

我认为在另一个之前做一个是错误的。编程是一个迭代过程。把它们都写下来，直到你有一些有用的小东西，然后再做一遍。建立在它上面。迭代。

如果您只是编写HTML而不编写任何CSS，那么稍后您会发现您将需要支付大量技术债务。

Answer 4

这真的取决于你的网站有多大......如果它是一个小网站，订单无关紧要。如果它是一个大型网站，我通常在HTML中设计基本结构，然后是基本CSS，然后转移到HTML中的细节，然后是CSS。

很少有建议。

重新使用已经制作的CSS和HTML。即。如果你已经有模板使用基本HTML包装器保存它用于下一个项目或页面或如果您将所有图像设置为 border：你可以在你的CSS中没有轻松保存一些CSS文件基本设置
之前看到你头上的一个物体设计它
检查5个主流浏览器（即6 ie7 ie8 chrome和firefox）

Answer 5

我通常选择第二种方式：

为设计元素和HTML编写HTML CSS同时

这确实有帮助，例如，当我编写html时，我也会编写CSS，这有助于我快速发现任何可能的布局或跨浏览器兼容性问题。如果我首先编写完整的html然后再写css，那么事情变得有点复杂，你很难纠正/设置你已经创建的整个html。

至于你提供的链接，我只想说作者有自己的观点和个人的工作方式。换句话说，这也取决于你最熟悉或更快的方式。

Answer 6

在编写HTML之前你不能编写CSS（正文标记除外），或者你会像盲人一样工作。

对我来说，我会对网站布局进行模拟，记下整个HTML，然后编写仅用于布局的CSS。

我使用Expression设计来切割图像并添加/修改HTML / CSS，直到我得到最终模板。

Answer 7

我不喜欢用代码来回的想法。如果我在html中#header，那么现在对标题进行样式化似乎是合乎逻辑的。对我的心理健康有益：D

所以我选择第二个选项：我同时编写代码。

Answer 8

你必须在CSS之前写HTML。

你的问题是，在开车之前设计汽车内饰是否更好？

有可能吗？或者这是一项聪明的工作吗？

Answer 9

鉴于大多数设计并不简单，并且遵循基本的语义规则，在尝试按照您的想法设置布局时，您始终需要调整html代码。所以同时做两件事可能是最实际的方式，尽管其他两个选项也适用;你只需要稍后进行调整。

Answer 10

对不起，我没有选择其中任何一个......

首先，您无法为您的网页编写整个CSS。虽然你应该在first.ie中编写常见的css类和页面布局，但是在创建页面布局之后，你只需使用table或div标签设计页面。之后，在向页面添加控件时，您只需识别您正在使用的常用样式。您可以使用这些样式，如css类。或单独的身份证明。我正在按照这种方法进行设计。

我觉得它更好。

Answer 11

首先创建HTML，你可以保证在最基本的浏览器上页面会是什么样子 - 它在旧手机上是清晰的，一切都按逻辑顺序排列，你不会强迫屏幕阅读器背诵你的网站导航每个页面上的第一件事。这是设计＃1。

设计＃2是CSS部分，在这种情况下，您可以在不限制用户群的情况下使其看起来更加体面。

不是说它们不能同时完成，请注意。这很可能就是那篇文章的作者试图了解的内容。

另请参阅：Progressive Enhancement。

Answer 12

我首先亲自编写大部分CSS，然后是HTML，然后将两者一起调整 - 一次一页（除了常见元素）。起初它听起来反直觉，但是当你把CSS看作不仅仅是样式而是作为具有风格或没有任何风格的元素时，它实际上非常快并且产生精益代码。

一旦我有了一些核心样式，HTML就只是......的问题了。

<wrapper>
<div header>
<div this>
<div that>
<form>
<div footer>

...而且所有的插槽大致都是我已定义的样式和布局。对于不需要样式的元素，我在编写CSS时只是在心理上跳过了。

Answer 13

我的3美分：

网页的目标是什么？大多数时候，目标与其内容密切相关。

因此，首先是内容。 HTML为内容提供了它的语义。 CSS为语义提供了一个上下文。

顺序：

含量
HTML
CSS

但当然，这是一个迭代过程。

Answer 14

我在模块中迭代地同时写它们。

我将在html / css中构建通用模板（或基本模板），进行完整的跨浏览器测试，然后转到其他模板。

这与.net非常吻合，我正在使用母版页和嵌套母版页。

一旦IE6脱离书本，我可能会改变这种行为，因为你经常需要完全重组你的标记以适应它。

Answer 15

我会选择第二个选项。今天的web开发中的HTML被视为保存内容的模板。 CSS应该用于格式化网页中的布局和内容。

因此，HTML和CSS应该在创建网页和单个元素时并行使用。

首先应该写什么，XHTML还是CSS？

编辑：

15 个答案: