在编写第一个样式表时,是否有任何CSS标准需要遵循?

初学者经常犯的错误:

CSS也是语义的。尝试表达概念,而不是格式。人为的例子:

错误:

div.red
{
    color: red;
}

与之相反:

好:

div.error
{
    color: red;
}

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

除了其他答案中提到的大量资源外,以下是一些构建CSS工作方式的提示:

按以下顺序进行工作…

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

在页面上添加指向 W3C CSS validator (如果你的网站在互联网上是可见的)并且经常点击它。

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

有IE6/7/8、FF2/3和Chrome/Safari很好。歌剧也不错。继续更改工作时打开页面的浏览器(除非您正在深入了解特定的浏览器问题:-)。

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

更新 如鲍比·杰克所说,我没提到调试工具。你可以使用 IE Developer Toolbar (IE)或 Firebug (对于FF)或Chrome中的集成检查工具,以检查哪些规则应用于特定元素,或者动态修改元素的样式。

抵制过度指定类或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 {}

你可以通过 理解特异性 . 当你为某件事设定规则时,如果有冲突的规则, 专一性决定了哪条规则获胜 .

快速(不完整)总结:

元素范围的规则(如 p {color:green;} )将被以下各项击败:
特定于类的规则(如 p.sidenote {color: blue;} ,其优势在于:
特定于ID的规则(如 p#final {color: red;} ,其优势在于:
内联声明(如 <p style="color: orange;"> ,其优势在于:
一条重要的规则(比如 p#final {color: inherit !important;} )

…所有这些都可以被用户的规则打败。

相互作用可能是复杂的,但它们背后有数学规则。有关更完整的治疗,请参阅EricMeyer的《CSS:最终指南》第3章。

重述: 如果你设定了一个规则,它似乎不会影响任何东西,那么你可能得到了一个冲突的规则。 为了理解为什么一个规则胜过另一个规则,学习特定性。

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

尽可能使用类和ID。

我赞成这个建议 A List Apart

虽然不是很漂亮,有时也有点老, HTML Help by WDG 有一些很好的参考资料。

Quirksmode.org 有一个很好的CSS兼容性表。

关于你的问题,你已经得到了一套很好的答案,这里是你可能会发现有用的一点。

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

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

CSS本身的几个提示。定义样式时,仅当相关元素是唯一的时才使用ID。这样您的样式就可以重用了。使用层次定义,例如 #header .navigationElement a{color:red;} 和 #footer .navigationElement a{color:black;} 这样您就可以移动HTML代码,并自动应用正确的样式。

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

我推荐的另一件事是你使用火狐进行所有的主要开发,让你的网站工作,看看你希望它在FF中如何。 然后 启动IE并解决所有奇怪的问题。如果你这样做,你将得到一个更清洁的网站和更清洁的CSS。

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

我找到W3学校的 pages on CSS 很好参考。

这是一个不错的概述:

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

看一看 CSS Systems for writing maintainable CSS 作者:Natalie Downe ClearLeft . 在她的演讲中有很多很棒的概念(我建议下载PDF,因为她的笔记非常详细)。

我认为她的演讲更多的是针对全职的CSS开发人员,而不是初学者,但即使初学者也可能从中获益匪浅。

我只需要提一下 css Zen Garden 作为灵感的源泉。

如果这是你第一次,祝你好运!

我不确定作为一个初学者,你是否需要广泛或详尽的资源。慢慢来,尽你所能保持你的代码 可读的 . 间距,间距,间距。

使用外部样式表(上面有人说过),如果一个想法听起来不错,不要一直为站点的不同部分添加新的样式表。它会让你的生活在这条路上变得更轻松。

很多人都有很好的建议。我想把代码放在第二位。

我强烈建议使用 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"> ,而您可以拥有数千个类 <div class="box"> )

此外,拥有多个具有相同名称的ID是无效的HTML

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

我从麦克法兰丢失的手册(奥利里书)中了解到我需要知道的,然后盯着 sample rails' app's 样式表。这很好用,无论你用的是什么,google“example/sample projects/app/repositories”for php,asp.net。

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

我见过一些人用简单的

* { 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也很方便。

我已经建立网站5年了,但通过经常阅读这些内容,我学到了很多东西: http://code.google.com/speed/page-speed/docs/rendering.html

也签出 http://www.zeldman.com CSS上的博客。这家伙是网络世界的传奇人物。