Question

我目前正在开设第一个网站。我不知道从哪里开始在CSS页面上，或者我是否应该遵循任何标准。

我很感激任何链接或第一手的建议。

Answer 1

初学者经常犯的错误：

CSS也是语义。尝试表达概念，而不是格式。举例：

错误：

div.red
{
    color: red;
}

而不是：

好：

div.error
{
    color: red;
}

CSS应该是您在网站上使用的概念的格式化伴侣，因此它们应该反映在其中。这样你会更加灵活。

Answer 2

除了其他答案中指出的大量资源之外，这里有一些提示来构建你对CSS的工作方式：

按以下顺序完成工作......

以HTML格式布置页面的语义结构。确保它没有任何CSS是正确的。
- 在CSS中创建页面的基本布局 - 列，标题，浮动框。
- 添加排版 - 字体，大小和颜色。
- 添加图形元素 - 背景图片，徽标等

将页面上的链接添加到W3C CSS validator（如果您的网站在互联网上可见），并经常点击它。

将所有样式保留在HTML之外。

拥有IE6 / 7/8，FF2 / 3和Chrome / Safari是件好事。歌剧也会很好。在工作时不断更改您打开页面的浏览器（除非您正在深入研究特定的浏览器问题： - ））。

添加评论每条规则的作用和原因。保持签入CSS的开发版本并在完成后，删除注释和空格并将多个规则压缩为一个用于生产。

更新：正如Bobby Jack所说，我错过了提及调试工具。您可以使用IE Developer Toolbar（对于IE）或Firebug（对于FF）或Chrome中的集成检查工具来检查应用于特定元素的规则，或者动态修改元素的样式。

Answer 3

拒绝过度指定类或ID名称的冲动。使用上下文或后代选择器。这样您就可以轻松地为页面区域定义样式，但除了必须管理和记住大量名称之外，还要节省成本。例如：

<ul id="nav">
   <li class="navItem"><span class="itemText">Nav Item</span></li>
   <li class="navItem"><span class="itemText">Nav Item</span></li>
</ul>

#nav { }
#nav .navItem { }
#nav .itemText { }

这是不必要的复杂，你会发现自己快速耗尽了良好的语义描述。你最好用以下的东西：

<ul id="nav">
  <li><span>Nav Item</span></li>
  <li><span>Nav Item</span></li>
</ul>

#nav {}
#nav li {}
#nav li span {}

Answer 4

你可以通过理解特异性来为自己节省很多麻烦。为某事物设置规则时，如果存在冲突规则，特异性决定哪个规则获胜。

快速（不完整）纲要：

元素范围的规则（如p {color:green;}）将胜过：
特定于类的规则（如p.sidenote {color: blue;}），将由以下方面胜过：
特定于身份的规则（如p#final {color: red;}），将由以下方面胜过：
内联声明（如<p style="color: orange;">），将由以下方面胜过：
一条重要规则（如p#final {color: inherit !important;}）

......所有这些都可以被用户的规则所打破。

交互可能很复杂，但是它们背后有数学规则。有关更完整的治疗方法，请参阅Eric Meyer的“CSS：The Definitive Guide”第3章。

回顾一下：如果您设置规则并且它似乎没有影响任何内容，那么您可能会遇到冲突的规则。要理解为什么一条规则胜过另一条规则，请了解特异性。

Answer 5

我的第一个提示是始终只使用外部样式表 - 尽量避免使用内联或标题样式。

尽可能使用类和ID。

我接受了A List Apart

的建议

虽然不是很漂亮，有时候有点旧，HTML Help by WDG有一些很好的参考。

Quirksmode.org有一个很棒的css兼容性表。

Answer 6

关于你提出的问题，你已经得到了一套很好的答案，这是你可能会觉得有用的一点。

将Firefox与Firebug扩展一起使用。如果您没有Firefox，我建议您安装它，即使只是为了这个。 Firebug允许您从页面中选择元素并显示您应用的CSS。然后你可以使用fire bug编辑这个css，而不需要任何页面重新加载。一旦您对某个样式感到满意，您就可以轻松地将定义从firbug复制到您的css编辑器中。

至少对我来说，使用样式时，firebug是绝对必要的。

css本身的一些提示。定义样式时，仅在相关元素是唯一的时才使用id。这样你的风格就可以重复使用了。使用分层定义，例如。 #header .navigationElement a{color:red;}和#footer .navigationElement a{color:black;}这样你可以移动你的HTML代码并自动应用正确的样式。

Answer 7

如果这是你的第一个网站并且你正试图去CSS路线那么你应该阅读CSS布局和CSS盒子模型。了解如何使用块元素进行布局并远离表格进行布局。

我建议的另一件事是您使用FireFox进行所有主要开发，并使您的网站工作，并在FF中查看您希望如何。然后启动IE并修复任何古怪的IE有问题。如果你这样做的话，你最终会得到一个更干净的网站和更干净的CSS。

Answer 8

不完全是初学者材料，但A List Apart是关于CSS及其复杂性的非常有趣的博客。

我发现W3学校的pages on CSS非常适合参考。

Answer 9

这是一个不错的概述：

http://www.onlinetools.org/articles/cssguides.html

Answer 10

很多人都有一些很好的建议。我想知道他们说的是什么代码。

我强烈建议您使用reset.css样式表：

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

复制并粘贴或只保存链接到的那个。

此外，我早期使用的一个错误是使用<div id="">与<div class="">相关联。 id =“”只能使用一次（永远不会有两个<div id="content">），而你可以拥有数千个class =“”（如<div class="box">）。

此外，拥有多个同名的id是无效的html

Answer 11

如果这是你第一次，祝你好运！

我不确定作为初学者，您需要广泛或详尽的资源。慢慢来，尽一切可能保持代码可读。间距，间距，间距。

使用外部样式表（上面有人说）并且现在听起来很好，不要继续为网站的不同部分添加新的样式表。这将使你的生活变得更加轻松。

Answer 12

我只需提及css Zen Garden作为灵感来源。

Answer 13

看一看 CSS Systems for writing maintainable CSS的娜塔莉·唐恩ClearLeft。她的演讲中有很多很棒的概念（我建议下载PDF因为她的笔记很详细）。

我认为她的演讲针对全职CSS开发人员比初学者更多，但即使是初学者也可能需要花费很多时间。

Answer 14

我从麦克法兰的“失踪手册”（Oreilly书）中学到了我需要知道的东西，并盯着sample rails' app's样式表。这非常有效，谷歌“示例/示例项目/应用程序/存储库”适用于PHP，ASP.net，无论您使用什么。

Answer 15

如果你使用重置脚本 - 它会消除不同浏览器之间的一些怪癖。这样做让我的生活更轻松。

我看到有些人只是使用

发誓

* { padding: 0; margin: 0; }

但是你也可以使用更全面的实现 - 比如YUI库中的实现...... http://developer.yahoo.com/yui/reset/

在测试您的网站渲染时 - browsershots.org非常有用。

webdev firefox插件非常出色 - CTRL + SHIFT + E允许您编辑css，并即时查看更改。如果你按CTRL + F，你也可以将鼠标悬停在一个元素上，找出它是什么。

要添加其他人提到的网站 - 我发现http://css-discuss.incutio.com很有用。 Freenode #css也很方便。

Answer 16

Complete CSS Guide on westciv.com有关于CSS的详尽信息。这是一个开始潜水的好地方。

Answer 17

我已经建立了5年的网站，并且经常通过阅读这一点来学习很多东西：http://code.google.com/speed/page-speed/docs/rendering.html

另请查看有关CSS的http://www.zeldman.com博客。这个家伙是网络世界的传奇。

在编写我的第一个样式表时是否应该遵循CSS标准？

17 个答案:

错误：

好：