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

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

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

初学者经常犯的错误:

CSS也是语义的.尝试表达概念,而不是格式.举例:

错误:

div.red
{
    color: red;
}

而不是:

好:

div.error
{
    color: red;
}

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

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

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

用HTML布置页面的语义结构.确保它没有任何CSS是正确的.

在CSS中创建页面的基本布局 - 列,标题,浮动框.

添加排版 - 字​​体,大小和颜色.

添加图形元素 - 背景图片,徽标等

在您的页面上放置一个链接到W3C CSS验证器(如果您的站点在互联网上可见)并且经常打击它.

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

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

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

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

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

   
Nav Item
   
Nav Item


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

这是不必要的复杂,你会发现自己很快就会用完好的语义描述.你最好用以下的东西:

  
Nav Item
  
Nav Item


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

通过了解特异性,您可以省去很多头痛.当您为某事设置规则时,如果存在冲突规则,则特异性决定哪个规则获胜.

一个快速(不完整)的纲要:

元素范围的规则(如p {color:green;})将胜过:
特定于类的规则(如p.sidenote {color: blue;}),它将被
特定的:特定于id的规则(如p#final {color: red;}),将由以下内容组成:
内联声明(如

),这将是
一个重要的规则(如p#final {color: inherit !important;})

......所有这些都可以被用户的规则所压倒.

这种相互作用可能很复杂,但它们背后有数学规则.有关更完整的治疗,请参阅Eric Meyer的"CSS:The Definitive Guide"的第3章.

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